A hands-on, chapter-by-chapter course to learn Three.js, from fundamentals to advanced topics.
Each chapter lives in its own numbered folder and contains:
- A
README.mdexplaining the chapter's learning objectives, key concepts to research, and the expected deliverable - A
project/folder: a standalone Vite + TypeScript app where you implement and experiment with what you learned
Each chapter project is fully independent. To run one:
cd <chapter-folder>/project
pnpm install
pnpm dev| # | Chapter | Topic |
|---|---|---|
| 01 | Fundamentals | Scene, camera, renderer, Object3D hierarchy, coordinate systems, transforms |
| 02 | Geometry | Built-in shapes, BufferGeometry, custom geometry, instancing basics |
| 03 | Materials | PBR/basic/phong materials, material properties |
| 04 | Textures | Texture types, UV mapping, environment maps, texture settings |
| 05 | Lighting & Shadows | Light types, shadow maps, environment/IBL lighting |
| 06 | Loading Assets | GLTF/texture/HDR loading, async loading patterns |
| 07 | Interaction | Raycasting, OrbitControls, mouse/touch input, object selection |
| 08 | Animation | Keyframe/skeletal animation, morph targets, animation mixing |
| 09 | Shaders | GLSL, ShaderMaterial, uniforms, custom effects |
| 10 | Post-processing | EffectComposer, bloom, DOF, screen-space effects |
| 11 | Physics | Rigid bodies & colliders, syncing physics with meshes |
| 12 | Performance & Optimization | Draw calls, instancing at scale, LOD, frustum culling, profiling |
| 13 | Capstone Project | A small interactive scene combining everything learned |
Pull requests are welcome. If you add or improve a chapter, please follow the existing folder template (README.md + project/) and keep all written content (README, code comments, commit messages) in English.
