Sometimes the best way to understand a library like React Three Fiber is to compare it to the original 3D web library, Three.js. We’re going to walk through a side-by-side, one-to-one build of a Three.js project and a React Three Fiber project at the same time. After watching this video you will understand:

- Scene creation (cameras, renderers, meshes, animation)
- R3F JSX syntax and special props
- Componentization
- Rendering tricks

The goal is for you to learn exactly how everything works under the hood so that you can be confident building your next React Three Fiber project.

Source code is available at:
https://github.com/rabbit-hole-syndro...

00:00 Why?
00:33 Agenda
00:59 Create our scene in Three.js
5:29 Understand the same scene in React Three Fiber
9:18 How JSX works
17:53 Componentizing
18:41 Animation
19:54 Refs in React Three Fiber
21:05 Disposing
21:58 Add lights
22:33 Rendering appearance
24:18 Add color
25:17 Position vectors as array triplets
28:03 Thanks for watching!