threejs-core-scene-graph

In a Three.js scene graph, add() moves an Object3D to a new parent but alters its local transform to match the new hierarchy, whereas attach() reparents the object while preserving its exact world position and orientation.

To preserve world position when moving objects between parent groups in Three.js, use the attach() method instead of add(), ensuring the Object3D maintains its global transform during reparenting.

Traversing a Three.js scene graph causes errors when removing child objects because mutating the children array mid-iteration breaks the traversal loop, requiring safe traversal patterns that defer structural modifications.

To manage matrix updates in Three.js, toggle matrixAutoUpdate to false and manually call updateMatrix() when you need predictable rendering, preventing automatic matrix recalculations during scene graph traversal.

The best way to dispose of GPU resources when removing Object3D meshes from a scene is to implement clean disposal patterns that explicitly call dispose() on geometries and materials to prevent memory leaks.

To build nested groups with correct coordinate conversions in Three.js, structure Object3D hierarchies using Scene and Group containers, and apply local-to-world space transitions to ensure reusable scene compositions.