Threejs複数のメッシュアニメーション

Question

私は3jsにはとても新しいので、400シリンダを描画するforループを作成しました。すべてが問題なく、シーンに呼び出され、適切にレンダリングされます。オブジェクトをアニメートすると、400のうちの1つだけが回転するように見えます。どのようにすべてのシリンダーを回転できますか？

コード：

 for(var j = 0; j < 400; j++){ 
       abgeometry2 = new THREE.CylinderGeometry (1, 5, 8, 4); 
       abmesh2 = new THREE.MeshPhongMaterial({color: 0x3B170B, 
        wireframe: false }); 
       mesh2 = new THREE.Mesh(abgeometry2, abmesh2); 
       mesh2.position.x = Math.random() * 400 - 200; 
       mesh2.position.y = Math.random() * 400 - 200; 
       mesh2.position.z = Math.random() * 400 - 200; 
       scene.add(mesh2); 
      } 

そして、私は入れアニメーションで：mesh2.rotation.z += 0.06; 私は愚かな何かをすることができる知っているが、私はthreejsと非常に慣れていませんよ。

Answer 1

ループ中にすべてmesh2に割り当てられているので、回転を最後の円柱に適用するだけです。

このような何か試してみてください：

var numCylinders = 400; 

var cylinders = []; 

var geo = new THREE.CylinderGeometry (1, 5, 8, 4); 
var mesh = new THREE.MeshPhongMaterial({color: 0x3B170B, wireframe: false }); 

for (var i = 0; i < numCylinders; i++){ 
    var curCylinder = new THREE.Mesh(geo, mesh); 

    curCylinder.position.x = Math.random() * 400 - 200; 
    curCylinder.position.y = Math.random() * 400 - 200; 
    curCylinder.position.z = Math.random() * 400 - 200; 

    scene.add(curCylinder); 

    cylinders.push(curCylinder); 
} 

var render = function() { 
    requestAnimationFrame(render); 

    for (var i = 0; i <numCylinders; i++){ 
     cylinders[i].rotation.z += 0.06; 
    } 

    renderer.render(scene, camera); 
}; 

render(); 

を