如何用three.js在不同的方向移動多個網格？

Question

我遇到問題。用for循環創建了100個網格。他們都擁有0,0,0的位置。但我希望這100個網格在所有不同的方向上分離。

這是我的代碼來創建100目

for(var i = 0; i < 100; i++) 
{ 
var geometry = new THREE.BoxGeometry(2, 2, 2); 
var material = new THREE.MeshBasicMaterial({ color: 0x2194ce}); 
mesh = new THREE.Mesh(geometry, material); 

mesh.position.x = 0; 
mesh.position.y = 0; 
mesh.position.z = 0;  
scene.add(mesh);  
} 

這是代碼我怎麼雖然移動100個網格，但它只能移動一個網

function render(){ 
     requestAnimationFrame(render); 
      mesh.position.x +=0.1; 
      renderer.render(scene, camera); 

     } 

Answer 1

你只有有最後一個網格在您的mesh 變量中。爲了全部移動，可以將它們存儲在一個數組中，然後在渲染循環中迭代該數組並分配New Position。 mesh.position.z = 0; meshes.push(mesh);

而在渲染：

for(var i=0; i<meshes.length; i++){ 
     meshes[i].position.x += 0.1; 
} 

我沒有測試這一點。