在 Three.js 中改变子对象的世界位置

Question

Is there a way in Three.js to change the world position of a child object?

My ultimate goal is to:

1) Detach the child from the parent (without it's location changing)
2) Move the parent to a different location
3) Reattach the child (without it's location changing)

In my code, the 'child' is actually a group of objects (and I'm looking to keep each in the same world position)

Currently, I have achieved 1 and 2 in the following way:

scene.updateMatrixWorld();
var vector = new THREE.Vector3();
vector.setFromMatrixPosition( child.matrixWorld );
grandParent.remove( parent );
scene.add( parent );
parent.children[0].position = vector;

I've tried to reverse the above process by storing the matrixWorld, and updating it to the stored value, but was unsuccessful. I know that altering the matrixWorld is ill-advised, but it's the only method that has proven fruitful.

Answer 1

Yes, you can detach the child from the parent, transform the parent, and the reattach the child.

The method to use to do that is:

parent.attach( object );

which adds object as a child of parent , while maintaining the object's world transform.

three.js r.113