Three.js · 3 / 6

Dashboard
Module 3 · Groups

Parent transforms, child meshes

A THREE.Group is an invisible anchor. Put meshes inside it — rotating or moving the group moves every child together. Build rigs, wagons, solar systems: nested graphs beat copying positions by hand. 

// Group as rig
const rig = new THREE.Group();
rig.add(boxA);
rig.add(boxB);
rig.add(boxC);
scene.add(rig);

function animate(t) {
  rig.rotation.y = t * 0.5; // all children orbit together
}
Pro tip

Name groups in bigger scenes (rig.userData.role = 'hero') so debugging stays sane.

Next

Module 4 uses Clock for time-based motion.