Third Person Controller (React Three Fiber Tutorial)
Ғылым және технология
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!
Пікірлер: 56
Me the first viewer plzz pin sir
@WawaSensei
16 күн бұрын
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.
@WawaSensei
15 күн бұрын
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
@WawaSensei
15 күн бұрын
△🧙 I really like this title!
Welcome back, great video! 😍😍
@WawaSensei
15 күн бұрын
🥹 thank youuuuu
so many aha moments...loved it so much
@WawaSensei
15 күн бұрын
So glad to read this, I gave my best to provide clear explanations 🙌 (promise I'll try to enhance my iPad drawing skills 🤭)
Such talent! I imagine you have some released games?
Wow bro awesome work bro bro ❤❤❤
wow, welcome back, thanks for sharing
@WawaSensei
15 күн бұрын
Thanks a lot!
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!
@WawaSensei
12 күн бұрын
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 🙏)
Its finally hereeeeee🎊🎊🎊🎊🎊 Thanks so much Wassim
@WawaSensei
15 күн бұрын
🕺happy that you like it! Thank you!
I was surprised to see you using sin and cos in the calculations. Wouldn't it be better to calculate a direction vector using quaternions, then multiply this by scalar which would be your speed? I was thinking about buying your course but this put me off a little. Do you use quaternion in your course for more advanced behaviours as this is what I've started to learn about.
there you go, I've been waiting for your new video for a long time
@WawaSensei
15 күн бұрын
My new goal is to be able to do 2 videos / month 🙌
Aaaah cool, j'ai ma vidéo pour ce weekend!!! Merci mon ami!
@WawaSensei
15 күн бұрын
Yihaaa, bon week-end à toi l'ami ! Profite bien 🙌
Yes! Thank you!! 😍😎
@WawaSensei
15 күн бұрын
Thank you more!
This guy don't stop to cook! 🔥
@WawaSensei
15 күн бұрын
🧑🍳
Add auto rotate feature for your 3d models in your code Sir
Thank you 🎉
@WawaSensei
15 күн бұрын
Thank you for the support!
Hi Wawa Sensei is there a video or a way to fix the performance of our canvas/models?
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?
@WawaSensei
12 күн бұрын
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
@WawaSensei
15 күн бұрын
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🤣
Super!
@WawaSensei
15 күн бұрын
Thank you! @everyone, check Max channel he deserves more views/subscribers! 🙌
Can you explain how the character can move on slope without y axis in movement?
@WawaSensei
12 күн бұрын
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!
@WawaSensei
15 күн бұрын
Thank you! Do you properly have a map with a rigidbody that will stop your character from falling?
@malickgm507
15 күн бұрын
@@WawaSensei yes. I am following all steps and your starter content. But don't know why its happening
@Legends_and_Sagas
10 күн бұрын
same problem some help please
What was the extension you used to view the character model in VSCode??
@WawaSensei
12 сағат бұрын
Hey, marketplace.visualstudio.com/items?itemName=degreat.3e here it is!
i change the character but this new character down please answer me i need to know why and thanx
@WawaSensei
12 сағат бұрын
Did you adjust y position?
can this became multiplayer?
@WawaSensei
5 күн бұрын
It can! Check the fall guys clone it’s using the same model, it would give you a good starting point!
wow do you complete on that ?
@WawaSensei
15 күн бұрын
thank you! What else would you need ser?
@irfansaeedkhan7242
Күн бұрын
@@WawaSensei your videos every week :p
@WawaSensei
Күн бұрын
@@irfansaeedkhan7242 the best I can do is two a month for now 😭Doing my best ser!