- Dimforge (Website)
- Dimforge (Twitter)
- 2D examples
- 3D examples
- Getting started
- Colliders Overview
React Three Rapier
- Hugo Wiledal (Github)
- Hugo Wiledal (Twitter)
- Examples (R3F)
- React Three Cannon (Github)
- React Three Cannon (NPM)
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? 👍
That's the end of the free part 😔
To get access to 71 hours of video, a members-only Discord server and future updates, join us for only $95!
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 installto install dependencies
(if your terminal warn you about vulnerabilities, ignore it)
npm run devto launch the local server
(your browser should start automatically)
- Start coding
- The JS is located in src/script.js
- The HTML is located in src/index.html
- The CSS is located in src/style.css
If you get stuck and need help, join the members-only Discord server: