Series · 14 parts

Three.js from Zero to Senior

Go from "gà mờ" to senior on Three.js: the WebGL mental model and your first scene, geometries and materials, the scene graph and cameras, lights and shadows, PBR textures and environment maps, loading glTF models and the animation system, post-processing with the EffectComposer, performance and instancing, raycasting and interaction, and a production capstone covering loading, responsiveness, framework integration, and deployment. Every part ships a live, interactive 3D demo.

01 Three.js from Zero to Senior · Part 1 — Foundations & Your First Scene

Start Three.js the right way: what WebGL really is, the three pillars (Scene, Camera, Renderer), the render loop, and your first lit, orbiting mesh — with a live scene you can drag, zoom, and inspect.
02 Three.js from Zero to Senior · Part 2 — Geometries, Materials & Meshes

The shape-and-surface toolkit: built-in geometries, the five core material types (Basic, Lambert, Phong, Standard, Physical) and when each earns its place — with a live gallery to mix geometry, material, metalness, and roughness.
03 Three.js from Zero to Senior · Part 3 — Transforms, Scene Graph & Cameras

Position, rotation, scale and the parent-child scene graph where children inherit transforms — plus Perspective vs Orthographic cameras and OrbitControls, with a live sun-earth-moon rig you can drive.
04 Three.js from Zero to Senior · Part 4 — Lights & Shadows

Make a scene look 3D: the five light types (directional, point, spot, ambient, hemisphere), when to use each, real-time shadow maps, and the performance cost seniors watch — with a live light rig you can drive.
05 Three.js from Zero to Senior · Part 5 — Textures & PBR Materials

Dress your surfaces: UV mapping, the PBR map set (albedo, normal, roughness, metalness, AO), color management done right, and environment maps that make metal reflect — with a live material you can build one map at a time.
06 Three.js from Zero to Senior · Part 6 — Loading Models & the Animation System

Bring in real assets and make them move: loading glTF with Draco, the AnimationMixer / AnimationClip / AnimationAction trio, crossfading between clips, and frame-rate-independent playback — with a live mixer you can drive.
07 Three.js from Zero to Senior · Part 7 — Post-Processing & the EffectComposer

Add cinematic polish: how the EffectComposer renders your scene to a texture and runs full-screen passes (bloom, vignette, custom shaders), why pass order and OutputPass matter, and the performance budget — with a live bloom rig.
08 Three.js from Zero to Senior · Part 8 — Performance & Instancing

Think like a profiler: why draw calls are the real budget, InstancedMesh for thousands of objects, geometry merging, frustum culling and LOD, disposing GPU memory, and reading renderer.info — with a live instanced-vs-separate benchmark.
09 Three.js from Zero to Senior · Part 9 — Raycasting & Interaction

Turn a scene into a UI: how a Raycaster picks objects under the cursor, normalized device coordinates, hover and click handling, performance tips for picking, and dragging objects — with a live hover-and-select demo.
10 Three.js from Zero to Senior · Part 10 — Capstone: Production & Deployment

Tie it all together into a shippable mini-project: loading screens, ResizeObserver responsiveness, a render-loop architecture that scales, framework integration, debug tooling, and a real deployment checklist — with a full capstone demo.
11 Three.js from Zero to Senior · Bonus Part 11 — Custom GLSL Shaders

Drop below the built-in materials: the GPU pipeline, vertex vs fragment shaders, attributes/uniforms/varyings, writing a ShaderMaterial, animating it from JS, and extending built-ins with onBeforeCompile — with a live shader playground.
12 Three.js from Zero to Senior · Bonus Part 12 — Physics with cannon-es

Make things move on their own: the render-world / physics-world split, rigid bodies and colliders, the fixed-timestep loop, syncing meshes to bodies, friction and restitution, and when to reach for Rapier — with a live physics sandbox.
13 Three.js from Zero to Senior · Bonus Part 13 — Three.js in the Real World: an Interior Decorator

Turn the series into something useful: a furniture room planner. Build furniture from primitives, click-to-place, drag-to-move, recolor materials, repaint the room, and swing day to night — the pattern behind product configurators.
14 Three.js from Zero to Senior · Bonus Part 14 — Blender → glTF → Three.js: the Import Workflow

Stop building everything from primitives. Model in Blender, export glTF/GLB, and load it with GLTFLoader. Export settings, scene-graph mapping, scale, units, PBR materials, and the pitfalls that bite — with a live model loader.