三个js动画形状

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);

我想通过改变形状来改变几何形状path/arc等等

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动画形状

Three js animate shape

javascript

three.js