Invert rotation of parent in the child, so the child appears unrotated in the world

Question

In a THREE.js scene, I have a parent object that rotates around. This parent has children that should be positionally locked to their parent\'s rotation, but their own rota

Answer 1

There is always a trick. :-)

You want to have children of a parent object whose positions are relative to the parent, but whose rotations are independent of the parent.

The easiest way to do this is to have dummy Object3D objects as children of the parent and then add the children to the scene (not the parent) and have the children get their world positions from the dummy objects.

parent                 scene
   |                     |
   --- object_1          --- child_1
   |                     |
   --- object_2          --- child_2

child_1.position is set from object_1's world position:

child.position.setFromMatrixPosition( parent.children[ idx ].matrixWorld )

As an alternative, there is a THREE.Gyroscope that you could use, but it is computationally more intensive.