Three.js：オブジェクトを生成してカーブ上のオブジェクトをアニメーション化することをお探しですか？

Question

setIntervalにオブジェクトのセットをスポーンし、それぞれのオブジェクトにパスを割り当てます（現在requestAnimationFrameを使用しています） 。私は1つのオブジェクトを追加し、これをパス上にアニメーション化することができました。このコードでは：

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(objArray.forEach(function(obj){setInterval(function(){animatePaper(obj);},300);}), 3000); 

： 産卵複数

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に基づいて試みをこれらのオブジェクトのそれぞれを曲線上に別々にアニメーション化します。

誰もが私を助けてくれることを願っています。乾杯。

バージョン：Three.js R82

** EDIT：**小さな改善。別の小さな試験の後（jsfiddle）。関数でsetIntervalを使用すると、同じ変数が共有されることがわかりました（したがって、アニメーションのスピードアップ）。これは問題の一部なので、これらの変数をオブジェクトにローカルにする方法を知っているかどうか聞いてみたいと思います。

Answer 1

独自のオフセットや他の値とともに、PathオブジェクトとPlaneオブジェクト（Path用の配列と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を書くことができます。最初に配列から始め、必要に応じてさらに複雑さを加えることをお勧めします。