learning-react-three-fiber.

Step by step examples on how to use React-Three-Fiber (r3f).

Work in process.

Please note these are small examples I'm still builing following React-Three-Fiber's examples.
These are not the offical librarys examples.

Why?

React-three-fiber official examples are good, but they are also huge.
Instead of building one big thing, I've made smaller step by step code examples when learning React-Three-Fiber.
It helped me :)

Reminder of the Ecosystem

• 🌭 drei, useful helpers for react-three-fiber
• 💣 use-cannon, physics based hooks
• 🤳 react-xr, VR/AR controllers and events
• 📬 react-postprocessing, post-processing effects
• 🎮 gltfjsx, turns GLTFs into JSX components
• 🐻 zustand, state management
• ✌️ react-spring, a spring-physics-based animation library
• 👇 react-use-gesture, mouse/touch gestures
• 🧪 react-three-gui, GUI/debug tools

Step by step examples to learn react-three-fiber

r3f + basic cube

.
👾 basic cube → codesandbox.

r3f + basic Cannon

.
👾 basic Cannon → codesandbox.

r3f + basic useGesture

.
👾 basic useGesture → codesandbox.

r3f + basic particles

.
👾 basic particles → codesandbox

r3f + basic glb

.
👾 glb → codesandbox.

r3f + basic instancedMesh

.
👾 instancedMesh → codesandbox.

r3f + basic dom

.
👾 dom → codesandbox.

r3f + loading basic texture

.
👾 loading texture → codesandbox.

r3f + basic shaderMaterial

.
👾 shadermaterial → codesandbox.

r3f + basic postprocessing

.
👾 postprocessing → codesandbox.

r3f + custom postprocessing

.
👾 custom postprocessing → codesandbox.