Build a 3D World in React with Three.js - [React Three Fiber Tutorial]

This video starts with me talking about the diference between React and ReactDOM. React Three Fiber uses React to keep track of 3D objects that gets rendered in a webGL canvas via three.js . The result is the ability to code 3D environments the same way you are used to code a React Web Application. We can even add physics and animation to the 3D objects in the world. In this example we place a Box on a Plane inside a Skybox of stars. We then add physics to let the box fall on the plane and finally we interact with the box by attaching a click event to the box. For the physics we are using React hooks for Cannon.js.

Code for this video: https://github.com/danba340/react-three-fiber-example

Say hi on twitter: https://twitter.com/barelydaniel

0:00 React vs ReactDOM 1:13 React Three Fiber 2:18 Boilerplate 3:20 Creating a Box 4:20 Controlling the camera 5:35 Lights 6:23 SkyBox of Stars 7:00 Creating a Ground Plane 9:00 Physics with Cannon.js 11:30 Interacting via Click Event 13:00 Outro ... https://www.youtube.com/watch?v=FGG0EeMNUl0