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:

• https://dimforge.com
• https://twitter.com/dimforge

And the physics library works for both 2D and 3D:

• 2D: https://rapier.rs/demos2d/index.html
• 3D: https://rapier.rs/demos3d/index.html

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?