JavaScript 3D library providing WebGL and WebGPU renderers for creating interactive 3D graphics in web browsers
—
Core scene graph functionality providing the foundation for managing 3D objects in Three.js. This includes the base Object3D class, scene containers, and object hierarchies.
The fundamental base class for all 3D objects, providing transformation, hierarchy, and event systems.
import { Object3D, Vector3, Matrix4, Quaternion, Euler, Layers, AnimationClip, Material } from 'three';
/**
* Base class for all 3D objects with transform, hierarchy, and event system
*/
class Object3D extends EventDispatcher {
/** Unique identifier for the object */
readonly id: number;
/** UUID string identifier */
readonly uuid: string;
/** Optional name for the object */
name: string;
/** Object type string for serialization */
readonly type: string;
/** Reference to parent object in hierarchy */
parent: Object3D | null;
/** Array of child objects */
children: Object3D[];
/** Up direction vector (default is Y-up) */
up: Vector3;
/** Local position */
position: Vector3;
/** Local rotation as Euler angles */
rotation: Euler;
/** Local rotation as quaternion */
quaternion: Quaternion;
/** Local scale */
scale: Vector3;
/** Local transformation matrix */
matrix: Matrix4;
/** World transformation matrix */
matrixWorld: Matrix4;
/** Model-view matrix */
readonly modelViewMatrix: Matrix4;
/** Normal matrix for transforming normals */
readonly normalMatrix: Matrix3;
/** Auto-update local matrix from position/rotation/scale */
matrixAutoUpdate: boolean;
/** Auto-update world matrix */
matrixWorldAutoUpdate: boolean;
/** Force world matrix update on next render */
matrixWorldNeedsUpdate: boolean;
/** Layer membership for selective rendering */
layers: Layers;
/** Visibility flag */
visible: boolean;
/** Cast shadows flag */
castShadow: boolean;
/** Receive shadows flag */
receiveShadow: boolean;
/** Frustum culling enabled */
frustumCulled: boolean;
/** Rendering order override */
renderOrder: number;
/** Animation clips attached to object */
animations: AnimationClip[];
/** Custom depth material for shadow rendering */
customDepthMaterial?: Material;
/** Custom distance material for point light shadows */
customDistanceMaterial?: Material;
/** User data object */
userData: Record<string, any>;
/**
* Constructor creates a new 3D object
*/
constructor();
/**
* Apply transformation matrix to object
* @param matrix - Transformation matrix to apply
* @returns This object for chaining
*/
applyMatrix4(matrix: Matrix4): this;
/**
* Apply quaternion rotation to object
* @param quaternion - Quaternion to apply
* @returns This object for chaining
*/
applyQuaternion(quaternion: Quaternion): this;
/**
* Set rotation from axis and angle
* @param axis - Rotation axis (normalized vector)
* @param angle - Rotation angle in radians
* @returns This object for chaining
*/
setRotationFromAxisAngle(axis: Vector3, angle: number): this;
/**
* Set rotation from Euler angles
* @param euler - Euler angles
* @returns This object for chaining
*/
setRotationFromEuler(euler: Euler): this;
/**
* Set rotation from rotation matrix
* @param matrix - Matrix containing rotation
* @returns This object for chaining
*/
setRotationFromMatrix(matrix: Matrix4): this;
/**
* Set rotation from quaternion
* @param quaternion - Quaternion rotation
* @returns This object for chaining
*/
setRotationFromQuaternion(quaternion: Quaternion): this;
/**
* Rotate around arbitrary axis in local space
* @param axis - Rotation axis (normalized)
* @param angle - Rotation angle in radians
* @returns This object for chaining
*/
rotateOnAxis(axis: Vector3, angle: number): this;
/**
* Rotate around arbitrary axis in world space
* @param axis - World space rotation axis (normalized)
* @param angle - Rotation angle in radians
* @returns This object for chaining
*/
rotateOnWorldAxis(axis: Vector3, angle: number): this;
/**
* Rotate around local X axis
* @param angle - Rotation angle in radians
* @returns This object for chaining
*/
rotateX(angle: number): this;
/**
* Rotate around local Y axis
* @param angle - Rotation angle in radians
* @returns This object for chaining
*/
rotateY(angle: number): this;
/**
* Rotate around local Z axis
* @param angle - Rotation angle in radians
* @returns This object for chaining
*/
rotateZ(angle: number): this;
/**
* Translate along arbitrary axis
* @param axis - Translation direction (normalized)
* @param distance - Translation distance
* @returns This object for chaining
*/
translateOnAxis(axis: Vector3, distance: number): this;
/**
* Translate along local X axis
* @param distance - Translation distance
* @returns This object for chaining
*/
translateX(distance: number): this;
/**
* Translate along local Y axis
* @param distance - Translation distance
* @returns This object for chaining
*/
translateY(distance: number): this;
/**
* Translate along local Z axis
* @param distance - Translation distance
* @returns This object for chaining
*/
translateZ(distance: number): this;
/**
* Transform local position to world coordinates
* @param vector - Local position to transform
* @returns World position
*/
localToWorld(vector: Vector3): Vector3;
/**
* Transform world position to local coordinates
* @param vector - World position to transform
* @returns Local position
*/
worldToLocal(vector: Vector3): Vector3;
/**
* Orient object to look at target position
* @param target - Target position to look at
* @param up - Up direction (optional, defaults to object.up)
*/
lookAt(target: Vector3): void;
lookAt(x: number, y: number, z: number): void;
/**
* Add child object to hierarchy
* @param object - Child object to add
* @returns This object for chaining
*/
add(...objects: Object3D[]): this;
/**
* Remove child object from hierarchy
* @param object - Child object to remove
* @returns This object for chaining
*/
remove(...objects: Object3D[]): this;
/**
* Remove this object from its parent
* @returns This object for chaining
*/
removeFromParent(): this;
/**
* Remove all child objects
* @returns This object for chaining
*/
clear(): this;
/**
* Attach object to new parent maintaining world transform
* @param object - Object to attach
* @returns This object for chaining
*/
attach(object: Object3D): this;
/**
* Find child object by ID
* @param id - Object ID to search for
* @returns Found object or undefined
*/
getObjectById(id: number): Object3D | undefined;
/**
* Find child object by name
* @param name - Object name to search for
* @returns Found object or undefined
*/
getObjectByName(name: string): Object3D | undefined;
/**
* Find child object by property value
* @param name - Property name
* @param value - Property value to match
* @returns Found object or undefined
*/
getObjectByProperty(name: string, value: any): Object3D | undefined;
/**
* Find all child objects by property value
* @param name - Property name
* @param value - Property value to match
* @returns Array of matching objects
*/
getObjectsByProperty(name: string, value: any): Object3D[];
/**
* Get world position
* @param target - Target vector to store result
* @returns World position
*/
getWorldPosition(target: Vector3): Vector3;
/**
* Get world quaternion
* @param target - Target quaternion to store result
* @returns World quaternion
*/
getWorldQuaternion(target: Quaternion): Quaternion;
/**
* Get world scale
* @param target - Target vector to store result
* @returns World scale
*/
getWorldScale(target: Vector3): Vector3;
/**
* Get world direction
* @param target - Target vector to store result
* @returns World direction
*/
getWorldDirection(target: Vector3): Vector3;
/**
* Execute callback for this object and all descendants
* @param callback - Function to execute
*/
traverse(callback: (object: Object3D) => void): void;
/**
* Execute callback for all visible descendants
* @param callback - Function to execute
*/
traverseVisible(callback: (object: Object3D) => void): void;
/**
* Execute callback for all ancestors
* @param callback - Function to execute
*/
traverseAncestors(callback: (object: Object3D) => void): void;
/**
* Update local matrix from position/rotation/scale
*/
updateMatrix(): void;
/**
* Update world matrix and children
* @param updateParents - Update parent matrices first
* @param updateChildren - Update child matrices
*/
updateMatrixWorld(updateParents?: boolean): void;
/**
* Update world matrix
* @param updateParents - Update parent matrices first
* @param updateChildren - Update child matrices
*/
updateWorldMatrix(updateParents: boolean, updateChildren: boolean): void;
/**
* Serialize object to JSON
* @param meta - Metadata for serialization
* @returns JSON representation
*/
toJSON(meta?: any): any;
/**
* Clone object
* @param recursive - Clone children recursively
* @returns Cloned object
*/
clone(recursive?: boolean): this;
/**
* Copy properties from another object
* @param source - Source object to copy from
* @param recursive - Copy children recursively
* @returns This object for chaining
*/
copy(source: Object3D, recursive?: boolean): this;
/**
* Called before shadow rendering
* Override for custom shadow behavior
*/
onBeforeShadow(
renderer: any,
object: Object3D,
camera: any,
shadowCamera: any,
geometry: any,
depthMaterial: any,
group: any
): void;
/**
* Called after shadow rendering
* Override for custom shadow behavior
*/
onAfterShadow(
renderer: any,
object: Object3D,
camera: any,
shadowCamera: any,
geometry: any,
depthMaterial: any,
group: any
): void;
/**
* Called before rendering
* Override for custom render behavior
*/
onBeforeRender(
renderer: any,
scene: any,
camera: any,
geometry: any,
material: any,
group: any
): void;
/**
* Called after rendering
* Override for custom render behavior
*/
onAfterRender(
renderer: any,
scene: any,
camera: any,
geometry: any,
material: any,
group: any
): void;
/** Default up direction for all objects */
static DEFAULT_UP: Vector3;
/** Default matrix auto update setting */
static DEFAULT_MATRIX_AUTO_UPDATE: boolean;
/** Default matrix world auto update setting */
static DEFAULT_MATRIX_WORLD_AUTO_UPDATE: boolean;
}Usage Examples:
import { Object3D, Vector3, Quaternion } from 'three';
// Create basic object
const obj = new Object3D();
obj.position.set(1, 2, 3);
obj.rotation.x = Math.PI / 4;
obj.scale.setScalar(2);
// Hierarchy management
const parent = new Object3D();
const child = new Object3D();
parent.add(child);
// Find objects
const found = parent.getObjectByName('myObject');
const byId = parent.getObjectById(123);
// Transformations
obj.translateX(5);
obj.rotateY(Math.PI / 2);
obj.lookAt(new Vector3(0, 0, 0));
// World coordinates
const worldPos = obj.getWorldPosition(new Vector3());
const localPos = obj.worldToLocal(worldPos.clone());
// Traversal
parent.traverse((child) => {
console.log(child.name, child.position);
});The root container for all 3D content, providing environment settings and rendering context.
import { Scene, Object3D, Color, Texture, Fog, FogExp2, Material } from 'three';
/**
* Scene container for 3D content with environment settings
*/
class Scene extends Object3D {
/** Type flag for scene detection */
readonly isScene: true;
/** Background color, texture, or cube map */
background: Color | Texture | null;
/** Environment map for all physical materials */
environment: Texture | null;
/** Fog effect for the scene */
fog: Fog | FogExp2 | null;
/** Background blur amount for cube map backgrounds (0-1) */
backgroundBlurriness: number;
/** Background intensity multiplier */
backgroundIntensity: number;
/** Background rotation in radians */
backgroundRotation: Euler;
/** Environment map intensity multiplier */
environmentIntensity: number;
/** Environment map rotation in radians */
environmentRotation: Euler;
/** Override material for all objects in scene */
overrideMaterial: Material | null;
/**
* Create new scene
*/
constructor();
/**
* Serialize scene to JSON
* @param meta - Metadata object
* @returns JSON representation
*/
toJSON(meta?: any): any;
/**
* Copy properties from another scene
* @param source - Source scene
* @param recursive - Copy children recursively
* @returns This scene for chaining
*/
copy(source: Scene, recursive?: boolean): this;
}Usage Examples:
import { Scene, Color, CubeTextureLoader, Fog } from 'three';
// Create scene with background
const scene = new Scene();
scene.background = new Color(0x87CEEB); // Sky blue
// Environment mapping
const loader = new CubeTextureLoader();
scene.environment = loader.load([
'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'
]);
// Add fog
scene.fog = new Fog(0xcccccc, 10, 15);
// Background controls
scene.backgroundIntensity = 0.8;
scene.backgroundRotation.y = Math.PI / 4;Empty object for logical grouping and batch transformations of child objects.
import { Group, Object3D } from 'three';
/**
* Empty object for grouping other objects with shared transformations
*/
class Group extends Object3D {
/** Type flag for group detection */
readonly isGroup: true;
/**
* Create new group
*/
constructor();
}Usage Examples:
import { Group, Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
// Create group for related objects
const buildings = new Group();
buildings.name = 'CityBuildings';
// Add multiple objects to group
for (let i = 0; i < 10; i++) {
const building = new Mesh(
new BoxGeometry(1, Math.random() * 3 + 1, 1),
new MeshBasicMaterial({ color: Math.random() * 0xffffff })
);
building.position.x = i * 2;
buildings.add(building);
}
// Transform entire group
buildings.position.y = 1;
buildings.rotation.y = Math.PI / 6;
// Add to scene
scene.add(buildings);Base event system inherited by all Object3D instances for custom event handling.
import { EventDispatcher } from 'three';
/**
* Event system base class
*/
class EventDispatcher {
/**
* Add event listener
* @param type - Event type string
* @param listener - Event handler function
*/
addEventListener(type: string, listener: (event: any) => void): void;
/**
* Check if has event listener
* @param type - Event type string
* @param listener - Event handler function
* @returns True if listener exists
*/
hasEventListener(type: string, listener: (event: any) => void): boolean;
/**
* Remove event listener
* @param type - Event type string
* @param listener - Event handler function
*/
removeEventListener(type: string, listener: (event: any) => void): void;
/**
* Dispatch event to listeners
* @param event - Event object with type property
*/
dispatchEvent(event: { type: string; [key: string]: any }): void;
}Usage Examples:
import { Object3D } from 'three';
// Custom event handling
const obj = new Object3D();
obj.addEventListener('customEvent', (event) => {
console.log('Custom event fired:', event.data);
});
// Built-in hierarchy events
obj.addEventListener('added', () => {
console.log('Object was added to parent');
});
obj.addEventListener('removed', () => {
console.log('Object was removed from parent');
});
// Dispatch custom events
obj.dispatchEvent({
type: 'customEvent',
data: { message: 'Hello World' }
});// Object3D static defaults
Object3D.DEFAULT_UP: Vector3; // (0, 1, 0)
Object3D.DEFAULT_MATRIX_AUTO_UPDATE: boolean; // true
Object3D.DEFAULT_MATRIX_WORLD_AUTO_UPDATE: boolean; // trueimport { Layers } from 'three';
/**
* Layer membership system for selective rendering
*/
class Layers {
/** Layer mask as 32-bit integer */
mask: number;
/**
* Set single active layer (0-31)
* @param layer - Layer number
*/
set(layer: number): void;
/**
* Enable specific layer
* @param layer - Layer number
*/
enable(layer: number): void;
/**
* Enable all layers
*/
enableAll(): void;
/**
* Toggle layer state
* @param layer - Layer number
*/
toggle(layer: number): void;
/**
* Disable specific layer
* @param layer - Layer number
*/
disable(layer: number): void;
/**
* Disable all layers
*/
disableAll(): void;
/**
* Test if layer is enabled
* @param layer - Layer number
* @returns True if enabled
*/
test(layer: number): boolean;
/**
* Test if any layers match between objects
* @param layers - Other layers object
* @returns True if any layers match
*/
isEnabled(layers: Layers): boolean;
}3D ray casting utility for mouse picking, collision detection, and 3D interaction. Essential for determining what objects are under the mouse cursor or intersected by rays.
import { Raycaster, Vector3, Camera, Object3D, Intersection } from 'three';
/**
* Raycaster for 3D ray casting and intersection testing
*/
class Raycaster {
/** The ray used for raycasting */
ray: Ray;
/** Near distance for intersection testing */
near: number;
/** Far distance for intersection testing */
far: number;
/** Camera used for coordinate transformations */
camera: Camera;
/** Layers to test against */
layers: Layers;
/** Line threshold for line intersection testing */
linePrecision: number;
/** Point threshold for point intersection testing */
pointPrecision: number;
/**
* Create raycaster
* @param origin - Ray origin point
* @param direction - Ray direction (normalized)
* @param near - Near clipping distance
* @param far - Far clipping distance
*/
constructor(origin?: Vector3, direction?: Vector3, near?: number, far?: number);
/**
* Set ray from camera and mouse coordinates
* @param coords - Normalized device coordinates (-1 to 1)
* @param camera - Camera for ray calculation
*/
setFromCamera(coords: Vector2, camera: Camera): void;
/**
* Set ray from origin and direction
* @param origin - Ray origin point
* @param direction - Ray direction (normalized)
*/
set(origin: Vector3, direction: Vector3): void;
/**
* Test intersection with single object
* @param object - Object to test
* @param recursive - Test child objects recursively
* @returns Array of intersections
*/
intersectObject(object: Object3D, recursive?: boolean): Intersection[];
/**
* Test intersection with array of objects
* @param objects - Objects to test
* @param recursive - Test child objects recursively
* @returns Array of intersections
*/
intersectObjects(objects: Object3D[], recursive?: boolean): Intersection[];
}
interface Intersection {
/** Distance from ray origin to intersection */
distance: number;
/** Intersection point in world coordinates */
point: Vector3;
/** Surface normal at intersection */
normal?: Vector3;
/** UV coordinates at intersection */
uv?: Vector2;
/** Face index (for geometry intersections) */
faceIndex?: number;
/** Object that was intersected */
object: Object3D;
}The scene management system forms the foundation of Three.js, providing hierarchical organization, transformation management, selective rendering capabilities through the layer system, and interaction capabilities through raycasting. All 3D objects inherit from Object3D, making them part of the scene graph with full transformation and event capabilities.
Install with Tessl CLI
npx tessl i tessl/npm-three