The Scene Graph

What is the Scene Graph?

In Three.js, the Scene Graph is a tree-like data structure that manages every object you want to render. Think of it as a family tree or a file directory:

• The Root: The THREE.Scene is the base of the tree.
• Nodes: Every object you add (Meshes, Lights, Groups) is a node.
• Inheritance: Every node inherits from Object3D, allowing it to have children.

When you move a parent node, the entire "branch" (all its children and grandchildren) moves with it. This is essential for complex objects like a car: if you move the car's body, the wheels must follow.

// A logical Scene Graph structure
const car = new THREE.Group(); // Parent
const body = new THREE.Mesh(bodyGeom, bodyMat);
const wheel1 = new THREE.Mesh(wheelGeom, wheelMat);

car.add(body);
car.add(wheel1); // wheel1 is now a child of car
scene.add(car);  // The car (and its children) are now in the graph

Every scene that you'll build in Three.js will have some sort of hierarchy saved in the Scene Graph. All of their local and world positions, rotations, and transformations will be based on their parent's, up to the root of the graph.