Question

我在一个框架中创建了一个自定义组件，可以创建一个定制的几何体。我正在使用tick函数为几何体顶点的更新设置动画。这一切都运行正常，但几何体上的阴影不会更新。

在我的下面示例中，我在2个状态之间切换平面形状，折叠和展开。例如，当它从折叠到展开动画时，面部会保留阴影，就像它仍然折叠一样。

以下是HTML，请参阅此示例中的<a-fold>，从折叠状态开始（可以通过更改该属性将其更改为＆＃39;展开＆＃39;）。

<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，但它没有任何区别。

另一方面，如果我对整个实体进行动画（即旋转），我可以看到反射光线的材质，因此材质会动态响应光照，而不是在我通过更新顶点来改变形状时

以下两张图片展示了我的意思。

你可以看到，在第二张图像中，虽然平面是平的，但它的阴影表明它有一个折叠。反之亦然（即如果它开始展开，阴影是正确的，并且在折叠时仍然存在）。

Here is a js fiddle

需要更多信息，请询问。任何帮助都非常受欢迎。

Answer 1

使用法向量计算光照，在您的情况下，您移动网格顶点但保留法线向量，这就是光照不会发生变化的原因。在您更改顶点后，需要在刻度函数中添加geometry.computeVertexNormals();。

在3D中阴影与阴影或光照不同，您遇到的问题与光照有关，但与阴影无关。这就是为什么调整mesh.castShadow属性并不像您预期的那样。

如何在a-frame / three.js

1 个答案: