Why R3F
React Three Fiber is a React renderer for Three.js. That means the underlying scene graph is still Three.js, but you describe it with React components instead of manually creating every object and wiring every render step yourself.
Why This Matters for Learning
Section titled “Why This Matters for Learning”- You do not need to abandon Three.js knowledge to learn R3F.
- Most of the “magic” is just object creation, nesting, and updates expressed declaratively.
- When an R3F example feels confusing, translating it back into Three.js usually reveals what it is doing.
What Stays the Same
Section titled “What Stays the Same”- Cameras are still cameras.
- Meshes still combine geometry and material.
- Lights still affect materials the same way.
- Textures, models, and loaders still come from
three.
What Changes
Section titled “What Changes”<Canvas />handles renderer setup and resize work for you.- JSX nesting replaces a lot of
scene.add(...). - Many constructor arguments move into
args. - Per-frame work moves into hooks like
useFrame. - Pointer events can live directly on scene objects instead of using manual raycasting for common cases.
What This Site Optimizes For
Section titled “What This Site Optimizes For”- Exact version pinning, so examples do not drift while you are learning.
- Small examples, so each page teaches one idea.
- Direct Three.js to R3F translations before introducing higher-level helpers.
If you already know some React but very little graphics code, start treating every R3F component like a clue about which Three.js object it creates. That habit will make the rest of the docs much easier to read.