This is a step-by-step guide into creating 3D web applications using the WebGL/WebGPU, React, Three.js, React Three Fiber, Drei.
---
Article
https://waelyasmina.net/articles/react-three-fiber-for-beginners/
---
Support the channel
buymeacoffee.com/waelyasmina
---
Timestamps
00:00 Introduction
00:30 Setting up
01:34 Creating the App
03:53 Meshes
07:28 Transforms
08:14 Render Loop
10:08 Camera Controls
11:51 Helpers and Gizmos
13:57 Data Input with Leva
15:30 Light
19:41 Shadows
24:00 Loading Models
26:24 Textures
31:41 Raycasting (Object Picking)
32:35 Audio
---
Project repo (big thanks to David García Muñoz)
Note: check branches for the specific video code.
https://github.com/davidgarciamunozz/R3F-ThreeJS