Threejs

AnimationAction

Schedules the playback of an AnimationClip on an AnimationMixer. Controls when the clip plays, how it loops, fade behavior, time scaling, and crossfading with other actions.

Signature / Usage

// Do not instantiate directly — use AnimationMixer.clipAction()
const mixer = new THREE.AnimationMixer(mesh);
const action = mixer.clipAction(clip);
action.play();

Constructor

new AnimationAction(mixer, clip, localRoot, blendMode)

Properties

Methods

Playback control:

Fading and transitions:

Configuration:

State queries:

Notes

• Do not use the constructor directly; always obtain actions via AnimationMixer.clipAction().
• clampWhenFinished only takes effect if loop is set to LoopOnce.
• Methods returning AnimationAction support method chaining.

Related

• AnimationMixer
• AnimationClip

AnimationClip

A reusable set of KeyframeTrack instances representing a single animation (e.g., a walk cycle or a jump). Clips are typically created automatically by loaders such as GLTFLoader.

Signature / Usage

// Usually obtained from a loaded model
const { animations } = await loader.loadAsync('model.glb');
const walkClip = THREE.AnimationClip.findByName(animations, 'walk');
const action = mixer.clipAction(walkClip);
action.play();

Constructor

new AnimationClip(name, duration, tracks, blendMode)

Properties

Methods

Static Methods

Notes

• parseAnimation (parses animation.hierarchy format) is deprecated since r175.
• When loading from GLTF/FBX, prefer AnimationClip.findByName() over array indexing to select clips by name.

Related

• AnimationMixer
• AnimationAction
• KeyframeTrack

AnimationMixer

A player for animations on a particular scene object. For multiple independently animated objects, create one mixer per object. Must be updated each frame via mixer.update(delta).

Signature / Usage

const mixer = new THREE.AnimationMixer(mesh);
const action = mixer.clipAction(clip);
action.play();

// In render loop:
const clock = new THREE.Clock();
function animate() {
  requestAnimationFrame(animate);
  mixer.update(clock.getDelta());
  renderer.render(scene, camera);
}
animate();

Constructor

new AnimationMixer(root: Object3D)

Properties

Methods

Notes

• clipAction() is the primary way to obtain an AnimationAction; it caches internally so repeated calls with the same arguments return the same object.
• Always call stop() on related actions before using any uncache* method to avoid memory leaks.
• Use timeScale = 0 to pause all animations without losing their state.

Related

• AnimationAction
• AnimationClip
• AnimationObjectGroup

AnimationObjectGroup

A group of objects that share a single animation state. Pass an AnimationObjectGroup as the root to AnimationMixer or clipAction() to animate multiple objects together.

Signature / Usage

const group = new THREE.AnimationObjectGroup(meshA, meshB);
const mixer = new THREE.AnimationMixer(group);
const action = mixer.clipAction(clip);
action.play();

// Add/remove objects dynamically
group.add(meshC);
group.remove(meshA);

Constructor

new AnimationObjectGroup(...objects: Object3D)

Properties

Methods

Notes

• All objects in the group must have compatible animated properties (same property names and value sizes).
• A property can be controlled either through a group or directly on an object — not both at the same time.
• Cache management must be done at the group level; individual object uncaching is done via uncache().

Related

• AnimationMixer
• AnimationAction

AnimationUtils

A utility class providing static helper methods for animation operations, including keyframe manipulation, clip conversion, and typed array processing. All methods are static.

Signature / Usage

// Create a sub-segment of an animation clip
const runClip = THREE.AnimationUtils.subclip(sourceClip, 'run', 10, 30, 30);

// Convert a clip to additive blending format
const additiveClip = THREE.AnimationUtils.makeClipAdditive(clip);

Static Methods

subclip Parameters

makeClipAdditive Parameters

Notes

• subclip is useful for splitting a single long animation clip exported from a DCC tool into multiple named actions.
• makeClipAdditive is required when using AdditiveAnimationBlendMode on an AnimationAction.

Related

• AnimationClip
• AnimationAction

KeyframeTrack

A timed sequence of keyframes that animates a specific property of an object. Stores parallel arrays of times and values. This is the base class for all concrete track types.

Signature / Usage

// Animate position.x from 0 to 10 over 2 seconds
const track = new THREE.VectorKeyframeTrack(
  'mesh.position',
  [0, 1, 2],
  [0, 0, 0, 5, 0, 0, 10, 0, 0]
);
const clip = new THREE.AnimationClip('move', 2, [track]);

Constructor

new KeyframeTrack(name, times, values, interpolation)

Properties

Methods

Static Methods

Notes

• trim() does not shift remaining keys to time 0; this would alter interpolated values.
• For Bezier interpolation, set settings.inTangents and settings.outTangents on the track before creating the interpolant.
• Use concrete subclasses (VectorKeyframeTrack, QuaternionKeyframeTrack, etc.) rather than this base class directly.

Related

• AnimationClip
• tracks/VectorKeyframeTrack
• tracks/QuaternionKeyframeTrack
• tracks/NumberKeyframeTrack
• tracks/ColorKeyframeTrack
• tracks/BooleanKeyframeTrack
• tracks/StringKeyframeTrack

PropertyBinding

Holds a reference to an animated property in the scene graph and provides getter/setter pairs for reading and writing it. Used internally by the animation system; rarely instantiated directly.

Constructor

new PropertyBinding(rootNode, path, parsedPath)

Properties

Methods

Static Methods

Notes

• Track name formats supported by parseTrackName:
• nodeName.property
• nodeName.property[index]
• nodeName.subObject.property[index]
• uuid.property[index]
• parentName/nodeName.property
• .bone[Armature.DEF_cog].position

Related

• PropertyMixer
• KeyframeTrack

PropertyMixer

A buffered scene-graph property manager that supports weighted accumulation of values from multiple animation sources. Used internally by the animation system for blending; rarely instantiated directly.

Constructor

new PropertyMixer(binding, typeName, valueSize)

Properties

Methods

Notes

• This class is part of the internal animation blending pipeline and is managed automatically by AnimationMixer.
• referenceCount and useCount are used to determine when a PropertyMixer can be safely removed from the cache.

Related

• PropertyBinding
• AnimationMixer

Animation

Three.js animation system classes for playing, blending, and managing keyframe animations.

BooleanKeyframeTrack

A KeyframeTrack for boolean values. Uses discrete interpolation only; no interpolation parameter is accepted.

Constructor

new BooleanKeyframeTrack(name, times, values)

Properties

Notes

• Does not accept an interpolation parameter — boolean values are always discrete.
• Inherits all methods from KeyframeTrack.

Related

• KeyframeTrack

ColorKeyframeTrack

A KeyframeTrack for RGB color values. Values are stored as flat arrays of R, G, B components (each in range [0, 1]) interleaved per keyframe.

Signature / Usage

const track = new THREE.ColorKeyframeTrack(
  'material.color',
  [0, 1, 2],                       // times
  [1, 0, 0,  0, 1, 0,  0, 0, 1],  // red → green → blue
  THREE.InterpolateLinear
);

Constructor

new ColorKeyframeTrack(name, times, values, interpolation)

Properties

Notes

• Values array has 3 elements per keyframe (R, G, B).
• Inherits all methods from KeyframeTrack.

Related

• KeyframeTrack

NumberKeyframeTrack

A KeyframeTrack for scalar numeric values. Suitable for animating opacity, morph target influences, or any single-number property.

Signature / Usage

const track = new THREE.NumberKeyframeTrack(
  'mesh.material.opacity',
  [0, 1],   // times
  [1, 0],   // values: fade from opaque to transparent
  THREE.InterpolateLinear
);

Constructor

new NumberKeyframeTrack(name, times, values, interpolation)

Properties

Notes

• Values array has 1 element per keyframe.
• Inherits all methods from KeyframeTrack.

Related

• KeyframeTrack

QuaternionKeyframeTrack

A KeyframeTrack for quaternion rotation values. Values are stored as flat arrays of X, Y, Z, W components per keyframe. Uses QuaternionLinearInterpolant (SLERP) for linear interpolation to ensure correct spherical rotation blending.

Signature / Usage

const track = new THREE.QuaternionKeyframeTrack(
  'bone.quaternion',
  [0, 1],
  [0, 0, 0, 1,  0, 0.707, 0, 0.707]  // identity → 90° rotation around Y
);

Constructor

new QuaternionKeyframeTrack(name, times, values, interpolation)

Properties

Methods

Notes

• Values array has 4 elements per keyframe (X, Y, Z, W).
• Linear interpolation uses SLERP (QuaternionLinearInterpolant) rather than standard linear interpolation to avoid gimbal lock.
• Inherits all other methods from KeyframeTrack.

Related

• KeyframeTrack

KeyframeTracks

Concrete KeyframeTrack subclasses for each value type used in Three.js animations.

StringKeyframeTrack

A KeyframeTrack for string values. Uses discrete interpolation only; no interpolation parameter is accepted.

Constructor

new StringKeyframeTrack(name, times, values)

Properties

Notes

• Does not accept an interpolation parameter — string values are always discrete.
• Inherits all methods from KeyframeTrack.

Related

• KeyframeTrack

VectorKeyframeTrack

A KeyframeTrack for vector values (e.g., Vector2, Vector3). Values are stored as flat arrays of components interleaved per keyframe.

Signature / Usage

// Animate position along a path (Vector3: 3 values per keyframe)
const track = new THREE.VectorKeyframeTrack(
  'mesh.position',
  [0, 1, 2],
  [0, 0, 0,  10, 0, 0,  10, 10, 0]
);

Constructor

new VectorKeyframeTrack(name, times, values, interpolation)

Properties

Notes

• The number of values per keyframe matches the vector dimension (2 for Vector2, 3 for Vector3).
• Inherits all methods from KeyframeTrack.

Related

• KeyframeTrack

ArrayCamera

A camera that contains an array of sub-cameras (PerspectiveCamera) for efficiently rendering a scene multiple times per frame. Primarily used for VR rendering.

Signature / Usage

const cameras = [
  new THREE.PerspectiveCamera(75, window.innerWidth / 2 / window.innerHeight, 0.1, 1000),
  new THREE.PerspectiveCamera(75, window.innerWidth / 2 / window.innerHeight, 0.1, 1000),
];
cameras[0].viewport = new THREE.Vector4(0, 0, window.innerWidth / 2, window.innerHeight);
cameras[1].viewport = new THREE.Vector4(window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight);

const arrayCamera = new THREE.ArrayCamera(cameras);

Options / Props

Notes

• Each sub-camera must have a viewport (Vector4) set to define which portion of the output it renders to.
• Inherits from PerspectiveCamera, which inherits from Camera.

Related

• Camera
• PerspectiveCamera

Camera

Abstract base class for all Three.js cameras. Not instantiated directly — extend it when building a custom camera type.

Inheritance

EventDispatcher → Object3D → Camera

Options / Props

Methods

getWorldDirection(target: Vector3): Vector3

Returns a Vector3 representing the camera's look direction in world space. Cameras look down their local negative z-axis by default.

Notes

• This class overrides Object3D.getWorldDirection() because cameras face the negative z-axis rather than positive z.
• All concrete camera classes (PerspectiveCamera, OrthographicCamera, etc.) inherit from this class.

Related

• PerspectiveCamera
• OrthographicCamera
• ArrayCamera
• CubeCamera
• StereoCamera

CubeCamera

Renders the scene from a single point into a WebGLCubeRenderTarget, producing a cube map that can be used as a real-time reflection or environment map.

Signature / Usage

const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(256, {
  generateMipmaps: true,
  minFilter: THREE.LinearMipmapLinearFilter,
});
const cubeCamera = new THREE.CubeCamera(1, 100000, cubeRenderTarget);
scene.add(cubeCamera);

// Use the cube map as an environment/reflection map
const material = new THREE.MeshLambertMaterial({
  envMap: cubeRenderTarget.texture,
});

// Each frame: hide the reflective object, update, then show again
object.visible = false;
cubeCamera.position.copy(object.position);
cubeCamera.update(renderer, scene);
object.visible = true;

Options / Props

Methods

Notes

• Inherits from Object3D, not from the Camera base class.
• Typically the reflective object should be hidden before calling update() to avoid self-reflection artifacts.

Related

• Camera
• PerspectiveCamera

OrthographicCamera

A camera using orthographic projection. Objects appear the same size regardless of distance from the camera. Useful for 2D scenes and UI elements.

Signature / Usage

const camera = new THREE.OrthographicCamera(
  width / -2, width / 2,
  height / 2, height / -2,
  1, 1000
);
scene.add(camera);

Options / Props

Methods

Notes

• Call updateProjectionMatrix() after changing any frustum property.
• Unlike PerspectiveCamera, near can be 0 for orthographic cameras.

Related

• Camera
• PerspectiveCamera

PerspectiveCamera

The most common camera for 3D scenes. Uses perspective projection to mimic human vision, where objects appear smaller as they get farther away.

Signature / Usage

const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
scene.add(camera);

Options / Props

Methods

Notes

• Call updateProjectionMatrix() after changing fov, aspect, near, or far.
• When the canvas is resized, update camera.aspect and call updateProjectionMatrix().

Related

• Camera
• OrthographicCamera
• ArrayCamera

Cameras

StereoCamera

A dual-camera setup that uses two PerspectiveCamera instances for stereoscopic rendering effects such as anaglyph 3D or parallax barrier displays.

Signature / Usage

const stereoCamera = new THREE.StereoCamera();
stereoCamera.eyeSep = 0.064;
stereoCamera.update(camera); // camera is a PerspectiveCamera

Options / Props

Methods

update(camera: PerspectiveCamera)

Updates the left and right sub-cameras based on the given PerspectiveCamera.

Notes

• Objects visible to the left eye must be added to layer 1; objects for the right eye to layer 2.
• eyeSep affects the perceived depth of the stereoscopic effect.

Related

• Camera
• PerspectiveCamera

ArcballControls

Camera control based on a virtual trackball interface. Cursor/finger positions are mapped onto a virtual sphere (gizmo), producing intuitive rotation. Supports full touch input, focus animation, FOV manipulation, and state serialization. Unlike OrbitControls, it does not require update() in the animation loop when animations are enabled.

Signature / Usage

import { ArcballControls } from 'three/addons/controls/ArcballControls.js';

const controls = new ArcballControls(camera, renderer.domElement, scene);

controls.addEventListener('change', () => {
  renderer.render(scene, camera);
});

// No manual update() needed in animation loop
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

Constructor

new ArcballControls(camera: Camera, domElement: HTMLElement, scene?: Scene)

Options / Props

Methods

Transform / State

Camera

Gizmo

Mouse Actions

// Configure a mouse action
controls.setMouseAction(
  operation: 'PAN' | 'ROTATE' | 'ZOOM' | 'FOV',
  mouse: 0 | 1 | 2 | 'WHEEL',
  key?: 'CTRL' | 'SHIFT' | null
): boolean

// Remove a mouse action
controls.unsetMouseAction(
  mouse: 0 | 1 | 2 | 'WHEEL',
  key?: 'CTRL' | 'SHIFT' | null
): boolean

Events

Notes

• Unlike OrbitControls, update() does not need to be called each frame; animations run internally
• The scene parameter is required to render the arcball gizmo
• State can be serialized to clipboard via copyState() / pasteState() (Ctrl+C/V by default)
• Camera must not be a child of another object (unless that object is the scene itself)

Related

• OrbitControls
• TrackballControls

DragControls

Addon control that makes 3D objects draggable with mouse/pointer interaction. Fires events on drag start, drag, and drag end, as well as on hover.

Signature / Usage

import { DragControls } from 'three/addons/controls/DragControls.js';

const controls = new DragControls(objects, camera, renderer.domElement);

controls.addEventListener('dragstart', (event) => {
  event.object.material.emissive.set(0xaaaaaa);
});

controls.addEventListener('dragend', (event) => {
  event.object.material.emissive.set(0x000000);
});

Constructor

new DragControls(objects: Object3D[], camera: Camera, domElement: HTMLElement)

Options / Props

Events

Notes

• DragControls and OrbitControls can conflict; disable OrbitControls during drag by listening to dragstart/dragend
• Set recursive = false to prevent child meshes from being dragged independently

Related

• TransformControls

FirstPersonControls

Alternative implementation of FlyControls providing first-person camera control with mouse-look and keyboard movement. Suitable for walk-through scenes. Requires update(delta) to be called every frame.

Signature / Usage

import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';

const clock = new THREE.Clock();
const controls = new FirstPersonControls(camera, renderer.domElement);
controls.movementSpeed = 10;
controls.lookSpeed = 0.1;

function animate() {
  const delta = clock.getDelta();
  controls.update(delta);
  renderer.render(scene, camera);
}

Constructor

new FirstPersonControls(object: Object3D, domElement: HTMLElement)

Options / Props

Methods

Notes

• update(delta) is mandatory every frame; pass clock.getDelta() for frame-rate independence
• Call handleResize() when the canvas or window is resized
• For game-style first-person movement with pointer lock, consider PointerLockControls instead

Related

• FlyControls
• PointerLockControls

FlyControls

Free-form 3D camera navigation similar to fly mode in DCC tools (e.g., Blender). Unlike OrbitControls, it has no target — the camera can move and rotate freely in all directions. Requires update(delta) each frame.

Signature / Usage

import { FlyControls } from 'three/addons/controls/FlyControls.js';

const clock = new THREE.Clock();
const controls = new FlyControls(camera, renderer.domElement);
controls.movementSpeed = 10;
controls.rollSpeed = Math.PI / 24;
controls.dragToLook = true;

function animate() {
  const delta = clock.getDelta();
  controls.update(delta);
  renderer.render(scene, camera);
}

Constructor

new FlyControls(object: Object3D, domElement: HTMLElement)

Options / Props

Events

Notes

• update(delta) must be called every frame
• No concept of a fixed target point — full 6-DOF movement
• dragToLook = true is recommended to avoid unintentional rotation

Related

• FirstPersonControls
• PointerLockControls

MapControls

Subclass of OrbitControls optimized for top-down map-style navigation. Left mouse button pans, right mouse button rotates, and screenSpacePanning is false by default so panning stays in the ground plane.

Signature / Usage

import { MapControls } from 'three/addons/controls/MapControls.js';

const controls = new MapControls(camera, renderer.domElement);
controls.enableDamping = true;

function animate() {
  controls.update();
  renderer.render(scene, camera);
}

Input Scheme:

• Pan: Left mouse / arrow keys / one-finger touch
• Zoom: Middle mouse / mousewheel / two-finger pinch
• Orbit: Right mouse / left mouse + ctrl/meta/shift / two-finger rotate

Constructor

new MapControls(object: Object3D, domElement: HTMLElement)

Inherits the same constructor parameters as OrbitControls.

Options / Props

MapControls inherits all properties from OrbitControls and overrides the following defaults:

// Default mouse bindings (swapped from OrbitControls)
controls.mouseButtons = {
  LEFT: THREE.MOUSE.PAN,
  MIDDLE: THREE.MOUSE.DOLLY,
  RIGHT: THREE.MOUSE.ROTATE
};

// Default touch bindings
controls.touches = {
  ONE: THREE.TOUCH.PAN,
  TWO: THREE.TOUCH.DOLLY_ROTATE
};

All other OrbitControls properties (enableDamping, autoRotate, minDistance, etc.) are available.

Notes

• MapControls is identical to OrbitControls except for the swapped mouse bindings and screenSpacePanning default
• Inherits all methods and events from OrbitControls
• update() must be called in the animation loop when enableDamping or autoRotate is enabled

Related

• OrbitControls

OrbitControls

Camera control that allows orbiting around a target point. Performs orbiting, dollying (zooming), and panning while maintaining the camera's up direction (+Y by default). The most commonly used camera control in Three.js.

Signature / Usage

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

function animate() {
  controls.update(); // required when enableDamping or autoRotate is true
  renderer.render(scene, camera);
}

Control Scheme:

• Orbit: Left mouse / one-finger touch
• Zoom: Middle mouse / mousewheel / two-finger pinch
• Pan: Right mouse / left mouse + ctrl/meta/shift / arrow keys / two-finger touch

Constructor

new OrbitControls(object: Object3D, domElement: HTMLElement)

Options / Props

Core

Rotation

Zoom / Dolly

Pan

Damping / Auto-rotate

Cursor / Target Constraints

Input Bindings

controls.keys = {
  LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown'
};

controls.mouseButtons = {
  LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.PAN
};

controls.touches = {
  ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN
};

Methods

Events

controls.addEventListener('change', () => renderer.render(scene, camera));

Notes

• update() must be called each frame when enableDamping or autoRotate is enabled
• Call controls.update() after any manual changes to the camera's transform
• MapControls is a subclass of OrbitControls with mouse buttons swapped for map-style navigation
• To restrict polar angle and prevent flipping through the pole, set maxPolarAngle below Math.PI

Related

• MapControls
• TrackballControls
• ArcballControls

PointerLockControls

First-person camera control based on the browser Pointer Lock API. Captures the mouse cursor for full-screen first-person navigation, ideal for 3D games. Provides movement helpers that stay parallel to the xz-plane.

Signature / Usage

import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';

const controls = new PointerLockControls(camera, document.body);
scene.add(controls.object);

// Lock pointer on click
document.addEventListener('click', () => controls.lock());

controls.addEventListener('lock', () => { menu.style.display = 'none'; });
controls.addEventListener('unlock', () => { menu.style.display = 'block'; });

// In animation loop — move with keyboard
function animate() {
  if (controls.isLocked) {
    if (moveForward) controls.moveForward(speed * delta);
    if (moveRight) controls.moveRight(speed * delta);
  }
  renderer.render(scene, camera);
}

Constructor

new PointerLockControls(camera: Camera, domElement: HTMLElement)

Options / Props

Methods

Events

Notes

• Pointer lock requires a user gesture (e.g., click) to activate; browsers block automatic locking
• moveForward and moveRight move parallel to the xz-plane, ignoring camera pitch (standard FPS behavior)
• Combine with keyboard events to implement WASD movement

Related

• FirstPersonControls
• FlyControls

Controls

TrackballControls

Camera control similar to OrbitControls, but does not maintain a constant up direction. The camera can rotate freely through the poles without flipping, providing a true trackball-like experience. Requires update() every frame.

Signature / Usage

import { TrackballControls } from 'three/addons/controls/TrackballControls.js';

const controls = new TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 1;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;

window.addEventListener('resize', () => controls.handleResize());

function animate() {
  controls.update();
  renderer.render(scene, camera);
}

Constructor

new TrackballControls(object: Object3D, domElement: HTMLElement)

Options / Props

controls.mouseButtons = {
  LEFT: THREE.MOUSE.ROTATE,
  MIDDLE: THREE.MOUSE.DOLLY,
  RIGHT: THREE.MOUSE.PAN
};

Methods

Events

Notes

• Key difference from OrbitControls: camera up vector is not preserved — allows full-sphere rotation without flipping
• update() must be called every frame (not just when damping is enabled)
• Call handleResize() whenever the window or canvas is resized to keep interactions accurate

Related

• OrbitControls
• ArcballControls

TransformControls

Addon control for translating, rotating, and scaling 3D objects directly in the viewport using an interaction model similar to DCC tools (Blender, Maya). Unlike camera controls, TransformControls transforms the attached object, not the camera.

Signature / Usage

import { TransformControls } from 'three/addons/controls/TransformControls.js';

const controls = new TransformControls(camera, renderer.domElement);
scene.add(controls.getHelper()); // add visual gizmo to scene

controls.attach(mesh); // attach object to transform

// Switch modes with keyboard
document.addEventListener('keydown', (e) => {
  if (e.key === 't') controls.setMode('translate');
  if (e.key === 'r') controls.setMode('rotate');
  if (e.key === 's') controls.setMode('scale');
});

controls.addEventListener('dragging-changed', (e) => {
  orbitControls.enabled = !e.value; // disable orbit while dragging
});

Constructor

new TransformControls(camera: Camera, domElement: HTMLElement)

Options / Props

Methods

Events

Notes

• getHelper() returns the visual gizmo object — it must be added to the scene to be visible
• The attached object must be part of the scene graph
• Disable other controls (e.g., OrbitControls) during drag by listening to dragging-changed
• Property changes emit "[propertyname]-changed" events in addition to change
• The internal raycaster is shared across all TransformControls instances

Related

• DragControls

BufferAttribute

Stores attribute data (vertex positions, face indices, normals, colors, UVs, or custom attributes) associated with a BufferGeometry for efficient GPU transmission.

Signature / Usage

const positions = new Float32Array([0, 0, 0, 1, 0, 0, 1, 1, 0]);
const attr = new THREE.BufferAttribute(positions, 3);
geometry.setAttribute('position', attr);

// Update data
positions[0] = 0.5;
attr.needsUpdate = true;

Constructor

new BufferAttribute(array: TypedArray, itemSize: number, normalized?: boolean)

Options / Props

Methods

Data access: getX/Y/Z/W(index), setX/Y/Z/W(index, value), setXY, setXYZ, setXYZW, getComponent, setComponent, set(value, offset), copyAt(i1, attr, i2), copyArray(array)

Transforms: applyMatrix3(m), applyMatrix4(m), applyNormalMatrix(m), transformDirection(m)

Update management: addUpdateRange(start, count), clearUpdateRanges(), setUsage(value)

Utilities: clone(), copy(source), onUpload(callback), dispose() (WebGPURenderer only), toJSON()

Notes

• Set needsUpdate = true after modifying array to sync with GPU.
• usage cannot be changed after initial GPU upload; create a new instance instead.
• For partial updates of large buffers, use addUpdateRange().
• Use typed convenience subclasses (Float32BufferAttribute, Uint16BufferAttribute, etc.) when creating from plain arrays — see TypedBufferAttributes.

Related

• BufferGeometry
• InterleavedBuffer
• InterleavedBufferAttribute
• TypedBufferAttributes

BufferGeometry

Represents mesh, line, or point geometry by storing vertex positions, indices, normals, colors, UVs, and custom attributes in typed-array buffers. More efficient than the legacy Geometry because data is passed directly to the GPU.

Signature / Usage

const geometry = new THREE.BufferGeometry();

const vertices = new Float32Array([
  -1, -1, 1,
   1, -1, 1,
   1,  1, 1,
]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

const mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0xff0000 }));

Constructor

new BufferGeometry()

Options / Props

Methods

Attribute management: setAttribute(name, attr), getAttribute(name), deleteAttribute(name), hasAttribute(name)

Computation: computeBoundingBox(), computeBoundingSphere(), computeVertexNormals(), computeTangents(), normalizeNormals()

Transforms: applyMatrix4(m), applyQuaternion(q), rotateX/Y/Z(angle), scale(x,y,z), translate(x,y,z), center(), lookAt(vector)

Indexing & groups: setIndex(index), getIndex(), setDrawRange(start, count), addGroup(start, count, materialIndex), clearGroups(), toNonIndexed()

Utilities: setFromPoints(points), clone(), copy(source), toJSON(), dispose()

Notes

• boundingBox and boundingSphere are null until explicitly computed.
• Each vertex in non-indexed geometry must be duplicated if shared by multiple triangles.
• Every vertex/index must belong to exactly one group when using multi-material rendering.
• Morph attribute data cannot change after first render; dispose() and recreate the geometry.
• indirect / indirectOffset are WebGPURenderer-only.
• Call dispose() when geometry is no longer needed to free GPU memory.

Related

• BufferAttribute
• InstancedBufferGeometry

Clock

Tracks elapsed and per-frame delta time for use in animation loops.

Deprecated note: The autoStart constructor parameter is deprecated since r183. Consider using Timer for new projects.

Signature / Usage

const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);
  const delta = clock.getDelta();     // seconds since last call
  const elapsed = clock.getElapsedTime(); // total seconds
  mesh.rotation.y += delta;
  renderer.render(scene, camera);
}

Constructor

new Clock(autoStart?: boolean)

Options / Props

Methods

Notes

• Each call to getDelta() updates the internal reference time, so calling it multiple times per frame yields different values. Use Timer to avoid this issue.

Related

• Timer

EventDispatcher

Provides a standard event system for custom JavaScript classes. Most Three.js classes (including Object3D) extend EventDispatcher.

Signature / Usage

class Car extends THREE.EventDispatcher {
  start() {
    this.dispatchEvent({ type: 'start', message: 'vroom!' });
  }
}

const car = new Car();
car.addEventListener('start', (event) => {
  console.log(event.message);
});
car.start();

Constructor

new EventDispatcher()

Methods

Notes

• event passed to dispatchEvent must have a type string property. Any additional properties are forwarded to listeners.
• Use extends EventDispatcher pattern; do not instantiate directly unless building a standalone event emitter.

GLBufferAttribute

A buffer attribute that wraps a raw WebGL WebGLBuffer (VBO) directly, bypassing Three.js's internal VBO management. Primarily used for GPGPU workflows where a compute pass produces a VBO consumed by the renderer.

Compatibility: WebGLRenderer only.

Signature / Usage

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.DYNAMIC_DRAW);

const attr = new THREE.GLBufferAttribute(buffer, gl.FLOAT, 3, 4, vertexCount);
geometry.setAttribute('position', attr);

Constructor

new GLBufferAttribute(buffer, type, itemSize, elementSize, count, normalized?)

Options / Props

Methods

Notes

• The renderer does not create a VBO for this attribute; it uses the one you provide.
• Use setBuffer() to swap the VBO after a GPGPU computation completes.

Related

• BufferAttribute

InstancedBufferAttribute

An instanced version of BufferAttribute. Holds per-instance data for instanced rendering; each value is used for one or more consecutive instances rather than one per vertex.

Extends: BufferAttribute

Signature / Usage

const instanceColors = new THREE.InstancedBufferAttribute(
  new Float32Array(instanceCount * 3), 3
);
// Set color for each instance
for (let i = 0; i < instanceCount; i++) {
  instanceColors.setXYZ(i, Math.random(), Math.random(), Math.random());
}
geometry.setAttribute('instanceColor', instanceColors);

Constructor

new InstancedBufferAttribute(array, itemSize, normalized?, meshPerAttribute?)

Options / Props

All other properties are inherited from BufferAttribute.

Notes

• Used with InstancedBufferGeometry or directly on a BufferGeometry for instance-level attributes.
• meshPerAttribute = 2 means each attribute value spans two consecutive instances.

Related

• BufferAttribute
• InstancedBufferGeometry
• InstancedInterleavedBuffer

InstancedBufferGeometry

An instanced version of BufferGeometry for rendering multiple copies of the same geometry. Add per-instance attributes via InstancedBufferAttribute.

Extends: BufferGeometry

Signature / Usage

const geometry = new THREE.InstancedBufferGeometry();
geometry.instanceCount = 100;

// Copy index and base attributes from a template geometry
geometry.setIndex(baseGeometry.getIndex());
geometry.setAttribute('position', baseGeometry.getAttribute('position'));

// Per-instance offset attribute
const offsets = new THREE.InstancedBufferAttribute(
  new Float32Array(100 * 3), 3
);
geometry.setAttribute('instanceOffset', offsets);

Constructor

new InstancedBufferGeometry()

Options / Props

All other properties are inherited from BufferGeometry.

Notes

• Set instanceCount to limit rendered instances below the total data count.
• Inherits all BufferGeometry methods (setAttribute, computeBoundingBox, dispose, etc.).

Related

• BufferGeometry
• InstancedBufferAttribute

InstancedInterleavedBuffer

An instanced version of InterleavedBuffer. Holds interleaved per-instance data; each value block repeats across meshPerAttribute consecutive instances.

Extends: InterleavedBuffer

Constructor

new InstancedInterleavedBuffer(array, stride, meshPerAttribute?)

Options / Props

All other properties are inherited from InterleavedBuffer.

Related

• InterleavedBuffer
• InstancedBufferAttribute

InterleavedBuffer

Stores multiple vertex attributes (position, normal, UV, color, etc.) packed into a single typed array. Reduces memory overhead and can improve GPU cache performance compared to separate buffers.

Signature / Usage

// Interleaved: position (3 floats) + uv (2 floats) per vertex = stride 5
const data = new Float32Array([
  // x,  y,  z,  u,  v
  -1, -1, 0, 0, 0,
   1, -1, 0, 1, 0,
   1,  1, 0, 1, 1,
]);

const interleavedBuffer = new THREE.InterleavedBuffer(data, 5);

geometry.setAttribute('position',
  new THREE.InterleavedBufferAttribute(interleavedBuffer, 3, 0));
geometry.setAttribute('uv',
  new THREE.InterleavedBufferAttribute(interleavedBuffer, 2, 3));

Constructor

new InterleavedBuffer(array: TypedArray, stride: number)

Options / Props

Methods

Notes

• usage cannot be changed after the buffer has been uploaded to the GPU.
• Pair with InterleavedBufferAttribute to expose individual attributes from the shared buffer.

Related

• InterleavedBufferAttribute
• InstancedInterleavedBuffer

InterleavedBufferAttribute

Exposes a slice of an InterleavedBuffer as a named vertex attribute. Multiple InterleavedBufferAttribute instances share one InterleavedBuffer via different offsets.

Signature / Usage

const buf = new THREE.InterleavedBuffer(data, 5); // stride 5
geometry.setAttribute('position',
  new THREE.InterleavedBufferAttribute(buf, 3, 0)); // 3 components at offset 0
geometry.setAttribute('uv',
  new THREE.InterleavedBufferAttribute(buf, 2, 3)); // 2 components at offset 3

Constructor

new InterleavedBufferAttribute(interleavedBuffer, itemSize, offset, normalized?)

Options / Props

Methods

Component access: getComponent(index, component), getX/Y/Z/W(index)

Component setting: setComponent(index, component, value), setX/Y/Z/W, setXY, setXYZ, setXYZW

Transforms: applyMatrix4(m), applyNormalMatrix(m), transformDirection(m) (all require itemSize = 3)

Utilities: clone(data?) — de-interleaves to a plain BufferAttribute if no data object is passed; toJSON(data?)

Related

• InterleavedBuffer
• BufferAttribute

Layers

Controls which of 32 layers (0–31) an object or camera belongs to using a bitmask. An object is visible to a camera only when they share at least one layer.

All Object3D instances expose a layers property of this type.

Signature / Usage

// Camera: see only layers 0 and 1
camera.layers.enable(1);

// Object: place on layer 1 only
mesh.layers.set(1);

// Object: visible on both layer 0 and 2
mesh.layers.enable(0);
mesh.layers.enable(2);

Constructor

new Layers()

Initializes with membership set to layer 0 only.

Options / Props

Methods

Notes

• Layers are 0-indexed; valid range is 0 to 31.
• The default state (layer 0 only) means objects and cameras are always visible to each other unless layers are explicitly changed.
• Raycaster.layers uses the same mechanism to filter which objects are tested.

Related

• Object3D
• Raycaster

Object3D

Base class for most Three.js scene objects. Provides position, rotation, scale, hierarchy management, traversal, and raycasting hooks. Extends EventDispatcher.

Signature / Usage

const obj = new THREE.Object3D();
obj.position.set(1, 2, 3);
obj.rotation.y = Math.PI / 4;
obj.scale.set(2, 2, 2);
scene.add(obj);

// Hierarchy
const child = new THREE.Object3D();
obj.add(child);

// Traverse all descendants
obj.traverse((node) => console.log(node.name));

Constructor

new Object3D()

Options / Props

Transform

Matrices

Hierarchy

Rendering

Metadata

Static Defaults

Methods

Hierarchy

add(...objects)          // Add child(ren)
remove(...objects)       // Remove child(ren)
attach(object)           // Attach while preserving world transform
removeFromParent()       // Remove self from parent
clear()                  // Remove all children

Position / Rotation / Scale

lookAt(x, y, z)                       // or lookAt(vector3)
translateX/Y/Z(distance)
translateOnAxis(axis, distance)
rotateX/Y/Z(angle)
rotateOnAxis(axis, angle)             // local axis
rotateOnWorldAxis(axis, angle)
setRotationFromEuler(euler)
setRotationFromQuaternion(q)
setRotationFromAxisAngle(axis, angle)
setRotationFromMatrix(m)
applyMatrix4(matrix)
applyQuaternion(q)

World Space

getWorldPosition(target: Vector3): Vector3
getWorldQuaternion(target: Quaternion): Quaternion
getWorldScale(target: Vector3): Vector3
getWorldDirection(target: Vector3): Vector3
localToWorld(vector: Vector3): Vector3
worldToLocal(vector: Vector3): Vector3

Matrix Updates

updateMatrix()
updateMatrixWorld(force?)
updateWorldMatrix(updateParents, updateChildren)

Search

getObjectById(id): Object3D | undefined
getObjectByName(name): Object3D | undefined
getObjectByProperty(property, value): Object3D | undefined
getObjectsByProperty(property, value, result?): Object3D[]

Traversal

traverse(callback)         // All descendants
traverseVisible(callback)  // Visible descendants only
traverseAncestors(callback)

Clone / Copy / Serialize

clone(recursive?: boolean): Object3D
copy(source, recursive?: boolean): this
toJSON(meta?): Object

Render Callbacks

onBeforeRender(renderer, scene, camera, geometry, material, group)
onAfterRender(renderer, scene, camera, geometry, material, group)
onBeforeShadow(renderer, scene, camera, shadowCamera, geometry, depthMaterial, group)
onAfterShadow(renderer, scene, camera, shadowCamera, geometry, depthMaterial, group)

Events

Notes

• rotation and quaternion are kept in sync automatically.
• Use Object3D.rotation/position/scale for real-time transforms instead of BufferGeometry.rotateX etc., which bake transforms into vertex data.
• Setting matrixAutoUpdate = false and calling updateMatrix() manually improves performance for static objects.

Related

• EventDispatcher
• Layers
• Raycaster

Raycaster

Performs raycasting to determine which 3D objects intersect a ray. Primarily used for mouse/pointer picking.

Signature / Usage

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

window.addEventListener('pointermove', (event) => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
});

// In render loop
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);
if (intersects.length > 0) {
  console.log('Hit:', intersects[0].object.name);
}

Constructor

new Raycaster(origin?, direction?, near?, far?)

Options / Props

Methods

Intersection Object

{
  distance: number,        // Distance from ray origin
  distanceToRay?: number,  // Nearest ray distance (Points only)
  point: Vector3,          // World-space intersection point
  face: Object | null,     // Intersected face
  faceIndex: number,       // Face index
  object: Object3D,        // The hit object
  uv: Vector2,             // UV at intersection
  uv1: Vector2,            // Secondary UV
  normal: Vector3,         // Interpolated normal
  instanceId?: number      // InstancedMesh instance index
}

Notes

• Results are sorted nearest-first; intersects[0] is the closest hit.
• Mesh faces must point toward the ray origin. Use Material.side = THREE.DoubleSide to hit back faces.
• Set raycaster.layers to match object layers to ignore hidden objects.
• params.Line.threshold and params.Points.threshold set hit proximity distance for non-mesh objects.

Related

• Layers
• Object3D

Core

RenderTarget

An off-screen render buffer. The renderer draws a scene into this target instead of the canvas, making the result available as a texture for post-processing or other effects.

Signature / Usage

const renderTarget = new THREE.RenderTarget(512, 512, {
  minFilter: THREE.LinearFilter,
  magFilter: THREE.LinearFilter,
});

// Render scene into target
renderer.setRenderTarget(renderTarget);
renderer.render(scene, camera);
renderer.setRenderTarget(null);

// Use the result as a texture
material.map = renderTarget.texture;

Constructor

new RenderTarget(width?, height?, options?)

Options

Options / Props

Methods

Notes

• Call dispose() when the target is no longer needed to free GPU memory.
• For cube-map targets use WebGLCubeRenderTarget; for 3D textures use RenderTarget3D.

Related

• RenderTarget3D

RenderTarget3D

A render target backed by a 3D texture (Data3DTexture). Use when rendering into a 3D volume texture.

Extends: RenderTarget

Constructor

new RenderTarget3D(width?, height?, depth?, options?)

Options / Props

All other properties are inherited from RenderTarget.

Notes

• Inherits all RenderTarget methods: setSize(), clone(), copy(), dispose().

Related

• RenderTarget

Timer

An improved alternative to Clock that separates state update from value retrieval, and supports the Page Visibility API to avoid large delta spikes when the tab is inactive.

Signature / Usage

const timer = new THREE.Timer();
timer.connect(document); // opt-in to Page Visibility API

function animate(timestamp) {
  requestAnimationFrame(animate);

  timer.update(timestamp);          // call once per frame first
  const delta = timer.getDelta();   // consistent value per frame
  const elapsed = timer.getElapsed();

  mesh.rotation.y += delta;
  renderer.render(scene, camera);
}
requestAnimationFrame(animate);

Constructor

new Timer()

Methods

Notes

• Unlike Clock.getDelta(), calling getDelta() multiple times per frame always returns the same value after a single update().
• connect(document) prevents large delta jumps when the user switches tabs.
• Pass timestamp from requestAnimationFrame to update() for the most accurate timing.

Related

• Clock

Typed BufferAttribute Subclasses

Convenience subclasses of BufferAttribute for specific numeric types. Each wraps a typed array of the corresponding kind, inheriting all BufferAttribute properties and methods.

Classes

All extend BufferAttribute.

Signature / Usage

// Float32 positions (most common)
geometry.setAttribute(
  'position',
  new THREE.Float32BufferAttribute([0, 0, 0, 1, 0, 0, 1, 1, 0], 3)
);

// Uint16 index buffer
geometry.setIndex(new THREE.Uint16BufferAttribute([0, 1, 2], 1));

// Float16 for memory-sensitive attributes
geometry.setAttribute(
  'uv',
  new THREE.Float16BufferAttribute([0, 0, 1, 0, 1, 1], 2)
);

Constructor (all variants)

new Float32BufferAttribute(array, itemSize, normalized?)
new Uint16BufferAttribute(array, itemSize, normalized?)
// ... same signature for all variants

Notes

• Float16BufferAttribute automatically converts from plain Array or Uint16Array to FP16, working around incomplete Float16Array browser support.
• Choose Uint16BufferAttribute for index buffers with fewer than 65 536 vertices; use Uint32BufferAttribute for larger meshes.
• All inherited BufferAttribute update semantics apply (needsUpdate, addUpdateRange, etc.).

Related

• BufferAttribute

Uniform

Represents a single global shader variable passed to ShaderMaterial shader programs.

Compatibility: WebGLRenderer with ShaderMaterial only.

Signature / Usage

const material = new THREE.ShaderMaterial({
  uniforms: {
    time: new THREE.Uniform(0.0),
    resolution: new THREE.Uniform(new THREE.Vector2(800, 600)),
  },
  vertexShader: `...`,
  fragmentShader: `...`,
});

// Update each frame
material.uniforms.time.value += delta;

Constructor

new Uniform(value: any)

Options / Props

Methods

Notes

• The shorthand object literal { value: ... } is also accepted by ShaderMaterial.uniforms; new Uniform(...) is equivalent but more explicit.

Related

• UniformsGroup

UniformsGroup

Manages a collection of Uniform objects and maps them to a single Uniform Buffer Object (UBO) on the GPU. Extends EventDispatcher.

Compatibility: WebGLRenderer with ShaderMaterial only.

Signature / Usage

const uniformsGroup = new THREE.UniformsGroup();
uniformsGroup.setName('PerFrame');

uniformsGroup.add(new THREE.Uniform(camera.projectionMatrix));  // projection
uniformsGroup.add(new THREE.Uniform(camera.matrixWorldInverse)); // view

// Attach to material
material.uniformsGroups = [uniformsGroup];

// Update per frame
uniformsGroup.uniforms[1].value.copy(camera.matrixWorldInverse);

Constructor

new UniformsGroup()

Options / Props

Methods

add(uniform)              // Add a Uniform
addUniform(uniform)       // Alias for add()
remove(uniform)           // Remove a Uniform
removeUniform(uniform)    // Alias for remove()
setName(name)             // Set UBO name
setUsage(value)           // Set usage hint
dispose()                 // Free GPU resources
clone()                   // Clone this group
copy(source)              // Copy from another group

Notes

• The order of uniforms in the array must exactly match the UBO binding layout in the shader.
• Call dispose() to free GPU resources when the group is no longer needed.

Related

• Uniform

BoxGeometry

A geometry for a rectangular cuboid (box/cube) shape. All faces are quads by default.

Signature / Usage

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

Options / Props

Notes

• .parameters holds the constructor arguments used to build the geometry; modifying it after instantiation does not update the geometry.
• Use BoxGeometry.fromJSON( data ) to deserialize from a JSON object.
• Inherits from BufferGeometry (EventDispatcher → BufferGeometry → BoxGeometry).

Related

• CylinderGeometry
• PlaneGeometry

CapsuleGeometry

A capsule geometry — a cylinder with hemispherical caps at each end.

Signature / Usage

const geometry = new THREE.CapsuleGeometry( 1, 1, 4, 8 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const capsule = new THREE.Mesh( geometry, material );
scene.add( capsule );

Options / Props

Notes

• .parameters holds the constructor arguments; modifying it after instantiation does not update the geometry.
• Use CapsuleGeometry.fromJSON( data ) to deserialize.
• Inherits from BufferGeometry.

Related

• CylinderGeometry
• SphereGeometry

CircleGeometry

A flat 2D circle (disk) built from triangular segments radiating from a central point. Can also represent a partial sector.

Signature / Usage

const geometry = new THREE.CircleGeometry( 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );

Options / Props

Notes

• The geometry lies in the XY plane, facing the +Z direction.
• A low segments count (e.g. 3, 4, 5, 6) produces regular polygons.
• .parameters holds the constructor arguments; modifying it after instantiation does not update the geometry.
• Use CircleGeometry.fromJSON( data ) to deserialize.

Related

• RingGeometry
• ShapeGeometry

ConeGeometry

A geometry for a cone shape. Extends CylinderGeometry with radiusTop fixed to 0.

Signature / Usage

const geometry = new THREE.ConeGeometry( 5, 20, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const cone = new THREE.Mesh( geometry, material );
scene.add( cone );

Options / Props

Notes

• Inherits from CylinderGeometry (EventDispatcher → BufferGeometry → CylinderGeometry → ConeGeometry).
• .parameters holds the constructor arguments; modifying it after instantiation does not update the geometry.
• Use ConeGeometry.fromJSON( data ) to deserialize.

Related

• CylinderGeometry

CylinderGeometry

A geometry for a cylinder (or truncated cone) with configurable top/bottom radii, height, and segmentation.

Signature / Usage

const geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

Options / Props

Notes

• Setting radiusTop to 0 produces a cone shape (see also ConeGeometry).
• .parameters holds the constructor arguments; modifying it after instantiation does not update the geometry.
• Use CylinderGeometry.fromJSON( data ) to deserialize.
• Inherits from BufferGeometry.

Related

• ConeGeometry
• CapsuleGeometry

DodecahedronGeometry

A geometry for a dodecahedron — a polyhedron with 12 pentagonal faces. Setting detail > 0 subdivides the faces to approximate a sphere.

Signature / Usage

const geometry = new THREE.DodecahedronGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const dodecahedron = new THREE.Mesh( geometry, material );
scene.add( dodecahedron );

Options / Props

Notes

• Inherits from PolyhedronGeometry (EventDispatcher → BufferGeometry → PolyhedronGeometry → DodecahedronGeometry).
• .parameters holds the constructor arguments; modifying it after instantiation does not update the geometry.
• Use DodecahedronGeometry.fromJSON( data ) to deserialize.

Related

• PolyhedronGeometry
• IcosahedronGeometry
• OctahedronGeometry
• TetrahedronGeometry

EdgesGeometry

A helper geometry that extracts and renders the edges of another geometry based on a face-normal angle threshold. Used with LineSegments to display edge outlines.

Signature / Usage

const geometry = new THREE.BoxGeometry();
const edges = new THREE.EdgesGeometry( geometry );
const line = new THREE.LineSegments( edges );
scene.add( line );

Options / Props

Notes

• An edge is included only when the angle between the normals of the two adjoining faces exceeds thresholdAngle.
• Serialization/deserialization of EdgesGeometry is not currently supported.
• Inherits from BufferGeometry.

Related

• WireframeGeometry

ExtrudeGeometry

Creates a 3D geometry by extruding a 2D Shape along a path or straight depth. Supports beveling and custom UV generation.

Signature / Usage

const shape = new THREE.Shape();
shape.moveTo( 0, 0 );
shape.lineTo( 0, 8 );
shape.lineTo( 12, 8 );
shape.lineTo( 12, 0 );
shape.lineTo( 0, 0 );

const geometry = new THREE.ExtrudeGeometry( shape, { depth: 4, bevelEnabled: false } );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

Options / Props

Notes

• .parameters holds the constructor arguments; modifying it after instantiation does not update the geometry.
• When extrudePath is set, beveling is ignored.
• Inherits from BufferGeometry.

Related

• ShapeGeometry

IcosahedronGeometry

A geometry for an icosahedron — a polyhedron with 20 equilateral triangular faces. Setting detail > 0 subdivides faces to approximate a sphere.

Signature / Usage

const geometry = new THREE.IcosahedronGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const icosahedron = new THREE.Mesh( geometry, material );
scene.add( icosahedron );

Options / Props

Notes

• Inherits from PolyhedronGeometry (EventDispatcher → BufferGeometry → PolyhedronGeometry → IcosahedronGeometry).
• .parameters holds the constructor arguments; modifying it after instantiation does not update the geometry.
• Use IcosahedronGeometry.fromJSON( data ) to deserialize.

Related

• PolyhedronGeometry
• DodecahedronGeometry
• OctahedronGeometry
• TetrahedronGeometry

LatheGeometry

Creates a geometry with axial symmetry by rotating a set of 2D points around the Y axis. Useful for vase, bowl, or spindle shapes.

Signature / Usage

const points = [];
for ( let i = 0; i < 10; i++ ) {
    points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
}
const geometry = new THREE.LatheGeometry( points );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const lathe = new THREE.Mesh( geometry, material );
scene.add( lathe );

Options / Props

Notes

• The profile is revolved around the Y axis.
• Each point's X coordinate must be greater than zero; a value of 0 collapses to the axis and may produce degenerate geometry.
• .parameters holds the constructor arguments; modifying it after instantiation does not update the geometry.
• Use LatheGeometry.fromJSON( data ) to deserialize.

Related

• TubeGeometry
• ExtrudeGeometry