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 🚀
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 !
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!
Hi, thank you! Yes of course, and physics is great for this, it's a cool idea btw I'll try to make a video about it (but it shouldn't stop you to try achieving it on your own before!)
@@WawaSensei im glad you think it's a good idea too! yes i'll try (im actually working on that project) and your video shows that rapier makes it even easier. of course i'd be happy to watch your next video about that ❤️🔥
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 ❤
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)
Hey! Just a quick tip: Don't use states in element because it handles rendering to react instead of webgl. You should set a ref to mesh and change it's material color in onPointerEnter event like ref.current.material.color = new THREE.Color('pink').
I'm curious and trying to figure out how you would actually write this in code. Is there a chance you could provide an example on how you would implement it? :)
Hey, I don't have this tutorial code in mind, but having React re-render won't kill your app (unless done at high frequency with components not meant for that and maybe it's the case in this project I don't remember) R3F components are memoized it's not the same thing than dom re-renders
@@WawaSensei the problem is when you use states for 3d objects and change one of those states, react will re-mount that 3d with new states and that process is on react render side and is really slow. Instead you want to do that process on faster webgl side. If you try to animate an object in useFrame and with states it reduces your fps greatly. Even if in your tutorial it doesnt affect it much, it is not a good practice. You can check it in pitfalls section of r3f documentation.
@@ceyhunkoc6866 they don’t say to not use useState but not update them in useFrame at high frequency (I wan to avoid beginners to be misled by your comment and stop using useState in their r3f project)
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.
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 ...
Bro get error on useKeyboardControls, that is object null is not iterable (cannot read property Symbol(Symbol.iterator)) TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator)) please help me to overcome with the problem😢
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";
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.
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 🙌
@@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
It's awesome how composable these frameworks are -- used to be so much harder to set up little games like this!
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 🚀
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 !
Wow, thank you so much 🤗
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!
Let's go 🙌
Indeed, feel like Sherlock Holmes (also looking into the lib issues and source code in GitHub is gold to find info)
Very useful bro thanks. Won't be long before you get to 100k subs hopefully
Ow 😻 Thank you very much, let's hope so 🔥
excellent! quick and direct. thanks. A lot of documentation reading avoid
🫡 thank you!
Wow this is insane! Thanks for this tutorial
Glad you like it! Thanks to you 🙌
Loved this. Thank you!!
Glad you enjoyed it! 🙌 Thank you!
wow it's unbelievable we can make games like this in less than 9 minutes. next, the sky's the limit.
Hey Sensei, we want more of react three rapier. Thanks in advance
Hey 🙌
Thank you! There's already a bit more of Rapier on the channel with this project ➡️ ruclips.net/video/zwNF1-lsia8/видео.html
@@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...
Hi great video! im glad i found this
Hi, thank you!
Yes of course, and physics is great for this, it's a cool idea btw I'll try to make a video about it (but it shouldn't stop you to try achieving it on your own before!)
@@WawaSensei im glad you think it's a good idea too! yes i'll try (im actually working on that project) and your video shows that rapier makes it even easier. of course i'd be happy to watch your next video about that ❤️🔥
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 ❤
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)
Hey! Just a quick tip:
Don't use states in element because it handles rendering to react instead of webgl. You should set a ref to mesh and change it's material color in onPointerEnter event like ref.current.material.color = new THREE.Color('pink').
I'm curious and trying to figure out how you would actually write this in code. Is there a chance you could provide an example on how you would implement it? :)
Hey, I don't have this tutorial code in mind, but having React re-render won't kill your app (unless done at high frequency with components not meant for that and maybe it's the case in this project I don't remember)
R3F components are memoized it's not the same thing than dom re-renders
@@WawaSensei the problem is when you use states for 3d objects and change one of those states, react will re-mount that 3d with new states and that process is on react render side and is really slow. Instead you want to do that process on faster webgl side. If you try to animate an object in useFrame and with states it reduces your fps greatly. Even if in your tutorial it doesnt affect it much, it is not a good practice. You can check it in pitfalls section of r3f documentation.
@@ceyhunkoc6866 they don’t say to not use useState but not update them in useFrame at high frequency (I wan to avoid beginners to be misled by your comment and stop using useState in their r3f project)
Can i use it in React Native?
Great tutorial thank you. Can you explain why you defined the control map inside of useMemo?
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.
Awesome ❤, what is your next project sir
😍 I plan to do a small game with an animated character (Like one mini game from Fall Guys)
@@WawaSensei 🥰
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 ...
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
Bro get error on useKeyboardControls, that is
object null is not iterable (cannot read property Symbol(Symbol.iterator))
TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))
please help me to overcome with the problem😢
great video, Im having a problem for weeks. Does anyone know how to get the current position of a rigidbody?
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";
have any idea how we can add score feature in it ?
Hello, yes! You can use Zustand state manager to do it simply
(github.com/pmndrs/zustand) I'm covering it in tomorrow's video
@@WawaSensei thank you : )
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.
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?
bro tryed to create this game but when the focus change its key stops working
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 🙌
Hey sir how are you
Great what about you?
@@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