00:00/00:00
3:22
00:03:22

Shortcuts ⌨️

  • SPACE to play / pause
  • ARROW RIGHT or L to go forward
  • ARROW LEFT or J to go backward
  • ARROW UP to increase volume
  • ARROW DOWN to decrease volume
  • F to toggle fullscreen
  • M to toggle mute
  • 0 to 9 to go to the corresponding part of the video
  • SHIFT + , to decrease playback speed
  • SHIFT + . or ; to increase playback speed

⚠️ 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? 👍

96%

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!

Next lesson

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?

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!

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

If you get stuck and need help, join the members-only Discord server:

Discord