THREE.JS, ignore parent's rotation

Question

I'm trying to make child object follow parent's position and behave like a normal child, however I want it to keep it's rotation unchanged.

What's the best way to do that without affecting performance(I'm tight on cpu budget already running 2 workers and having lots of objects)? Is there a setting which would allow to only child's position being affected?

Also an important thing is that when parent is being rotated then child's position should follow that rotation.

Answer 1

You want to prevent a child object from rotating when the child's parent rotates.

One of these two patterns should do what you want. They have slightly different behaviors.

The first pattern:

var gyro = new THREE.Gyroscope();

scene.add( parent );
parent.add( gyro );
gyro.add( child ); // add child to gyroscope

child.position.set( x, y, z );

The second pattern:

object = new THREE.Object3D();
object.position.set( x, y, z ); // child's desired position relative to parent

scene.add( parent );
parent.add( object ); // add object to parent
scene.add( child ); // add child to scene

In the second case, you will have to update the child's position manually inside the render loop, like so:

child.position.setFromMatrixPosition( object.matrixWorld );

three.js r.71

Answer 2

I suggest

child.position.copy(object.position);

instead of what is suggested in WestLangley's answer:

child.position.setFromMatrixPosition( object.matrixWorld );

I ran into issues with the latter being inaccurate, causing jitter in position of the child.

Note that this only answers the first part of your question, namely how to follow the parent's position keeping the child's rotation unchanged.

It might be worth clarifying the second part of your question as it isn't entirely clear to me.