Three.js：希望生成对象并为曲线上的对象设置动画

Question

我正在尝试在 setInterval 上生成一组对象，并在路径上为每个对象提供自己的动画（目前使用 requestAnimationFrame 来执行此操作）。我设法添加了一个对象并在路径上对其进行动画处理。使用此代码：

var psGeometry = new THREE.PlaneGeometry(3,2,10,1);
var psPlane = new THREE.Mesh(psGeometry, new THREE.MeshBasicMaterial({color:0x0000ff}));
scene.add(psPlane);

function animatePaper(obj = psPlane, offset= 0.007)
{
    if(counter <=( 1-obj.geometry.vertices.length/2 *offset))
    {
        for (var i=0; i < obj.geometry.vertices.length/2; i++)
        {
            obj.geometry.vertices[i].y = curvePath.getPoint(counter + i * offset).y;
            obj.geometry.vertices[i].z = -0.5;
            obj.geometry.vertices[i + obj.geometry.vertices.length/2].y = curvePath.getPoint(counter + i * offset).y;
            obj.geometry.vertices[i + obj.geometry.vertices.length/2].z = -2.5;

            obj.geometry.vertices[i].x = curvePath.getPoint(counter + i * offset).x;
            obj.geometry.vertices[i + obj.geometry.vertices.length/2].x = curvePath.getPoint(counter + i * offset).x;

        }
        obj.geometry.verticesNeedUpdate = true;

        counter += 0.005;
    }
    else{
        console.log("Removing...");
        scene.remove(obj);
    }
}
function animate() {
    requestAnimationFrame(animate);
    animatePaper(psPlane, 0.007);
    render();
}

可在此处找到示例：jsfiddle.net。

由于这会沿曲线路径为对象设置动画（请参见 jsfiddle 示例），我认为按间隔生成这些对象并应用上述代码应该可以工作。错了！

我尝试过：创建一个生成对象的函数并应用上面的代码：

setInterval(drawSheets, 1000); 
function drawSheets()
{
    var psGeometry = new THREE.PlaneGeometry(3,2,10,1);
    var psPlane = new THREE.Mesh(psGeometry, new THREE.MeshBasicMaterial({color:0x0000ff}));
    scene.add(psPlane);
    setInterval(function(){animatePaper(psPlane, 0.007);}, 30);
}

我也在this answer的基础上试过：

setInterval(objArray.forEach(function(obj){setInterval(function(){animatePaper(obj);},300);}), 3000);

预期： 在一定间隔内生成多个对象，并在曲线上分别为每个对象设置动画。

希望任何人都可以帮助我！干杯。

版本：Three.js r82

** 编辑：** 小改进。经过另一个小测试（jsfiddle）。我发现当我在函数上使用 setInterval 时，它共享相同的变量（从而加快动画速度）。由于这是问题的一部分，我想问一下是否有人知道如何使这些变量成为对象的本地变量。

Answer 1

考虑创建一个数组，其中包含每个 Path 和 Plane 对象（或者可能一个数组用于 Paths，一个数组用于 Planes）以及它们独特的偏移量或其他值，然后在动画循环中的更新函数中循环这些对象，通过您的 animatePaper 函数运行每个函数。

在伪代码中：

var planesAndMeshesArray = [ 
    { path1 : (your plane here), plane1 : (your curved mesh here), offset : (an offset value), extrudeSettings : (your settings object here) }, 
    { path2 : (your plane here), plane2 : (your curved mesh here), offset : (an offset value), extrudeSettings : (your settings object here) }, 
    { path3 : (your plane here), plane3 : (your curved mesh here), offset : (an offset value), extrudeSettings : (your settings object here) },
...]

- create a loop to write the above array with random values in an appropriate range to suit the effects you're looking for
- loop through the above array to add each of the meshes and planes to the scene     

function update() {
    - update each object by looping through the above array through your `animatePaper` function. It works as a handy set of pointers to each of the objects in your scene - if you change them in the array, they will change in your scene. 
    - also update your controls
}

function animate() {
    requestAnimationFrame(animate);
    update();
    render();
}

更进一步，您可以编写 object-oriented Javascript 来创建每个曲线和纸对象。我建议先从数组开始，然后根据需要进一步增加复杂性。