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 rotation needs to be independent and not inherit from the parent.
A simple case would be to make the children always face the camera.
My attempt was to "invert" the rotation of the parent in the children. That is:
# render loop
render = ->
# Rotate the parent
@parent.rotation.x += 0.01
@parent.rotation.z += 0.02
# Attempt to invert rotation of the parent, and fail :(
for child in @children
child.rotation.x = -@parent.rotation.x
child.rotation.z = -@parent.rotation.z
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.