Third Person Controller (React Three Fiber Tutorial)
ฝัง
- เผยแพร่เมื่อ 27 มิ.ย. 2024
- In this 3D Snippet, learn how to create a simple and reusable third-person controller using Three.js, React Three Fiber and Rapier physics engine
🚀 Learn React Three Fiber with my complete course ✨
lessons.wawasensei.dev/course...
Live demo 🏖️
r3f-3rd-person-controller-fin...
Starter pack 🔗
github.com/wass08/r3f-3rd-per...
Final code 🔗
github.com/wass08/r3f-3rd-per...
#threejs #webdevelopment #reactthreefiber
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
3D Models
sketchfab.com/3d-models/castl...
sketchfab.com/3d-models/de-du...
sketchfab.com/3d-models/anima...
sketchfab.com/3d-models/medie...
sketchfab.com/3d-models/city-...
Ecctrl
github.com/pmndrs/ecctrl
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
/ @wawasensei
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
/ discord
📸 Instagram :
/ wawa.sensei
🎎 Facebook :
/ wawasenseiyt
🐦Twitter :
/ wawasensei
🐦TikTok :
/ wawasensei08
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00 - Intro
00:58 - Starter pack
01:34 - Physics
03:35 - Character controller
05:48 - 3rd person follow camera
08:59 - Physics movement
12:08 - Rotations
17:03 - Animations
18:36 - Mouse control
21:49 - Touch control
22:34 - Customizable/Reusable
23:45 - Ecctrl
24:19 - Thank you! - วิทยาศาสตร์และเทคโนโลยี
Me the first viewer plzz pin sir
I'm happy if it makes you happy ser 🙌
It is 5 am in my country right now and here I am watching the Wawa tutorial haha. This is amazing. I'm so excited that I don't think I will be able to sleep again. So, lets dive into this code and learn it.
Thank you so much man. This is incredible. I'm always amazed at how good developer and teacher you are ❤. God bless you my friend.
Ow thanks again buddy! So happy to get very nice feedback from you, you're a legend!
Have a great day, wish you the best 🙌
Three. Js and R3F wizard is back
△🧙 I really like this title!
so many aha moments...loved it so much
So glad to read this, I gave my best to provide clear explanations 🙌 (promise I'll try to enhance my iPad drawing skills 🤭)
Wow bro awesome work bro bro ❤❤❤
Welcome back, great video! 😍😍
🥹 thank youuuuu
Such talent! I imagine you have some released games?
Its finally hereeeeee🎊🎊🎊🎊🎊
Thanks so much Wassim
🕺happy that you like it! Thank you!
wow, welcome back, thanks for sharing
Thanks a lot!
there you go, I've been waiting for your new video for a long time
My new goal is to be able to do 2 videos / month 🙌
Yes! Thank you!! 😍😎
Thank you more!
Inspiring tutorial, as always.
What about chunking parts of the world to optimize loading and rendering?
Also, maybe you could add a state machine to the player and handle jumping?
I hope you keep having fun with these videos!
Thanks a lot Sylvain!
Chunking parts of the world could be a very interesting topic for a full video!
Agreed about the state machine, with only 3 animations used I kept it as simple as possible but adding jump, and handling other ones would make a lot of sense!
(Oh yes, I'm having a lot of fun with this new series 🙏)
Aaaah cool, j'ai ma vidéo pour ce weekend!!! Merci mon ami!
Yihaaa, bon week-end à toi l'ami ! Profite bien 🙌
This guy don't stop to cook! 🔥
🧑🍳
Thank you 🎉
Thank you for the support!
Super!
Thank you! @everyone, check Max channel he deserves more views/subscribers! 🙌
Damn i love this series
I am curious, do you do this kind of web 3d stuff as a hobby or also for professional work? If so, i am curious what kind of real work demands these kind of skills?
Happy to read this! Thank you!
Well, I discovered Three.js ~4/5 years ago for a project, then I'd say it represented one third of the professional projects I had. Now it represents 90% of what I'm doing (I can't say for sure how's the general demand, but thanks to this channel, I'm often contacted to give a hand on 3D projects)
Can u make waterfall mountain using threejs for next video please
Thank you so much for this amazing code! So much to unpack from coastal world.
How would you do on mobile to display the "joystick" like coastal did? Right now it works perfect, it's just that it visually lacks something for the user without a joystick.
Not sure if it would be easy to combine the nipple js library or something like that with your example
Thanks a lot for the kind words! About the joystick I've found this codepen: codepen.io/user2573/pen/PoWaRoE but I'm pretty sure it could be done in pure CSS! And as you suggest it should be plug and play with nipple js as it's just a visual indicator, the logic is already handled. I didn't know that library, but I like its name and design🤣
i change the character but this new character down please answer me i need to know why and thanx
Can you explain how the character can move on slope without y axis in movement?
Hey, as we added physics, our rigidbody is subject to gravity. Because when we set the velocity, we pass the current velocity unaltered on the y axis, it's applying the one that comes naturally with the gravity. About slopes it's because we're using a capsule and not a cube
Great tutorial and awesome explanation. I have one little problem, whenever I add CapsuleCollider my character falls down the first surface. I tried many combinations of args but still falling down!
Thank you! Do you properly have a map with a rigidbody that will stop your character from falling?
@@WawaSensei yes. I am following all steps and your starter content. But don't know why its happening
same problem some help please
can this became multiplayer?
wow do you complete on that ?
thank you! What else would you need ser?