Wawa Sensei
Wawa Sensei
  • 70
  • 756 231
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/courses/react-three-fiber/
Live demo 🏖️
r3f-3rd-person-controller-final.vercel.app/
Starter pack 🔗
github.com/wass08/r3f-3rd-person-controller-starter
Final code 🔗
github.com/wass08/r3f-3rd-person-controller-final
#threejs #webdevelopment #reactthreefiber
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
3D Models
sketchfab.com/3d-models/castle-on-hills-b874cb19b42741729b950f6afbdf0dea
sketchfab.com/3d-models/de-dust-2-with-real-light-4ce74cd95c584ce9b12b5ed9dc418db5
sketchfab.com/3d-models/animal-crossing-map-9f53cb8a02134037887875e022b2eae2
sketchfab.com/3d-models/medieval-fantasy-book-06d5a80a04fc4c5ab552759e9a97d91a
sketchfab.com/3d-models/city-scene-tokyo-b25d23ff186949dca3df669c14447db5
Ecctrl
github.com/pmndrs/ecctrl
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
ua-cam.com/channels/BH-5ctALmmOrm4kczL3urQ.htmljoin
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
discord.gg/2wBhwchcWu
📸 Instagram :
wawa.sensei
🎎 Facebook :
wawasenseiyt
🐦Twitter :
wawasensei
🐦TikTok :
www.tiktok.com/@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!
Переглядів: 4 248

Відео

Coastal World Aesthetics | 3D Snippet
Переглядів 2,2 тис.Місяць тому
In this 3D Snippet, learn how to recreate the stunning Coastal World aesthetics using Three.js, React Three Fiber and Blender. 🚀 Learn React Three Fiber with my complete course ✨ lessons.wawasensei.dev/courses/react-three-fiber/ Coastal World 🏝️ coastalworld.com/ Starter pack 🔗 github.com/wass08/r3f-vite-starter Live demo 🏖️ wawa-coastal-aesthetics.vercel.app/ Final code 🔗 github.com/wass08/waw...
React Three Fiber Ultimate Guide - New Shaders Chapter
Переглядів 1,8 тис.Місяць тому
Discover the new shaders chapter from my complete course React Three Fiber: The Ultimate Guide to 3D Web Development 🚀 Link to the course ✨ lessons.wawasensei.dev/courses/react-three-fiber/ #threejs #shaders #reactthreefiber ▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬ Become a member to get access to awesome perks: ua-cam.com/channels/BH-5ctALmmOrm4kczL3urQ.htmljoin ▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬ 💻 Th...
3D Artists Create my Green Screen Video Background
Переглядів 9212 місяці тому
I asked 4 Fiverr Creators to make the perfect background for my UA-cam videos, I need your help to decide which one I should use! Fiverr go.fiverr.com/visit/?bta=928411&brand=fiverrcpa Use my promo code WAWASENSEI to get 10% off at the checkout process Katarina profile go.fiverr.com/visit/?bta=928411&brand=fiverrcpa&landingPage=https%3A%2F%2Fwww.fiverr.com%2Fkatarina1928%2Fmake-an-amazing-backg...
Make a Fall Guys Clone for Discord Activity w/ Playroom
Переглядів 4,8 тис.2 місяці тому
Let's learn how to make a Fall Guys game clone in this React Three Fiber/Three.js Tutorial. 🚀 Learn React Three Fiber with my complete course ✨ lessons.wawasensei.dev/courses/react-three-fiber/ Play Wawa Guys 🕹️ wawaguys.playroom.gg Starter code 🔗 github.com/wass08/wawa-guys-starter Final code 🔗 github.com/wass08/wawa-guys-final #threejs #gamedev #reactthreefiber ▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬...
3D Food Delivery App w/ React Native and React three Fiber
Переглядів 7 тис.3 місяці тому
Let's learn how to create a 3D Sandwich Configurator with React Native, Expo, Three.js and React three Fiber through this step-by-step video tutorial! 🚀 Learn React Three Fiber with my complete course ✨ lessons.wawasensei.dev/courses/react-three-fiber/ Final code 🔗 github.com/wass08/r3f-wawa-eats #threejs #reactnative #reactthreefiber ▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬ Sandwich ingredients model ...
Build a 3D AI Teacher w/ Next.js, ChatGPT & Azure
Переглядів 18 тис.3 місяці тому
Let's learn how to make an AI Language Teacher with Next.js, React Three Fiber, Microsoft Azure Speech SDK, Chat GPT, and custom 3D models made by Fiverr Creators. Fiverr go.fiverr.com/visit/?bta=928411&brand=fiverrcpa Use my promo code WAWASENSEI to get 10% off at the checkout process 3D Character Designers: Beeapoo go.fiverr.com/visit/?bta=928411&brand=fiverrcpa&landingPage=https://www.fiverr...
Build a Multiplayer Game Lobby with R3F & Playroom
Переглядів 4 тис.3 місяці тому
Let's learn how to make a 3D Multiplayer Car Game with JavaScript with React Three Fiber and Playroom Playroom Documentation docs.joinplayroom.com/ 🚀 Learn React Three Fiber with my complete course ✨ lessons.wawasensei.dev/courses/react-three-fiber/ Starter pack 🔗 github.com/wass08/r3f-vite-starter Final code 🔗 github.com/wass08/r3f-playroom-lobby-car-prototype Demo 🔗 r3f-playroom-lobby-car-pro...
Let's Fix Your React Three Fiber Projects
Переглядів 2,9 тис.4 місяці тому
Let's dive into the most common issues you face during my React Three Fiber Tutorial and fix them together 🚀 Learn React Three Fiber with my complete course ✨ lessons.wawasensei.dev/courses/react-three-fiber/ 3D Responsive Tutorial ua-cam.com/play/PLpepLKamtPjguLKYT7c66998iTaWvqSRe.html AI Virtual Girlfriend Chatbot Tutorial ua-cam.com/video/EzzcEL_1o9o/v-deo.html #threejs #developer #reactthre...
Build a Multiplayer Card Game w/ React Three Fiber & Playroom Stream Mode
Переглядів 6 тис.5 місяців тому
Let's learn how to make a 3D Multiplayer Card Game with JavaScript w/ React Three Fiber and Playroom Stream mode Playroom Stream Mode feature documentation docs.joinplayroom.com/multiplayer/stream 🚀 Learn React Three Fiber with my complete course ✨ lessons.wawasensei.dev/courses/react-three-fiber/ Starter pack 🔗 github.com/wass08/r3f-vite-starter Final code 🔗 github.com/wass08/r3f-multiplayer-p...
Building a 3D TikTok Live Game with React Three Fiber & Playroom
Переглядів 4,5 тис.6 місяців тому
Let's learn how to make a 3D live game for TikTok with Playroom and React Three Fiber! 🎄 Playroom TikTok live feature documentation docs.joinplayroom.com/components/tiktok 🚀 Learn React Three Fiber with my complete course ✨ lessons.wawasensei.dev/courses/react-three-fiber/ Starter pack 🔗 github.com/wass08/r3f-vite-starter Final code 🔗 github.com/wass08/r3f-tiktok-christmas Demo 🔗 (use "test" as...
Step-by-Step Guide to Mesmerizing 3D Text with React Three Fiber
Переглядів 9 тис.6 місяців тому
Let's learn how to make a shopping landing page with an amazing 3D Text effect with React Three Fiber ✨ Get started for free with Visme Forms 👉 www.visme.co/form-builder/?ref=wawasensei In this project-based tutorial, we will cover the following: - RenderTexture - ReflectorMaterial - Postprocessing - CameraControls - Responsive 🚀 Learn React Three Fiber with my complete course ✨ lessons.wawasen...
How to Create Shader Transitions with React Three Fiber and Lygia
Переглядів 2,9 тис.6 місяців тому
Let's learn how to create transitions between 3D scenes with Three.js and React Three Fiber using Shaders and Lygia library In this project-based tutorial, will learn how with the help of Render Targets and Custom Shaders, we can create amazing 3D scene transitions. Learn Render Target: lessons.wawasensei.dev/courses/react-three-fiber/lessons/render-target Learn Shaders: ua-cam.com/video/e2ntx-...
How to Create Scene Transitions with React Three Fiber
Переглядів 4,5 тис.6 місяців тому
Let's learn how to create transitions between 3D scenes with Three.js and React Three Fiber In this project-based tutorial, will learn how with the help of Render Targets and Custom Shaders, we can create amazing 3D scene transitions. Learn Render Target: lessons.wawasensei.dev/courses/react-three-fiber/lessons/render-target Learn Shaders: ua-cam.com/video/e2ntx-fyXaE/v-deo.html Part2: ua-cam.c...
React Three Fiber Black Friday 3D Escape Game
Переглядів 1,5 тис.7 місяців тому
React Three Fiber Black Friday 3D Escape Game
6 Techniques to Make Any 3D Website Responsive
Переглядів 5 тис.7 місяців тому
6 Techniques to Make Any 3D Website Responsive
React Three Fiber Tutorial: How to Apply Images to 3D Objects
Переглядів 6 тис.7 місяців тому
React Three Fiber Tutorial: How to Apply Images to 3D Objects
10 Days to Create a 3D Multiplayer Game with React
Переглядів 2,3 тис.8 місяців тому
10 Days to Create a 3D Multiplayer Game with React
Build a 3D Multiplayer Mobile Shooter Game with Playroom and React Three Fiber
Переглядів 10 тис.8 місяців тому
Build a 3D Multiplayer Mobile Shooter Game with Playroom and React Three Fiber
How to Build a 3D Chatbot with ChatGPT & ElevenLabs
Переглядів 29 тис.8 місяців тому
How to Build a 3D Chatbot with ChatGPT & ElevenLabs
React Three Fiber: The Ultimate Guide to 3D Web Development
Переглядів 5 тис.8 місяців тому
React Three Fiber: The Ultimate Guide to 3D Web Development
How to Build a 3D Slideshow with React Three Fiber
Переглядів 12 тис.9 місяців тому
How to Build a 3D Slideshow with React Three Fiber
I Built a Multiplayer Sims Game with Javascript
Переглядів 5 тис.9 місяців тому
I Built a Multiplayer Sims Game with Javascript
Three.js Multiplayer Game Tutorial Ready Player Me
Переглядів 6 тис.9 місяців тому
Three.js Multiplayer Game Tutorial Ready Player Me
Multiplayer Game Tutorial with R3F & Socket.io: Shop
Переглядів 2,5 тис.9 місяців тому
Multiplayer Game Tutorial with R3F & Socket.io: Shop
Multiplayer Game Tutorial with R3F & Socket.io: Room Builder
Переглядів 3,1 тис.10 місяців тому
Multiplayer Game Tutorial with R3F & Socket.io: Room Builder
Multiplayer Game Tutorial with R3F & Socket.io: Pathfinding
Переглядів 3,1 тис.10 місяців тому
Multiplayer Game Tutorial with R3F & Socket.io: Pathfinding
Multiplayer Game Tutorial with R3F & Socket.io: Grid System
Переглядів 4,5 тис.10 місяців тому
Multiplayer Game Tutorial with R3F & Socket.io: Grid System
Build a multiplayer game with React Three Fiber and Socket.io
Переглядів 14 тис.10 місяців тому
Build a multiplayer game with React Three Fiber and Socket.io
Mesh Explosion Effect - React Three Fiber Tutorial
Переглядів 4,8 тис.11 місяців тому
Mesh Explosion Effect - React Three Fiber Tutorial

КОМЕНТАРІ

  • @egretfx
    @egretfx День тому

    You are amazing!❤

  • @BhavinParekh-h6x
    @BhavinParekh-h6x 2 дні тому

    In Avatar.tsx you have tags for hair , head , teeth , so in latest version of gtxftsx i get only avatar tag. So can i proivde some information or documentation

  • @aniketmourya221
    @aniketmourya221 2 дні тому

    Wawasensei you're projects are always great and awesome. I have build many complex 3D applications just by watching you on youtube. 😊

  • @mgalarzav5564
    @mgalarzav5564 3 дні тому

    Amazing ... thanks for your explains Bro.

  • @voloUA
    @voloUA 3 дні тому

    Hi, in my case avatar is rotated horizontally for some reason. And when I have uploaded it into Mixano, there was a half-sphere block in the bottm half of my avatar. Did somebody faced this?

    • @BhavinParekh-h6x
      @BhavinParekh-h6x 2 дні тому

      use y forward when the time of export from blender

  • @TorriAI
    @TorriAI 3 дні тому

    Awesome projects thanks for sharing

  • @Legends_and_Sagas
    @Legends_and_Sagas 3 дні тому

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

  • @biancamontesanti856
    @biancamontesanti856 4 дні тому

    it work's so good! thank you sensei i love your videos!

  • @dhanush77732
    @dhanush77732 4 дні тому

    Can u make waterfall mountain using threejs for next video please

  • @biancamontesanti856
    @biancamontesanti856 4 дні тому

    can this became multiplayer?

  • @jjjjjjjjooolllllllllll8395
    @jjjjjjjjooolllllllllll8395 5 днів тому

    Such talent! I imagine you have some released games?

  • @BearGamerzTeam
    @BearGamerzTeam 6 днів тому

    Wonderful ❤ can you make tutorial like chain gpt website robot animation

    • @WawaSensei
      @WawaSensei 5 днів тому

      Thank you! I had a look at their website and it's images animated, not realtime 3D 🤖 (but you can get ideas on how to do it with React Three Fiber with the portfolio playlist on my channel)

  • @redday8684
    @redday8684 6 днів тому

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

    • @WawaSensei
      @WawaSensei 5 днів тому

      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

  • @ockiyacliff9020
    @ockiyacliff9020 6 днів тому

    i just discovered you today.. and i must say... i dont even have words.. Thank youuuuuu!@@@

    • @WawaSensei
      @WawaSensei 5 днів тому

      Wow, thank you! 😍 Welcome on board!

  • @eldi
    @eldi 6 днів тому

    extremely laggy

  • @blankblank103
    @blankblank103 7 днів тому

    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 5 днів тому

      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)

  • @kali-qn7pn
    @kali-qn7pn 7 днів тому

    Hi wawa, how to dynamically add object and add texture to all object differently, but not random?

  • @sylvainschellenberger
    @sylvainschellenberger 8 днів тому

    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 5 днів тому

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

  • @randomcoggles3805
    @randomcoggles3805 8 днів тому

    Awesome! It'll really take a lot of training to fully understand. If you`re not german(speaking) nobody else is, eh, eh! :D

  • @randomcoggles3805
    @randomcoggles3805 8 днів тому

    I'd like this a thousand times :)

  • @andrewchen7174
    @andrewchen7174 8 днів тому

    Wow! Great work! Also, thank you for recommending Ecctrl! Is there any specific feature you’re looking for? I should be able to implement it in Ecctrl. 🤩

  • @jimmyroserovallejo
    @jimmyroserovallejo 8 днів тому

    Hello Wawa Sensei, I hope this message finds you well. I've been trying to reach you via Discord to inform you that the Christmas TikTok game project isn't functioning properly. There's an error in your code example in the Playroom library, specifically with the avatar photos and the TikTok login. If you could spare some time to take a look, that would be greatly appreciated. Both the test and live versions are not working. Also, congratulations on your wonderful content!

  • @souravdhar2621
    @souravdhar2621 8 днів тому

    so many aha moments...loved it so much

    • @WawaSensei
      @WawaSensei 8 днів тому

      So glad to read this, I gave my best to provide clear explanations 🙌 (promise I'll try to enhance my iPad drawing skills 🤭)

  • @jimmyroserovallejo
    @jimmyroserovallejo 9 днів тому

    It's amazing 🎉🎉🎉 😊

  • @irfansaeedkhan7242
    @irfansaeedkhan7242 9 днів тому

    wow do you complete on that ?

    • @WawaSensei
      @WawaSensei 8 днів тому

      thank you! What else would you need ser?

  • @bravefastrabbit770
    @bravefastrabbit770 9 днів тому

    Very interesting, ty for sharing the details. But one question stuck with me throughout the video, how much do you earn over there to justify paying 1.6k € for a rental lol?

  • @kevenrodriguesmeirelles2241
    @kevenrodriguesmeirelles2241 9 днів тому

    This guy don't stop to cook! 🔥

  • @yayanartha408
    @yayanartha408 9 днів тому

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

    • @WawaSensei
      @WawaSensei 8 днів тому

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

  • @julianvelez6563
    @julianvelez6563 9 днів тому

    Wow bro awesome work bro bro ❤❤❤

  • @slempens
    @slempens 9 днів тому

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

    • @WawaSensei
      @WawaSensei 8 днів тому

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

  • @PetrandoRichard
    @PetrandoRichard 9 днів тому

    Yes! Thank you!! 😍😎

  • @megabowser
    @megabowser 9 днів тому

    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 8 днів тому

      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🤣

  • @malickgm507
    @malickgm507 9 днів тому

    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 8 днів тому

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

    • @malickgm507
      @malickgm507 8 днів тому

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

    • @Legends_and_Sagas
      @Legends_and_Sagas 3 дні тому

      same problem some help please

  • @khevlar_studios
    @khevlar_studios 9 днів тому

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

    • @WawaSensei
      @WawaSensei 8 днів тому

      🕺happy that you like it! Thank you!

  • @boshen3953
    @boshen3953 9 днів тому

    Welcome back, great video! 😍😍

  • @manilyildiz
    @manilyildiz 9 днів тому

    Thank you 🎉

    • @WawaSensei
      @WawaSensei 8 днів тому

      Thank you for the support!

  • @HuynhLuong227
    @HuynhLuong227 9 днів тому

    wow, welcome back, thanks for sharing

  • @sureshsingh9880
    @sureshsingh9880 9 днів тому

    Three. Js and R3F wizard is back

    • @WawaSensei
      @WawaSensei 8 днів тому

      △🧙 I really like this title!

  • @MaxCodeJourney
    @MaxCodeJourney 9 днів тому

    Super!

    • @WawaSensei
      @WawaSensei 8 днів тому

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

  • @AndersonMancini
    @AndersonMancini 9 днів тому

    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 8 днів тому

      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 🙌

  • @Islamiccafe1
    @Islamiccafe1 9 днів тому

    Me the first viewer plzz pin sir

    • @WawaSensei
      @WawaSensei 9 днів тому

      I'm happy if it makes you happy ser 🙌

  • @sergiogonzalez2611
    @sergiogonzalez2611 10 днів тому

    thank you man, clear and precise tutorial, thnak you for shared

  • @maximumcockage6503
    @maximumcockage6503 11 днів тому

    Is it going to cover the new TSL?

  • @user-xo4rn9fr6k
    @user-xo4rn9fr6k 12 днів тому

    Can PayPal be added as a payment method?

  • @WawaSensei
    @WawaSensei 12 днів тому

    If you face an issue with the character, I made this video to explain where it's coming from and how to fix it 👉 ua-cam.com/video/tena89hj8v0/v-deo.html

  • @daniel_paez
    @daniel_paez 12 днів тому

    Hi Wawa Sensei, great tutorial, I'm doing the lip sync tutorial in react native but I've had several problems, the animations and useState variables don't get along, the expo audio is asynchronous and the mouth movement looks bad, can you make an animations tutorial and audio for react native?

  • @jimmyroserovallejo
    @jimmyroserovallejo 14 днів тому

    Best regards, I'm leaving you a message in your Twitter inbox x with some errors I'm getting from the game I made based on this tutorial, I hope you can help me, thank you.

    • @WawaSensei
      @WawaSensei 12 днів тому

      Hi, can you make a post in the Discord instead? Cheers