Comprehensive Three.js 3D graphics reference

Detailed Three.js 3D graphics reference covering scene setup, cameras, geometries, materials, lights, animations, controls, loaders, math utilities, and debu...

Three.js 3D

Quick Start

js

import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
scene.add(new THREE.Mesh(
  new THREE.BoxGeometry(1,1,1),
  new THREE.MeshStandardMaterial({color: 0x44aa88})
));
scene.add(new THREE.DirectionalLight(0xffffff, 3));
scene.add(new THREE.AmbientLight(0x404040, 0.5));
camera.position.z = 5;
function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); }
animate();

Import

bash

npm install three

js

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

Key Patterns

Object3D (everything extends this)

js

obj.position.set(x,y,z); obj.rotation.set(x,y,z); obj.scale.set(x,y,z); // Euler rad
obj.quaternion.set(x,y,z,w);       // No gimbal lock
obj.lookAt(target);                // -Z → target, +Y up
parent.add(child); parent.remove(child); parent.attach(child); // Reparent w/o visual change
obj.getWorldPosition(v); obj.localToWorld(v); obj.worldToLocal(v);

Color

js

new THREE.Color(0xff0000); new THREE.Color('#ff0000'); new THREE.Color(1,0,0);
color.setHSL(hue, saturation, lightness); // 0–1

Dispose (always!)

js

geometry.dispose(); material.dispose(); texture.dispose(); renderTarget.dispose();

Reference Files

Read the relevant file based on the task — each is concise and domain-focused:

File	Topic
getting-started.md	Responsive design, multi-canvas, render-on-demand, fog, disposal
cameras.md	PerspectiveCamera, OrthographicCamera, CubeCamera, gotchas
geometries.md	All built-in primitives, BufferGeometry, merge, vertex colors
materials.md	Material selection guide, properties, transparency fixes, ShaderMaterial
lights.md	Light types, three-point lighting, environment maps, skyboxes
objects.md	Object3D API, Mesh, InstancedMesh, SkinnedMesh, LOD, scene graph
textures.md	Properties, types, color space, KTX2, memory management
loaders.md	GLTF/OBJ/FBX, Draco, KTX2, loading manager, gotchas
animation.md	AnimationMixer/Action, skeletal, morph targets, crossfading
controls.md	OrbitControls, TransformControls, HTML labels, sprites/facades
math.md	Vector/Matrix/Quat/Color/Raycaster patterns + gotchas
renderers.md	WebGL/WebGPU setup, post-processing, shadows, render targets, GPU picking
nodes.md	TSL node materials, compute shaders
helpers.md	Debug helpers, scene graph dump, GLSL debugging, lil-gui patterns