Scene Graph

Three.js uses a scene graph: a tree of Object3D nodes. Every visible thing — meshes, lights, cameras — is an Object3D. The scene itself is the root node.

This means moving the "car" Group automatically moves all its children in world space. This is how articulated objects, vehicle wheels, character limbs etc. work.

Every object in the scene graph extends Object3D. It provides transforms, hierarchy, visibility, and lifecycle events.

Identity & Hierarchy Properties

Transform Properties

Visibility & Rendering Properties

// scene.add(mesh) calls Object3D.add() on the scene node:
add( object ) {
  // Prevent adding self
  if ( object === this ) throw new Error( ... );

  // If object has an existing parent, remove it first
  if ( object.parent !== null ) object.removeFromParent();

  // Set bi-directional links
  object.parent = this;         // child knows its parent
  this.children.push( object ); // parent knows its children

  // Fire events so listeners can react
  object.dispatchEvent( _addedEvent );
  this.dispatchEvent( _childaddedEvent );

  return this; // chainable
}

// Removal is the mirror image:
remove( object ) {
  const index = this.children.indexOf( object );
  if ( index !== -1 ) {
    object.parent = null;
    this.children.splice( index, 1 );
    object.dispatchEvent( _removedEvent );
    this.dispatchEvent( _childremovedEvent );
  }
  return this;
}

Each node stores a local transform (relative to its parent) and a world transform (absolute in scene space). The renderer needs world transforms to place vertices correctly.

// In Object3D.js — the actual implementation
updateMatrixWorld( force ) {
  if ( this.matrixAutoUpdate ) this.updateMatrix();

  if ( this.matrixWorldNeedsUpdate || force ) {
    if ( this.matrixWorldAutoUpdate ) {
      if ( this.parent === null ) {
        this.matrixWorld.copy( this.matrix );
      } else {
        // Multiply parent's world matrix by local matrix
        this.matrixWorld.multiplyMatrices(
          this.parent.matrixWorld,
          this.matrix
        );
      }
    }
    this.matrixWorldNeedsUpdate = false;
    force = true; // propagate to children
  }

  const children = this.children;
  for ( let i = 0, l = children.length; i < l; i++ ) {
    children[ i ].updateMatrixWorld( force );
  }
}

The key insight: matrixWorld is a product of all ancestor transforms. Moving a parent automatically repositions all descendants, because their matrixWorld is recomputed from the new parent.matrixWorld.

Why Quaternions, Not Euler Angles?

Euler angles (rotation.x/y/z) are easy to use but suffer from gimbal lock — certain rotations can lose a degree of freedom. Quaternions represent rotation as a 4D unit vector and compose without gimbal lock. Three.js keeps both in sync: setting rotation updates quaternion and vice versa, but internally uses quaternions for matrix composition.

• Euclidean Space — Quaternion Transforms
• Wikipedia — Gimbal Lock

Scene extends Object3D and adds renderer hints. It is the tree root passed to renderer.render(scene, camera).

How overrideMaterial Works

In renderObjects() in WebGLRenderer, before calling renderObject(), the renderer checks:

// WebGLRenderer.js — inside renderObjects()
const overrideMaterial = scene.isScene
  ? scene.overrideMaterial
  : null;

// Each object renders with override if set
const material = overrideMaterial !== null
  ? overrideMaterial
  : renderItem.material;

renderObject( object, scene, camera, geometry, material, group );

This is how shadow map rendering works — an override MeshDepthMaterial replaces every object's real material for the shadow pass.

// Walk the tree depth-first
scene.traverse( object => {
  console.log( object.name );
});

// Find by name (stops at first match)
const wheel = scene.getObjectByName( 'wheel_FL' );

// Find all objects matching a condition
const meshes = [];
scene.traverseVisible( obj => {
  if ( obj.isMesh ) meshes.push( obj );
});

// Walk ancestors up to root
mesh.traverseAncestors( ancestor => {
  console.log( ancestor.name );
});

• Wikipedia — Scene Graph — the general pattern, not three.js-specific
• Three.js Docs — Object3D
• Three.js Manual — Scene Graph — visual diagrams of the hierarchy
• Euclidean Space — Quaternion to Matrix
• OpenGL Tutorial — Model/View/Projection Matrices