SPACE
to play / pauseARROW RIGHT
orL
to go forwardARROW LEFT
orJ
to go backwardARROW UP
to increase volumeARROW DOWN
to decrease volumeF
to toggle fullscreenM
to toggle mute0 to 9
to go to the corresponding part of the videoSHIFT
+,
to decrease playback speedSHIFT
+.
or;
to increase playback speed
Rapier
- Website
- Rust
- Dimforge (Website)
- Dimforge (Twitter)
- 2D examples
- 3D examples
- Getting started
- Colliders Overview
- Joints
Rapier documentation
- Documentation
- RigidBody
- Ball
- Cuboid
- RoundCuboid
- Capsule
- Cone
- Cylinder
- ConvexPolyhedron
- TriMesh
- Heightfield
React Three Rapier
- Github
- Hugo Wiledal (Github)
- Hugo Wiledal (Twitter)
- Readme
- Examples (R3F)
Cannon.js
- cannon-es
- React Three Cannon (Github)
- React Three Cannon (NPM)
Three.js documentation
General
Shortcuts ⌨️
⚠️ Update
Use version 1.4
:
npm install @react-three/rapier@1.4
Unlock content 🔓
To get access to 93 hours of video, a members-only Discord server, subtitles, lesson resources, future updates and much more join us for only $95!
Want to learn more? 🖖
That's the end of the free part 😔
To get access to 93 hours of video, a members-only Discord server and future updates, join us for only $95!
Introduction 00:00
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.
Rapier 02:31
Rapier was created in 2019. It’s written in Rust and works in JavaScript thanks to WebAssembly.
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.
The library is also “determinism”. By default, running the simulation with the same conditions will result in the same animation, even on multiple devices (https://rapier.rs/docs/user_guides/javascript/determinism).
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 🤔
- Download the Starter pack or Final project
- Unzip it
- Open your terminal and go to the unzip folder
-
Run
npm install
to install dependencies
(if your terminal warns you about vulnerabilities, ignore it) -
Run
npm run dev
to launch the local server
(project should open on your default browser 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