home/ atoms/ threejs-scenegraph-hierarchy

The three.js scene graph is a hierarchy where child object transforms are always relative to their parent

The scene graph is a tree. Every object (Mesh, Group, light, camera) can have children. When a parent moves, rotates, or scales, all its children follow — their local transforms are relative, not absolute. This makes hierarchical assemblies natural: attach wheel meshes as children of a car Group, and moving the car Group automatically moves all wheels. The root of the graph is the Scene itself. Transforms applied directly on a mesh are in that mesh’s local space; the renderer multiplies up the chain to world space before drawing. This is analogous to how positions in CSS are relative to a parent’s coordinate system.

Examples

const car = new THREE.Group();
scene.add(car);
const wheel = new THREE.Mesh(wheelGeo, wheelMat);
wheel.position.x = 1; // relative to car, not world
car.add(wheel);
car.position.z = 5;  // moves both car body and wheel

Assessment

Describe what happens to a child mesh’s world position when its parent Group is rotated 90 degrees around Y. Produce a minimal two-level hierarchy (planet + moon) and animate them independently.

“Children are positioned and oriented relative to their parent”