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:

FileTopicgetting-started.mdResponsive design, multi-canvas, render-on-demand, fog, disposalcameras.mdPerspectiveCamera, OrthographicCamera, CubeCamera, gotchasgeometries.mdAll built-in primitives, BufferGeometry, merge, vertex colorsmaterials.mdMaterial selection guide, properties, transparency fixes, ShaderMateriallights.mdLight types, three-point lighting, environment maps, skyboxesobjects.mdObject3D API, Mesh, InstancedMesh, SkinnedMesh, LOD, scene graphtextures.mdProperties, types, color space, KTX2, memory managementloaders.mdGLTF/OBJ/FBX, Draco, KTX2, loading manager, gotchasanimation.mdAnimationMixer/Action, skeletal, morph targets, crossfadingcontrols.mdOrbitControls, TransformControls, HTML labels, sprites/facadesmath.mdVector/Matrix/Quat/Color/Raycaster patterns + gotchasrenderers.mdWebGL/WebGPU setup, post-processing, shadows, render targets, GPU pickingnodes.mdTSL node materials, compute shadershelpers.mdDebug helpers, scene graph dump, GLSL debugging, lil-gui patterns