npmAdvanced

three

3D graphics in the browser — WebGL-powered scenes, lights, cameras, and geometries with a beginner-friendly JavaScript API.

3dwebglgraphicsanimationcanvas

The Problem

WebGL is powerful but requires hundreds of lines of raw GLSL/JS just to render a triangle. You want to build 3D scenes — rotating objects, lighting, cameras, particle systems — without managing GPU state machines directly.

Mental Model

Think of three.js as a scene graph. You create a Scene, add Meshes (geometry + material), position a Camera, and render with WebGLRenderer. The animation loop calls renderer.render(scene, camera) on every frame. Everything is a mathematical object: Vector3, Quaternion, Matrix4.

60-second start

Render a spinning cube

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x6366f1 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

scene.add(new THREE.AmbientLight(0xffffff, 0.5));
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 5, 5);
scene.add(dirLight);

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

Use it when

3D product viewers, data visualizations in 3D, games, interactive art, generative design, architecture visualization, any WebGL experience.

Skip it when

2D graphics (use canvas API or SVG), simple CSS animations, when you need a full game engine (use Babylon.js or Unity WebGL).

Alternatives

react-three-fiberReact bindings for three.js — declarative scene graph

babylon.jsFull game engine, more batteries included

p5.jsCreative coding, 2D/simple 3D, easier for beginners

Ready to explore the full API?

See every class, function, and relationship in an interactive graph.