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。

由于这会沿 curvePath 对对象进行动画处理（请参阅 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.jsr82

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

Answer 1

考虑创建一个数组，其中包含每个路径和平面对象（或者可能一个数组用于路径，一个数组用于平面）及其独特的偏移量或其他值，然后在动画的更新函数中循环遍历这些对象循环，运行每次通过你的 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 来创建每个曲线和纸对象。我建议首先从数组开始，然后根据需要进一步增加复杂性。

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

Three.js: Looking to spawn objects and animate the objects on a curve

javascript

3d

animation

curve

three.js