Video details

Build a 3D World in React with ThreeJS and React Three Fiber


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 the video: hi on twitter:​0:00​ React vs ReactDOM1:13​ React Three Fiber2:18​ Boilerplate3:20​ Creating a Box4:20​ Controlling the camera5:35​ Lights6:23​ SkyBox of Stars7:00​ Creating a Ground Plane9:00​ Physics with Cannon.js11:30​ Interacting via Click Event13:00​ Outro

Daniel Bark provided Coding Tech with the permission to republish his videos on Coding Tech YouTube channel.

Barely Coding with Daniel Bark YouTube channel:
INTERESTED IN THE STOCK MARKET? I developed a profitable stock market trend following model. Information can be found here: