Code for this video: https://github.com/danba340/react-three-fiber-example
ALERT! Some packages have changed. 👆 See link for latest way of following tutorial
This video starts with me talking about the difference 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.
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
