javascript - 如何使用 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中只有最后一个网格。 多变的。为了移动全部，您可以将它们存储在一个数组中，然后在渲染循环中迭代该数组并分配新位置。 mesh.position.z = 0; meshes.push( mesh );

在渲染中:

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

我还没有测试过这个。