SPACEto play / pause
Lto go forward
Jto go backward
ARROW UPto increase volume
ARROW DOWNto decrease volume
Fto toggle fullscreen
Mto toggle mute
0 to 9to go to the corresponding part of the video
,to decrease playback speed
;to increase playback speed
Want to learn more?
We’ve already learned how to add physics to a Three.js project and as you might remember, it was quite tedious. We had to create the physics world separately from the Three.js world and for each object we wanted to add to the scene, we had to create a version in each one of the two worlds.
In this lesson, we are going to see how much easier this process gets when using R3F.
Also note that this lesson is quite big and might be a little bit boring because we have a lot of concepts to cover. But be reassured, in the next lesson we are going to put this knowledge into a funnier exercise.
From Cannon to Rapier 01:34
In the previous Physics lesson, we used Cannon.js to handle the physics part. Cannon is a great physics library, but the original code hasn’t been updated for many years. Fortunately, the PMNDRS team has been maintaining a fork of the code, called cannon-es and they’ve also implemented it in R3F (NPM, Github).
While cannon-es is a perfectly viable solution, there is a new challenger and its name is Rapier.
We are not going to go too much into detail concerning WebAssembly, but, in a nutshell, WebAssembly enables running languages like C/C++, C# and Rust on a webpage with almost native performance.
In other words, Rapier should be very performant and we don’t need to learn anything about WebAssembly or Rust. We can just use it.
Rapier has been developed by Dimforge:
And the physics library works for both 2D and 3D:
Rapier isn’t bound to Three.js and we can use it with any other library.
React Three Rapier 06:06
But what about Three.js and more specifically R3F?
How to use it
(if your browser detects a menace, do not worry, it is not)
- Unzip it
- Open your terminal and go to the unzip folder
npm installcommand to install dependencies
npm run devto launch the local server
(your browser should start automatically)
You can now start coding.
- The JS is located in
- The HTML is located in
- The CSS is located in
Any trouble? Go to the discord server: