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.js r82

**編輯：**細化。經過又一次小測試（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創建每個曲線和紙的對象。我建議首先從數組開始，並根據需要添加更多複雜性。