[ 3D · GRAPHICS · WEBGL ]

Three.js from zero: the mental model

Three.js is a JavaScript library that makes the GPU approachable. Learn the four objects every 3D scene needs and how the render loop ties them together.

Watch the lecture, then read Max's deep-dive below.

▸ In this video you'll see

The mental model of a Three.js scene: scene · camera · renderer
How a mesh is really just geometry + material
Setting up your first render loop and animating the frame
Where Three.js sits on top of raw WebGL — and what that saves you
A taste of Bruno Simon’s Three.js Journey teaching style

Three.js is the most widely used 3D library on the web. It wraps WebGL — the browser's low-level GPU API — in an object-oriented scene graph so you can think in terms of meshes, lights, and cameras instead of shader boilerplate and buffer bindings. If you can write JavaScript, you can put a rotating, lit, textured object on screen today.

The four objects you always need

Nearly every Three.js program, from a spinning cube to a full game, is built from the same quartet:

Scene — the container. Everything you want rendered gets added to it.
Camera — your viewpoint. A PerspectiveCamera mimics human vision with a field-of-view and a near/far clipping range.
Renderer — the WebGLRenderer draws the scene from the camera's view onto a <canvas>.
Mesh — a visible object, made of a geometry (its shape, e.g. BoxGeometry) and a material (how its surface responds to light, e.g. MeshStandardMaterial).

The render loop

A 3D image is not drawn once — it is drawn again every frame, ideally 60 times a second. You give the browser a callback with requestAnimationFrame, mutate the scene inside it, and re-render:

function tick() {
  mesh.rotation.y += 0.01;      // change something
  renderer.render(scene, camera); // draw this frame
  requestAnimationFrame(tick);    // schedule the next
}
tick();

This loop is the heartbeat of every real-time graphics program. Animation, physics, and interaction are all just "what do I change before the next render?"

Lights, materials, and why your cube is black

The most common beginner surprise: you add a mesh with a MeshStandardMaterial and see nothing but a silhouette. That is because physically based materials need light. Add an AmbientLight for fill and a DirectionalLight for shape, and the surface comes alive. (A MeshBasicMaterial, by contrast, ignores light entirely — handy for debugging.)

Coordinate system: Three.js is Y-up and right-handed. X is right, Y is up, Z is toward you out of the screen. Units are arbitrary — pick a scale (1 unit = 1 metre is a good default, and it is what WebXR expects) and stay consistent.

Where to go next

Once the quartet clicks, the rest of Three.js is breadth: loaders (import .glb models from your 3D tool), textures (wrap images onto surfaces), OrbitControls (drag to look around), and post-processing (bloom, depth-of-field). Add them one at a time. The scene graph you already understand is the spine everything else hangs from.

Keep going

threejs.org/docs — the official manual and API reference
Official examples — hundreds of runnable, source-viewable demos

Three.js WebGL Rendering 3D