如何在场景后移动多个对象。

Question

我用的是Three。js创建100个立方体的动画。对于每个立方体，我设置其几何体和材质，然后使用：scene将其添加到场景中。添加（多维数据集）；我一直将立方体的位置存储在三个数组中：cube_x[99]cube_y[99]cube_z[99]

我不知道如何在修改渲染器时告诉它们的位置。当场景中只有一个立方体时，以下方法适用于一个立方体：

立方体位置。x=300；cube.position.y=000；

我试着把立方体做成一个数组来保存100个立方体的xyz位置。但是我好像不能调用scene . add(cube[I])；

scene.add（立方体）后如何更新100个立方体的位置；如何让three.js知道我正在尝试移动哪个立方体？

谢谢- javascript初学者

Answer 1

基本上，您将在数组中存储对每个多维数据集的引用：

// reference array
var cubes = [];

// create cube mesh
var cube = new THREE.Mesh(new THREE.BoxGeometry(), someMaterial);

// push a reference to array
cubes.push(cube);

// add same cube to scene
scene.add(cube);

现在，您可以迭代每个立方体并移动它:

cubes.forEach(function(cube) {
  cube.position.z -= 0.1;  // move for example in Z direction
});

您可以在动画循环中这样做。

// Setup a simple demo scene
var scene = new THREE.Scene();
var cam = new THREE.PerspectiveCamera(40, innerWidth / innerHeight, 0.1, maxDist);
var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setPixelRatio(devicePixelRatio);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

// STore our cubes somewhere, dist for random generation and clipping
var cubes = [], maxDist = 500, r = Math.random, materials = [];
for(var i = 0; i < 7; i++) materials.push(new THREE.MeshBasicMaterial({color: (r()*0xffffff)&0xffffff|0x999999}));

// Add and store some cubes
for(i = 0; i < 3000; i++) {
  var cube = new THREE.Mesh(new THREE.BoxBufferGeometry(), materials[i % materials.length]);
  cubes.push(cube); // store to our array
  cube.position.set(r()*maxDist*2-maxDist, r()*maxDist*2-maxDist, r()*maxDist*2-maxDist); // random positions
}
scene.add(...cubes);	//es6, add to scene
cam.position.z = maxDist;

// Animate cubes
function loop(time) {
  for(i = 0, cube; i < cubes.length; i++) {  // for each cube do:
  	cube = cubes[i];
  	cube.position.z -= 1; // move on Z in this demo
    if (cube.position.z < -maxDist) cube.position.z = maxDist;  // reset position for demo
  }
  cam.rotation.z = Math.sin(time*0.0003);      // add some camera action
  cam.rotation.y = Math.sin(time*0.0005)*0.3;  // add some camera action
  renderer.render(scene, cam);                 // render everything
  requestAnimationFrame(loop)
};
requestAnimationFrame(loop)

body {margin:0:overflow:hidden}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>