Library · scene graph

Three.js

A scene, not a pipeline. The default answer for most 3D on the web.

The reference scene

Not running on this page. Three.js is not a dependency of this site, and rendering a screenshot while implying it was live would be exactly the kind of thing this site exists not to do. The code below is real and is what you would write — the WebGL and WebGPU pages have the same scene actually running, for comparison.

What it is

Three.js gives you the vocabulary you actually think in: scenes, meshes, materials, lights, cameras. It handles the buffer juggling, the matrix chain, the render loop and a great deal of cross-device sanity, and it has by far the largest ecosystem of loaders, controls and examples of anything here.

It is the right default for most 3D on the web, and it is worth learning after the fundamentals rather than instead of them — otherwise the day something looks wrong you have no model of what it is doing on your behalf.

Reach for it when

  • You want a scene with models, materials, lights and orbit controls, this week.
  • You need glTF loading, post-processing, shadows or text — all solved and maintained.
  • You are working with others: it is the thing most people already know.

Look elsewhere when

  • You are trying to learn what the GPU does. Three.js is very good at hiding exactly that.
  • Bundle size is critical and you draw one simple thing. The full library dwarfs a hand-written effect.

The code

The same plasma, written the way Three.js wants it written.

The whole plasmaJavaScript18 lines
import * as THREE from 'three';

const renderer = new THREE.WebGLRenderer({ canvas });
const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);

const material = new THREE.ShaderMaterial({
  uniforms: { uTime: { value: 0 } },
  vertexShader,    // the same trivial pass-through
  fragmentShader,  // the same cosine palette
});

scene.add(new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material));

renderer.setAnimationLoop((now) => {
  material.uniforms.uTime.value = now / 1000;
  renderer.render(scene, camera);
});

The same GLSL as the WebGL page, with the plumbing replaced by three lines of object construction.

InstallShell1 lines
npm install three

Things that will catch you

Dispose what you create
Geometries, materials and textures hold GPU memory that garbage collection will not reclaim. Long-lived apps that build scenes dynamically leak steadily until they crash the tab.
React Three Fiber is the React binding, not a fork
If you are in React, r3f expresses the same objects as components and is generally the nicer way in. Everything you learn about Three.js still applies underneath it.
setAnimationLoop, not requestAnimationFrame
It looks like a stylistic choice and is not: only setAnimationLoop works in WebXR sessions, and switching later is a nuisance.

Where to learn it

These and 35 more on the reading path.