Three.js is the library most creative work on the 3D web is built on, and its reputation for being approachable is deserved — but only after the first scene clicks. Until then, the sheer number of objects you’re told to instantiate before anything appears can feel arbitrary. This crash course is a good on-ramp precisely because it doesn’t skip that part.
What to watch
Three.js Crash Course for Absolute Beginners — 3D in the Browser from DesignCourse builds a scene from an empty page: setting up the project, creating the core objects, adding geometry and material, lighting it, and running an animation loop so the thing actually moves. It stays at the level where you can follow along by typing rather than pausing to decode.
The four objects worth understanding before you start
Nearly every Three.js confusion traces back to not having internalized these:
- Scene — the container. Everything you want rendered gets added to it. Nothing exists to Three.js until it’s in the graph.
- Camera — your viewpoint. A
PerspectiveCameratakes a field of view, an aspect ratio, and near/far clipping planes; objects outside that range simply don’t draw, which is the cause of roughly half of all “my cube is invisible” moments. - Renderer — the thing that turns scene plus camera into pixels on a
<canvas>. It owns the WebGL context and the output size. - Mesh — an object you can see, and always a pairing of a geometry (the shape) with a material (how its surface responds to light).
The other classic first-timer trap: most materials need a light. A MeshStandardMaterial in an unlit scene renders as a black silhouette, and it looks exactly like a bug. Add a light, or start with MeshBasicMaterial, which ignores lighting entirely.
What you’ll be able to do afterward
Enough to be dangerous: put a lit, textured object on screen, orbit a camera around it, and drive changes every frame in an animation loop. From there the natural next steps are loading real models (glTF via GLTFLoader), adding OrbitControls so a viewer can drag to inspect, and then — for anyone coming from the generative side — writing custom shader materials, which is where Three.js stops being a 3D viewer and starts being an instrument.
Where to go next
The official Three.js manual is unusually good and worth reading in order once the first scene works; the examples page is the real reference, since almost every technique you’ll want has a minimal, readable implementation there that you can view-source. For a longer structured path, Three.js Journey is the widely recommended paid course.