React Three Fiber
Graphics · 4 stages · 28 units in the full series · 28 published in English
Series goal
Build Three.js scenes with React components, and manage frame values, selection state, and shared resource lifetimes separately.
Prerequisites
React effect and ref; Three.js
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 · Declarative Scenes and Frame Coordinates
- 01. Declarative Scenes — Editable example
- 02. Canvas Size and Camera — Editable example
- 03. args and Object Recreation — Editable example
- 04. group and Local Coordinates — Editable example
- 05. Materials and Lighting — Editable example
- 06. Reading Three.js Objects through ref — Editable example
- 07. useFrame and Time-based Rotation — Editable example
Stage 2 · 3D Input and UI State
- 08. useThree Scope and Selection — Editable example
- 09. Camera Control and projection Updates — Editable example
- 10. Pointer Intersections and Selection — Editable example
- 11. Event Propagation and Occlusion — Editable example
- 12. Dragging and Pointer Capture — Editable example
- 13. UI State and Frame Targets — Editable example
- 14. Frames and Events — Editable example
Stage 3 · Models, Shared Resources, and Instancing
- 15. Model Loading and Suspense — External example · preview instructions
- 16. Cloning and Sharing Cached Models — Editable example
- 17. Texture Inputs and Updates — Editable example
- 18. Shared geometry and material — Editable example
- 19. Reducing Allocations during Frames — Editable example
- 20. Drawing Repeated Objects with instancedMesh — Editable example
- 21. Instance Selection and Bounds — Editable example
Stage 4 · demand Policy and Performance Verification
- 22. demand Rendering — Editable example
- 23. demand and Ending Motion — Editable example
- 24. DPR and Shadow Cost — Editable example
- 25. Scene Switching and Resource Audits — Editable example
- 26. Alternative Controls and Errors in 3D UI — Editable example
- 27. Performance Experiments for the Integrated Scene — Editable example
- 28. Resource Sharing and Frame Policy — Editable example
Capstone project and deliverables
A 3D learning scene with selection and notes, a comparison of individual mesh objects and instancing, demand behavior verification, and a resource ownership 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.