Question

所以我是使用three.js的新手，目前我正在搞乱一些基本想法。我创建了一个类，用于使立方体出现在随机位置，以及一个由for循环填充的多维数据集数组。我试图让立方体动画，以便它们同时缓慢下降。问题是我似乎无法将它们设置为所有动画，只有最后一个多维数据集放入数组中。这是我的代码：

class Boxes {

  constructor() {

      this.boxGeo = new THREE.BoxGeometry(1,1,1);
      this.boxMat = new THREE.MeshLambertMaterial({
    color: 0x673612
});
    this.box = new THREE.Mesh(this.boxGeo, this.boxMat);
    this.box.position.x = Math.random() * (10 - -10) + -10;
    this.box.position.y = Math.random() * (6 - -6) + -6;
    this.box.position.z = Math.random() * (6 - -6) + -6;

    scene.add(this.box);


  }
  update() {


  }

}

var randBoxes = [];

for(var i = 0; i < 22; i++) {
  var newBox = new Boxes();
  randBoxes.push(newBox);

};

fall_speed = 0.01;
var animate = function() {
  requestAnimationFrame(animate);

  newBox.box.position.y = newBox.box.position.y - fall_speed; 

  renderer.render(scene, camera);
};


animate();

任何帮助都会很棒！谢谢

Answer 1

由于你将所有的盒子对象都推到了一个数组中，你将不得不再次遍历它以获得动画：

for (i = 0; i < randBoxes.length; i++) {
    randBoxes[i].box.position.y = newBox.box.position.y - fall_speed;
}

您当前代码仅为最后一个newBox对象制作动画的原因是，在您的第一个for循环中，它停止了将变量newBox定义为您的第22个方框数组，因为那是循环停止的地方。

如何为three.js中的类制作的数组设置动画效果？

1 个答案: