Three.js Documentation

Every Three.js app starts with a Scene, a Camera, and a Renderer:

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.z = 3
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)
document.body.appendChild(renderer.domElement)

Create meshes by pairing a geometry and a material:

const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshStandardMaterial({ color: 0x9bdc6e })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

Try our demos like Rotating Cube and Materials Gallery.

Lights add shading and depth. Common types include AmbientLight, DirectionalLight, PointLight, and SpotLight:

const ambient = new THREE.AmbientLight(0xffffff, 0.2)
scene.add(ambient)
const dir = new THREE.DirectionalLight(0xffffff, 1)
dir.position.set(2, 3, 2)
scene.add(dir)

See Point Light, Directional Shadows, and Soft Shadows.

Use OrbitControls to orbit around a target with mouse or touch:

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
const controls = new OrbitControls(camera, renderer.domElement)
controls.target.set(0, 0.5, 0)
controls.update()

Render each frame with requestAnimationFrame:

function animate () {
  requestAnimationFrame(animate)
  // update objects
  renderer.render(scene, camera)
}
animate()

• Limit pixel ratio to Math.min(window.devicePixelRatio, 2).
• Reuse geometries/materials; dispose unused resources.
• Use shadows selectively; prefer PCFSoftShadowMap for quality/perf.
• For many objects, use InstancedMesh rather than separate meshes.

• Three.js Docs
• Three.js Examples
• Discover Three.js