javascript - 三.js object3d 的操作顺序

Question

我正在尝试使用 Three.js 构建一个旋转木马。我加载了我的马模型，想要克隆它 8 次，并将其以等间隔放置在一个圆圈中。我知道我可以使用数学、正弦和余弦函数来做到这一点，但我想尝试一些不同的东西，但我无法让它工作。

基本上我想做的是将马放在一个地方，旋转旋转木马对象，然后将下一匹马放在同一个地方。我在想，如果我这样做，因为旋转木马正在旋转，它会将每匹马放置在旋转木马的不同位置。

据我所知，最终发生的事情是，首先它添加所有的马(并让它们重叠)，然后它进行所有的旋转。因此我只看到一匹马。这真的是发生的事情吗？这能用什么解释呢？我该如何解决这个问题？

这是我的代码:

for(var i = 0; i < NUM_HORSES; i++){
  merryGoRound.rotateY(-2*Math.PI/NUM_HORSES);
  var horseCopy = horse.clone();
  horseCopy.translateZ(MERRY_GO_ROUND_RADIUS);
  merryGoRound.add(horseCopy);
}
scene.add(merryGoRound);
render();

horse，因此 horseCopy 是一个 THREE.Object3D。我尝试让 merryGoRound 成为 THREE.Object3D 或 THREE.Group，但它们都给出了相同的结果。

任何帮助将不胜感激

Answer 1

如果将对象 a 添加到另一个对象 b(THREE.Group 或任何其他 THREE.Object3D)，则 a 的位置始终被解释为相对于物体b的起源和转变。这就是拥有这种层次结构的全部意义(否则当父对象旋转时，对象无法随父对象一起旋转，并且您的旋转木马会非常无聊)。

你想要的是指定世界空间中的坐标(“这就是我想要那匹马所在的确切位置，无论旋转木马如何旋转”)并将该位置重新解释为相对于旋转木马。您可以在 Three.js 中使用 worldToLocal 函数来完成此操作。

所以在你的例子中:

var position = new THREE.Vector3(0,0,MERRY_GO_ROUND_RADIUS);
for(var i = 0; i < NUM_HORSES; i++){
  var horseCopy = horse.clone();

  merryGoRound.rotateY(-2 * Math.PI / NUM_HORSES);
  merryGoRound.updateMatrixWorld();

  // set the position in worldspace-coordinates
  horseCopy.position.copy(position);
  // convert from worldspace to objectspace
  merryGoRound.worldToLocal(horseCopy.position);
  merryGoRound.add(horseCopy);
}
scene.add(merryGoRound);