Summary of I wish I knew this before using React Three Fiber

00:00:00 - 00:25:00

This video demonstrates the differences between a Three.js project and a React Three Fiber project, specifically highlighting how React Three Fiber makes it easier to understand the components and structure of a 3D scene. The author also explains the "triplet notation" and how it allows you to use Vector3 properties without creating new instances every time.

• 00:00:00 This video walks through a side-by-side comparison of a Three.js project and a React Three Fiber project, demonstrating how cameras, meshes, materials, animation, and lighting work.
• 00:05:00 React Three Fiber renders a scene and camera automatically for you, making it easier to understand.
• 00:10:00 In React Three Fiber, any child of an element will be added with the .add() function unless they have a special property called "attach". If they have the property called "attach", then instead of being added as a child of its parent, it will actually get added as that property of the parent. This allows you to attach geometries and materials to the geometry and material properties of a mesh, respectively.
• 00:15:00 React Three Fiber is a library for building 3D React components within the Three.js ecosystem. All primitive components in React Three Fiber are lowercase by default and arguments are passed in as an array to the constructor of the component.
• 00:20:00 In React Three Fiber, the ref on each JSX element is literally going to point to the exact instance created within Three.js. So attaching a ref on this mesh is literally going to point to the exact Three.js mesh instance. The same thing would apply if I were to add a ref to the geometry or the material - that would point to an instance of that geometry within Three.js. If you've used refs within regular old React on the DOM, it behaves the exact same way. If you add a ref to a div, you literally have a reference to the instance of that div within the DOM. Second thing to point out is if you're OCD like me, the left-hand side Three.js is probably driving you crazy right now. Why is that looking so pixelated whereas the React Three Fiber is looking really smooth? Don't worry, we're going to talk about this in just a little bit. By the way, there are other ways to animate within React Three Fiber, specifically there's a library called React Spring which integrates seamlessly with React Three Fiber. React Spring essentially allows you to create animations in a much more declarative way and is actually cross platform - works in the DOM, works on
• 00:25:00 In this video, the author explains how the "triplet notation" works in React Three Fiber, and how it allows you to use Vector3 properties without having to create new instances every time.