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

我也試着在這個答案的基礎上：

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

更進一步，您可以編寫面向對象的Javascript來創建每個曲線和紙張對象。 我建議先從陣列開始，然后根據需要增加復雜性。