Fast Physics Simulation in React Three Fiber With Cannon
You can add a physics simulation to a react-three-fiber scene with the wonderful @react-three/cannon library. Cannon makes it a breeze to add collisions, gravity, and more to any scene.
In this tutorial, we will enhance an existing React Three Fiber scene with physics by importing the library, and connecting objects to the simulation using the hooks and provider component from the library.
0:00 Intro
1:55 Importing React Three Cannon
2:20 The React Three Cannon Physics Component
3:15 Adding Objects to the Simulation with hooks
4:13 Adding a plane to physics simulation with usePlane
6:10 Using type Static to ignore gravity.
7:32 Adding a sphere to physics simulation with useSphere
9:35 Adding a cube to physics simulation with useBox
12:00 Adding Mouse interactions to an object in the simulation
Follow along with this Code Sandbox:
https://codesandbox.io/s/react-three-...
The finished project for the tutorial:
https://codesandbox.io/s/react-three-...
Watch video Fast Physics Simulation in React Three Fiber With Cannon online without registration, duration hours minute second in high quality. This video was added by user Code Workshop 27 May 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 8,679 once and liked it 178 people.