3D & graphics

Three.js

The most popular WebGL library on the web. Three.js gives you a scene, a camera and lit 3D meshes — real-time graphics in the browser, no plugins.

Demo 01

A real, lit, spinning 3D mesh

Everything below is genuine WebGL rendered by Three.js. Drag to orbit the camera, change the geometry and material, and adjust the light — the scene re-renders 60 times a second.

drag to rotate · scroll to zoom

Geometry Material Light intensity Spin speed

// the three core objects of every Three.js app
const scene  = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, w/h, 0.1, 100);
const renderer = new THREE.WebGLRenderer({ antialias: true });

// a lit mesh = geometry + material
const mesh = new THREE.Mesh(
  new THREE.TorusKnotGeometry(1, 0.35, 160, 24),
  new THREE.MeshStandardMaterial({ color: 0x6d4dff, roughness: .35 })
);
scene.add(mesh);
scene.add(new THREE.DirectionalLight(0xffffff, 1.4));

Demo 02

The render loop

3D is not static — a requestAnimationFrame loop nudges the mesh and re-draws the frame. That's what makes it move and respond instantly to your dragging.

Live readout from the running loop above:

— fps 0 frames — triangles

function animate() {
  requestAnimationFrame(animate);
  mesh.rotation.y += 0.01;       // nudge
  controls.update();             // apply drag
  renderer.render(scene, camera); // draw the frame
}
animate();

Why it matters

One API, every GPU

Three.js wraps the low-level WebGL API into friendly objects — Scene, Camera, Mesh, Light, Material. It powers product configurators, data visualisations, games and the 3D you see on modern marketing sites. React Three Fiber (next page) is just Three.js expressed as React components.

Built with the real Three.js library (v0.160.0) loaded from jsDelivr via an import map. The viewport is genuine WebGL: a live Scene, PerspectiveCamera, lights and a Mesh rendered every frame, with OrbitControls for drag-to-rotate. The shared CSS shell only styles the page chrome.

↑ All 64 tools