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-...
Смотрите видео Fast Physics Simulation in React Three Fiber With Cannon онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Code Workshop 27 Май 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 8,679 раз и оно понравилось 178 людям.