three.js object3d的操作顺序

Question

I am trying to construct a merry-go-round using three.js. I loaded my horse model and want to clone it 8 times and place it in equal intervals in a circle. I know I can use math, and sin and cos functions to do this, but I wanted to try something different and I can't get it working.

Basically what I want to do is place the horse in a single place, rotate the merry-go-round object, and place the next horse in the same single place. I was thinking that if I do this, because the merry-go-round is rotating it will place each horse in a different place in the merry-go-round.

What ends up happening, to the best of my understanding, is that first it adds all the horses (and have them overlap) and then it does all of the rotations. Thus I only see a single horse. Is this really whats happening? What can explain this? How can I solve this?

Here is my code:

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, and thus horseCopy is a THREE.Object3D. I tried having merryGoRound be either a THREE.Object3D or THREE.Group but they both gave the same results.

Any help would be greatly appreciated

Answer 1

If you add an object a to another object b (either THREE.Group or any other THREE.Object3D ), the position of a is always interpreted as relative to object b's origin and transformation. This is the whole point of having this hierarchy (otherwise the objects couldn't rotate with the parent when it is rotated and your merry-go-round would be pretty boring).

What you want is to specify coordinates in world-space ("this is the exact place I want that horse to be, no matter how the merry-go-round is rotated") and re-interpret this position as relative to the merry-go-round. You can do that in three.js using the worldToLocal -function.

So in your example:

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);