Three.js
Graphics · 4 stages · 28 units in the full series · 28 published in English
Series goal
Understand the scene graph, model loading, and GPU resource lifetimes, and build a measurable 3D inspector.
Prerequisites
A first WebGL scene, vectors and matrices
Practice approach and scope
Learning units are not calendar days. Read the explanation and tasks, check the completion criteria, then move on. Use each example as a starting point: change variables and observe the results. Built-in examples and tasks requiring a separate environment are identified separately. Opening an example does not complete a unit.
Existing unit IDs and notes are preserved. The original 01, 02, and 03 examples occupy positions 1, 14, and 28 in the expanded sequence, so the number in the address may differ from the learning order.
Only published English units are linked below. The full series has 28 units.
Learning path
Stage 1 · Scene Coordinates, Cameras, and Geometry
- 01. Scene Graphs and Cameras — Editable example
- 02. Renderer and Display Size — Editable example
- 03. Perspective and Orthographic Projection — Editable example
- 04. Rotation and Pivots — Editable example
- 05. Buffer Geometry — Editable example
- 06. Normals and Surface Orientation — Editable example
- 07. Shared Geometry and Cloning — Editable example
Stage 2 · Lighting, Materials, and Model Selection
- 08. Light Types and Placement — Editable example
- 09. Roughness and Metalness — Editable example
- 10. Textures and UVs — Editable example
- 11. Color Spaces and Output — Editable example
- 12. Shadow Maps — Editable example
- 13. Normalized Coordinates and Selection — Editable example
- 14. Materials, Loading, and Selection — Editable example
Stage 3 · Animation, Instancing, and Render Passes
- 15. Model Size and Camera Fitting — Editable example
- 16. Orbit Controls and On-Demand Rendering — Editable example
- 17. Clip Animation — Editable example
- 18. Transparency and Depth — Editable example
- 19. Instancing Basics — Editable example
- 20. Instance Selection and Updates — Editable example
- 21. Offscreen Objects and Level of Detail — Editable example
Stage 4 · Resource Lifetimes, Accessibility, and Measurement
- 22. Render Targets and Minimap — Editable example
- 23. Resource Ownership Ledger — Editable example
- 24. Asynchronous Scene Replacement — Editable example
- 25. HTML Controls and Accessibility — Editable example
- 26. Render Statistics and Profiling — Editable example
- 27. Integrating the Scene Inspector — Editable example
- 28. Rendering Resources and Measurement — Editable example
Capstone project and deliverables
A 3D inspector with model selection, camera fitting, animation, minimap, and error recovery, plus a resource and performance report
Keep the implementation, run instructions, baseline and changed conditions, failure cases, and recovery steps together. Do not report unmeasured performance or tests you have not run as results.