Question

使用Three.js，如果我通过绘制形状和挤出来创建网格，我如何设置底层形状的动画以更改生成的网格？

一个简单的例子：

drawShape: function(){
    var shape = new THREE.Shape();
    shape.moveTo(0, 0);
    shape.arc(0,0,30,0,(Math.PI*1.9),true);
    return shape;
},

var shapeGeom = new THREE.ExtrudeGeometry(this.drawShape(), options);

我想通过改变形状路径/弧等来改变几何形状。

Answer 1

最后我使用变形目标来实现这一目标。我做了一个功能，提前创建帧，然后通过它们动画。使用上面的函数绘制，如下所示：

createMorphTargets: function(geom,initVal,targetVal){
    var numFrames = 60;
    var fraqStep = (1/numFrames);
    var diff = targetVal-initVal;
    var stepVal = (targetVal-initVal)/numFrames;
    for(var i=1;i<60;i++){
        var delta = TWEEN.Easing.Quintic.InOut(fraqStep*i);
        var lerpVal = initVal+(diff*(delta));
        var mesh = new THREE.ExtrudeGeometry(this.drawShape(lerpVal), this.bevelOptions);

        geom.morphTargets.push({
            name:'target-'+i,vertices:mesh.vertices
        });
    }
},

三个js动画形状

1 个答案: