jgcarrillo / r3f-concepts

React Three Fiber repository with a dummy application

Key Concepts - React Three Fiber and Three.js

Table of contents 👇

• ✨ How to run the project
• 🔧 Libraries
• 🔥 The power of react three fiber
• 💘 Slides
• 📓 Bibliography

✨ How to run the project

1. Clone the project with git clone
2. Install dependencies with npm install
3. Run the project with npm start

🔧 Libraries

Library	Command	Documentation
React Three Fiber	npm install three @react-three/fiber	R3F Documentation
React Three Drei	npm install @react-three/drei	React Three Drei Documentation
React Three Cannon	npm i @react-three/cannon	React Three Cannon Documentation

🔥The power of react three fiber

With Three.js	With React Three Fiber

💘 Slides

Go to the slides

📓 Bibliography

Documentation

• Three.js official documentation
• React Three Fiber examples

Articles

• Building an interactive WebGL experience in Next.js
• Create a pool table with R3F
• Making a 2D game
• Death Stranding UI with R3F
• R3F multiplayer

Utilities

• Ready Player Me
• An amazing portfolio with vanilla Three.js
• Bruno Simon portfolio
• gLTF utility

Videos

• Three.js course with React Three Fiber
• Things to know about R3F
• An introduction to R3F by the creator of the library
• R3F with Paul Henschel
• R3f for games