我在一个框架中创建了一个自定义组件，它创建了一个定制的几何体。我正在使用 tick 函数来为几何体顶点的更新设置动画。这一切都很好，但是几何体上的阴影不会更新。
在我下面的示例中，我在折叠和展开这两种状态之间切换平面形状。例如，当它从折叠到展开的动画时，面部会保留阴影，就好像它仍然是折叠的一样。
这是HTML，请看<a-fold>在此示例中，从折叠状态开始(可以通过更改该属性将其更改为“展开”)。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene test>
<a-fold
state="folded"
color="blue"
position="-7.5 1 -20">
</a-fold>
<a-plane
position="0 0 -4"
rotation="-90 0 0"
width="20"
height="20"
color="#7BC8A4">
</a-plane>
<a-sky
color="#ECECEC">
</a-sky>
</a-scene>
</body>
</html>
和javascript
//a trigger to test state change
AFRAME.registerComponent('test', {
init: function () {
setTimeout(function(){
var target = document.querySelector('a-fold');
target.setAttribute('changestate', true);
}, 2000);
}
});
//component
AFRAME.registerComponent('folder', {
schema: {
state: {type: 'string', default: 'unfolded'},
color: {type: 'color', default: '#000'},
changestate: {type: 'boolean', default: false},
changedur: {type: 'number', default: 400},
},
store: {
unfolded: [{"x":15,"y":0,"z":0},{"x":15,"y":15,"z":0},{"x":0,"y":15,"z":0},{"x":0,"y":0,"z":0},{"x":0,"y":15,"z":0},{"x":15,"y":0,"z":0},],
folded: [{"x":15,"y":0,"z":0},{"x":12,"y":12,"z":5},{"x":0,"y":15,"z":0},{"x":3,"y":3,"z":5},{"x":0,"y":15,"z":0},{"x":15,"y":0,"z":0},],
},
update: function () {
this.geometry = new THREE.Geometry();
var geometry = this.geometry
var verts = this.store[this.data.state]
$.each( verts, function( i, v3 ) {
geometry.vertices.push ( new THREE.Vector3(v3.x, v3.y, v3.z) );
});
geometry.faces.push(new THREE.Face3(0, 1, 2))
geometry.faces.push(new THREE.Face3(3, 4, 5))
geometry.computeBoundingBox();
geometry.computeFaceNormals();
geometry.computeVertexNormals();
this.material = new THREE.MeshStandardMaterial({color: this.data.color});
this.material.side = THREE.DoubleSide;
this.material.needsUpdate = true
this.mesh = new THREE.Mesh(this.geometry, this.material);
this.mesh.castShadow = true;
this.mesh.receiveShadow = true;
this.el.setObject3D('mesh', this.mesh);
},
tick: function (t, td) {
if (this.data.changestate === true){
var dur = this.data.changedur
var geom = this.el.getObject3D('mesh').geometry
var currVerts = geom.vertices
var toVerts = this.store[this.gotoState()]
var somethingChanged = false;
var allAxis = ["x", "y", "z"];
var thisParent = this
$.each( currVerts, function( i, vert) {
var curr = currVerts[i]
var to = toVerts[i]
$.each( allAxis, function( i, axis ) {
if (thisParent.approxEqual(curr[axis], to[axis])) {
somethingChanged = somethingChanged || false;
} else if (curr[axis] < to[axis]) {
var step = thisParent.stepCalc(curr[axis], to[axis], dur, td)
curr[axis] += step;
somethingChanged = true;
} else {
var step = thisParent.stepCalc(curr[axis], to[axis], dur, td)
curr[axis] -= step;
somethingChanged = true;
}
});
});
geom.verticesNeedUpdate = somethingChanged;
}
},
gotoState: function (){
var to = ""
var current = this.data.state
var states = Object.keys(this.store)
$.each( states, function( i, state) {
if ( state != current ){
to = state
}
});
return to;
},
approxEqual: function (x, y) {
return Math.abs(x - y) < 0.00001;
},
stepCalc: function (curr, to, dur, delta){
var distance = Math.abs(curr - to)
var speed = distance/dur
var step = speed*delta
return step;
},
remove: function () {
this.el.removeObject3D('mesh');
}
});
//primitive
AFRAME.registerPrimitive('a-fold', {
defaultComponents: {
folder: {}
},
mappings: {
state: 'folder.state',
color: 'folder.color',
changestate: 'folder.changestate',
changedur: 'folder.changedur'
}
});
抱歉，我知道它很多，但我不想简化它以防万一我失去了问题。正如您在组件中看到的那样，我尝试添加 this.material.needsUpdate = true以及添加 this.mesh.castShadow = true和 this.mesh.receiveShadow = true但这并没有什么区别。
附带说明一下，如果我为整个实体制作动画(即旋转)，我可以看到反射光的 Material ，因此 Material 会动态响应光照，而不是当我通过更新顶点更改形状时.
这里有 2 张图片展示了我的意思。
你可以看到在第二张图片中，虽然平面是平的，但它的阴影表明它有一个褶皱。反之亦然(即，如果它开始展开，阴影是正确的，并且在折叠时仍然存在)。
如需更多信息，请询问。任何帮助一如既往地受到赞赏。
最佳答案
照明是使用法向量计算的，在您的情况下，您正在移动网格顶点但保留法向量，这就是照明不改变的原因。更改顶点后，您需要在滴答函数中添加 geometry.computeVertexNormals();。
在 3D 中，阴影不同于着色或照明，您遇到的问题与照明有关，但与阴影无关。这就是为什么调整 mesh.castShadow 属性没有达到您预期的效果。
关于javascript - 如何在更新 a-frame/three.js 中自定义几何体的顶点时更新阴影，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48138039/