Three.js / Learn
Four stages, in the order that actually works: the fundamentals, then React if you need it, then shaders, then the performance work that decides whether any of it ships.
Most people learn Three.js in the wrong order: they reach for shaders before they can light a scene, or for React Three Fiber before they have seen what it builds underneath. Both make everything afterwards harder.
These four stages are the order that works. Each one is worth stopping at long enough to ship something small before moving on.
A scene, a camera, a renderer and a loop. Nothing you build later makes sense until these four are second nature, and they take an afternoon rather than a month.
If the project is already React, this is where the 3D stops being a separate world. The same Three.js objects, expressed as components, with your app state driving them.
Where the distinctive work happens. Custom materials and post-processing, written as TSL node graphs that compile for both WebGPU and WebGL rather than as GLSL strings.
The stage most tutorials skip and most projects fail on. Texture weight, draw calls and memory decide whether the scene survives a mid-range phone.
Sponsorship
Three.js Resources is independent and free to use. Take a sponsored slot to help keep it growing, and put your product in front of 200,000+ monthly visitors building 3D on the web.
Get a Sponsor Slot →The guides cover single techniques, the courses cover a subject end to end, and the directory has the libraries that save you writing it yourself. All three are worth dipping into rather than working through in order.
One technique per guide, with code you can lift: grass, water, lighting, physics, loaders.
Structured, interactive courses with live code you edit in the browser and watch recompile.
The libraries, loaders and helpers worth knowing before you write something yourself.
F.A.Q
What people ask before they start.
Where to begin, and what you need first.
No. Three.js exists so you do not have to write raw WebGL. You need working JavaScript and a rough sense of how a browser page is built. Understanding what a GPU does helps once you reach shaders, but it is not a prerequisite for your first scene.
A first lit, animated scene is an afternoon. Being useful on a real project is closer to a few weeks, and most of that time goes on the parts that are not the renderer: asset pipelines, performance and browser differences.
Which stage matters for your project.
Vanilla first, even if you intend to use R3F. R3F creates the same Three.js objects underneath, so the concepts transfer directly, and debugging is much harder when you have never seen what the abstraction produces.
Not at first. Built-in materials carry a long way, and plenty of production work never writes a custom shader. Shaders are how you get an effect nobody else has, so they are worth learning after you can ship without them.
Ready for structured learning?
The interactive courses take you from a first scene to shaders and game loops, with editable code throughout.