React Three Fiber Tutorial - Rapier Physics Engine

How to use Rapier Physics Engine with React Three Fiber?
In this tutorial, we will discover how to use physics with three js. We'll cover the basics of 3D development including:
- How to setup Rapier physics engine
- What are Rigid bodies and the different types
- Physics concepts (Restitution, Gravity, Friction, Forces, Collisions...)
As we'll develop a mini-game we will also discover how to use Keyboard Controls from React Three Drei library
Get the starter pack here 🔗
github.com/wass08/r3f-vite-st...
Final Code 🔗
github.com/wass08/r3f-physics
#threejs #physics #r3f
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
My complete course to learn React Three Fiber
lessons.wawasensei.dev/
Rapier documentation
rapier.rs/docs/user_guides/ja...
React Rapier wraper documentation
github.com/pmndrs/react-three...
React Three Fiber documentation
docs.pmnd.rs/react-three-fibe...
R3F Drei
github.com/pmndrs/drei
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00 - Intro
00:25 - Rapier setup
01:23 - Rigid bodies
02:59 - Restitution & Gravity
03:44 - Custom rigid body
04:02 - Love
04:09 - Apply forces & friction
06:27 - Keyboard Controls
07:09 - Collisions
08:04 - Conclusion
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
/ discord
📸 Instagram :
/ wawa.sensei
🎎 Facebook :
/ wawasenseiyt
🐦Twitter :
/ wawasensei
🐦TikTok :
/ wawasensei08
💻 My website :
www.wawasensei.dev

[@xxbondsxx]

It's awesome how composable these frameworks are -- used to be so much harder to set up little games like this!

[@WawaSensei]

So much! Yet it's not as easy as Unity but the threejs/react-three-fiber community is working so hard and releasing a lot of things to make our life easier 🚀

[@thomascaron4267]

I usually never comment any video but this has to be the perfect short tutorial to fast-learn the basics of Rapier, understanding the RigidBody component and learning how to play with it and collision listeners is just PERFECT
Thank you !

[@WawaSensei]

Wow, thank you so much 🤗

[@Fiilipes]

Wow this is insane! Thanks for this tutorial

[@WawaSensei]

Glad you like it! Thanks to you 🙌

[@dev9887]

Very useful bro thanks. Won't be long before you get to 100k subs hopefully

[@WawaSensei]

Ow 😻 Thank you very much, let's hope so 🔥

[@JakeBerg777]

Loved this. Thank you!!

[@WawaSensei]

Glad you enjoyed it! 🙌 Thank you!

[@PA-kh2yu]

excellent! quick and direct. thanks. A lot of documentation reading avoid

[@WawaSensei]

🫡 thank you!

[@olibeatson1247]

Currently trying to hack things together and as normal rushing through documentation, so very handy to hear you very promptly mention the `type="fixed"` prop that was sorely needed on my static environmental objects! I was having performance issues probably because I have a bunch of overlapping static elements meant to provide collision. Navigating the three/fiber/rapier docs is a 3D puzzle game of its own!

[@WawaSensei]

Let's go 🙌
Indeed, feel like Sherlock Holmes (also looking into the lib issues and source code in GitHub is gold to find info)

[@deathdefier45]

Sensei could you point me in the right direction I want to understand the physics better along with the mathematics that are involved in creating these amazing 3d projects. Thank you for this wonderful channel ❤

[@WawaSensei]

Hi, I've found this article that could be a starting point in your research (www.toptal.com/game/video-game-physics-part-i-an-introduction-to-rigid-body-dynamics)
I'd recommend you to understand rigid bodies & collisions, and what is possible to do with physics engine, rather to know under the hood how to code them... (unless you're really into it)

[@heagandev]

Great tutorial thank you. Can you explain why you defined the control map inside of useMemo?

[@WawaSensei]

Thank you so much!
I didn't "think" about it, I copied it from the documentation but I think it's because if it's memoized, the reference to the array won't change accross re-renders to avoid to cause re-render of the KeyboardControls children when the App component has a re-render.

[@bone2119]

Hey Sensei, we want more of react three rapier. Thanks in advance

[@WawaSensei]

Hey 🙌
Thank you! There's already a bit more of Rapier on the channel with this project ➡️ th-cam.com/video/zwNF1-lsia8/w-d-xo.html

[@AndyNotSoSmart]

@@WawaSensei I'm doing that one next - I love Japan - I can read Katakana and minimal Hiragana and Kanji. Can't wait to get into that...

[@sergetelnov4945]

thank you for the tutorial, it's a great one!
I have a question though, is there a way to reset the position of the object?
I'm trying to solve this problem for a couple of days now ...

[@WawaSensei]

Hey, what did you try to do it and what do you want to do exactly?
Maybe joining the discord is better to get help
lessons.wawasensei.dev/discord

[@AndyNotSoSmart]

Thanks for all your up to date @react-three/fiber tutorials. Is there a way to hack/modify Vite so that it hot-reloads the whole project whenever I save instead of just the single component? Single component hot-reload is awesome - would love to hear some use cases for it though outside of threejs.

[@WawaSensei]

Thank you 🙌
I have no idea for your question about Vite, why do you want to do it? You want the same behavior as reloading your tab?

[@user-uq1pr5rk6y]

great video, Im having a problem for weeks. Does anyone know how to get the current position of a rigidbody?

[@WawaSensei]

Thank you!
Yes -> rb.current.translation()
If you need the threejs version do: vec3(rb.current.translation);
Don't forget to import it -> import { vec3 } from "@react-three/rapier";

[@Venkatesh-vm4ll]

Awesome ❤, what is your next project sir

[@WawaSensei]

😍 I plan to do a small game with an animated character (Like one mini game from Fall Guys)

[@Venkatesh-vm4ll]

@@WawaSensei 🥰

[@kiranpoojary104]

have any idea how we can add score feature in it ?

[@WawaSensei]

Hello, yes! You can use Zustand state manager to do it simply
(github.com/pmndrs/zustand) I'm covering it in tomorrow's video

[@kiranpoojary104]

@@WawaSensei thank you : )

[@awsom8237]

bro tryed to create this game but when the focus change its key stops working

[@WawaSensei]

Hey, weird... Can you try updating react-three-fiber and drei libraries? Maybe it's a library bug that has been patched?
If not you can join the Discord and we investigate it 🙌

[@almahadydiallo4460]

Hey sir how are you

[@WawaSensei]

Great what about you?

[@almahadydiallo4460]

@@WawaSensei fine thanks. I just wanted to tell you that there is a little scrolling bug in your responsive portfolio project in the ScrollManager ! Sometimes while scrolling down it goes back up