Build a 3D World in React with Three.js - By Daniel Bark

Описание: This video starts with me - Daniel Bark - talking about the differences 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-thr...

Follow Bark on twitter:   / 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

The content contained in this video is available under the Creative Commons Attribution-ShareAlike License v3.0 (https://creativecommons.org/licenses/...) unless otherwise stated. The work is attributeable to: Daniel Bark,    / @danielbark  .