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

• 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

#react #threejs #javascript #web-development #programming