如何使用three.js在不同方向上移动多个网格

How to move multiple meshs in different directions with three.js?

本文关键字:移动 网格 同方向 何使用 three js      更新时间:2023-09-26

我有个问题。使用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); 
        }

mesh中只有最后一个网格变量为了移动所有对象,可以将它们存储在一个数组中,然后在渲染循环中迭代该数组并指定"新位置"。mesh.position.z = 0; meshes.push( mesh );

在渲染中:

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

我还没有测试过。