Groups & Hierarchy

Groups & Hierarchy

Three.js lets you nest objects in a scene graph — a tree where parent transforms propagate to children.

Group

THREE.Group is an invisible container. Children inherit their parent's position, rotation, and scale.

const group = new THREE.Group();
group.add(meshA);
group.add(meshB);
scene.add(group);

// Rotating the group rotates all children together
group.rotation.y += 0.01;

Scene Graph Rules

• Child transforms are relative to the parent
• A child at position (1, 0, 0) inside a group at (3, 0, 0) is at world position (4, 0, 0)
• Scaling a parent scales all children

const arm = new THREE.Group();
arm.position.set(2, 0, 0); // offset from parent

const hand = new THREE.Mesh(geo, mat);
hand.position.set(1, 0, 0); // offset from arm
arm.add(hand);

add vs scene.add

Any Object3D (including Mesh, Group, Light) can be a parent:

parent.add(child); // child becomes relative to parent
scene.add(parent); // top-level in scene

Your Task

Implement buildSolarSystem() that returns a Group containing:

• A center sphere (the "sun") of radius 1 with MeshNormalMaterial at position (0, 0, 0)
• An orbit Group with a smaller sphere of radius 0.4 at position (3, 0, 0) (the "planet")

Return { sun, orbitGroup, planet }.