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

  • @Islamiccafe1
    @Islamiccafe116 күн бұрын

    Me the first viewer plzz pin sir

  • @WawaSensei

    @WawaSensei

    16 күн бұрын

    I'm happy if it makes you happy ser 🙌

  • @AndersonMancini
    @AndersonMancini16 күн бұрын

    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

    @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 🙌

  • @sureshsingh9880
    @sureshsingh988016 күн бұрын

    Three. Js and R3F wizard is back

  • @WawaSensei

    @WawaSensei

    15 күн бұрын

    △🧙 I really like this title!

  • @boshen3953
    @boshen395316 күн бұрын

    Welcome back, great video! 😍😍

  • @WawaSensei

    @WawaSensei

    15 күн бұрын

    🥹 thank youuuuu

  • @souravdhar2621
    @souravdhar262115 күн бұрын

    so many aha moments...loved it so much

  • @WawaSensei

    @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 🤭)

  • @jjjjjjjjooolllllllllll8395
    @jjjjjjjjooolllllllllll839512 күн бұрын

    Such talent! I imagine you have some released games?

  • @julianvelez6563
    @julianvelez656316 күн бұрын

    Wow bro awesome work bro bro ❤❤❤

  • @HuynhLuong227
    @HuynhLuong22716 күн бұрын

    wow, welcome back, thanks for sharing

  • @WawaSensei

    @WawaSensei

    15 күн бұрын

    Thanks a lot!

  • @sylvainschellenberger
    @sylvainschellenberger15 күн бұрын

    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

    @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 🙏)

  • @khevlar_studios
    @khevlar_studios16 күн бұрын

    Its finally hereeeeee🎊🎊🎊🎊🎊 Thanks so much Wassim

  • @WawaSensei

    @WawaSensei

    15 күн бұрын

    🕺happy that you like it! Thank you!

  • @voyageruk2002
    @voyageruk20024 күн бұрын

    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.

  • @yayanartha21
    @yayanartha2115 күн бұрын

    there you go, I've been waiting for your new video for a long time

  • @WawaSensei

    @WawaSensei

    15 күн бұрын

    My new goal is to be able to do 2 videos / month 🙌

  • @slempens
    @slempens16 күн бұрын

    Aaaah cool, j'ai ma vidéo pour ce weekend!!! Merci mon ami!

  • @WawaSensei

    @WawaSensei

    15 күн бұрын

    Yihaaa, bon week-end à toi l'ami ! Profite bien 🙌

  • @PetrandoRichard
    @PetrandoRichard16 күн бұрын

    Yes! Thank you!! 😍😎

  • @WawaSensei

    @WawaSensei

    15 күн бұрын

    Thank you more!

  • @kevenrodriguesmeirelles2241
    @kevenrodriguesmeirelles224115 күн бұрын

    This guy don't stop to cook! 🔥

  • @WawaSensei

    @WawaSensei

    15 күн бұрын

    🧑‍🍳

  • @JAYDAS-o1b
    @JAYDAS-o1b5 күн бұрын

    Add auto rotate feature for your 3d models in your code Sir

  • @manilyildiz
    @manilyildiz16 күн бұрын

    Thank you 🎉

  • @WawaSensei

    @WawaSensei

    15 күн бұрын

    Thank you for the support!

  • @DarksusBlade
    @DarksusBlade5 күн бұрын

    Hi Wawa Sensei is there a video or a way to fix the performance of our canvas/models?

  • @blankblank103
    @blankblank10314 күн бұрын

    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

    @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)

  • @dhanush77732
    @dhanush7773211 күн бұрын

    Can u make waterfall mountain using threejs for next video please

  • @megabowser
    @megabowser16 күн бұрын

    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

    @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🤣

  • @MaxCodeJourney
    @MaxCodeJourney16 күн бұрын

    Super!

  • @WawaSensei

    @WawaSensei

    15 күн бұрын

    Thank you! @everyone, check Max channel he deserves more views/subscribers! 🙌

  • @redday8684
    @redday868413 күн бұрын

    Can you explain how the character can move on slope without y axis in movement?

  • @WawaSensei

    @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

  • @malickgm507
    @malickgm50716 күн бұрын

    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

    @WawaSensei

    15 күн бұрын

    Thank you! Do you properly have a map with a rigidbody that will stop your character from falling?

  • @malickgm507

    @malickgm507

    15 күн бұрын

    @@WawaSensei yes. I am following all steps and your starter content. But don't know why its happening

  • @Legends_and_Sagas

    @Legends_and_Sagas

    10 күн бұрын

    same problem some help please

  • @nitashbiswas3708
    @nitashbiswas370816 сағат бұрын

    What was the extension you used to view the character model in VSCode??

  • @WawaSensei

    @WawaSensei

    12 сағат бұрын

    Hey, marketplace.visualstudio.com/items?itemName=degreat.3e here it is!

  • @Legends_and_Sagas
    @Legends_and_Sagas10 күн бұрын

    i change the character but this new character down please answer me i need to know why and thanx

  • @WawaSensei

    @WawaSensei

    12 сағат бұрын

    Did you adjust y position?

  • @biancamontesanti856
    @biancamontesanti85611 күн бұрын

    can this became multiplayer?

  • @WawaSensei

    @WawaSensei

    5 күн бұрын

    It can! Check the fall guys clone it’s using the same model, it would give you a good starting point!

  • @irfansaeedkhan7242
    @irfansaeedkhan724215 күн бұрын

    wow do you complete on that ?

  • @WawaSensei

    @WawaSensei

    15 күн бұрын

    thank you! What else would you need ser?

  • @irfansaeedkhan7242

    @irfansaeedkhan7242

    Күн бұрын

    @@WawaSensei your videos every week :p

  • @WawaSensei

    @WawaSensei

    Күн бұрын

    @@irfansaeedkhan7242 the best I can do is two a month for now 😭Doing my best ser!

Келесі