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:
czcams.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!
zhlédnutí: 4 248

Video

Coastal World Aesthetics | 3D Snippet
zhlédnutí 2,2KPřed měsícem
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
zhlédnutí 1,8KPřed měsícem
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: czcams.com/channels/BH-5ctALmmOrm4kczL3urQ.htmljoin ▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬ 💻 Th...
3D Artists Create my Green Screen Video Background
zhlédnutí 921Před 2 měsíci
I asked 4 Fiverr Creators to make the perfect background for my CZcams 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
zhlédnutí 4,8KPřed 2 měsíci
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
zhlédnutí 7KPřed 3 měsíci
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
zhlédnutí 18KPřed 3 měsíci
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
zhlédnutí 4KPřed 3 měsíci
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
zhlédnutí 2,9KPřed 4 měsíci
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 czcams.com/play/PLpepLKamtPjguLKYT7c66998iTaWvqSRe.html AI Virtual Girlfriend Chatbot Tutorial czcams.com/video/EzzcEL_1o9o/video.html #threejs #developer #reactthre...
Build a Multiplayer Card Game w/ React Three Fiber & Playroom Stream Mode
zhlédnutí 6KPřed 5 měsíci
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
zhlédnutí 4,5KPřed 6 měsíci
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
zhlédnutí 9KPřed 6 měsíci
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
zhlédnutí 2,9KPřed 6 měsíci
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: czcams.com/video/e2ntx-...
How to Create Scene Transitions with React Three Fiber
zhlédnutí 4,5KPřed 6 měsíci
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: czcams.com/video/e2ntx-fyXaE/video.html Part2: czcams.c...
React Three Fiber Black Friday 3D Escape Game
zhlédnutí 1,5KPřed 7 měsíci
React Three Fiber Black Friday 3D Escape Game
6 Techniques to Make Any 3D Website Responsive
zhlédnutí 5KPřed 7 měsíci
6 Techniques to Make Any 3D Website Responsive
React Three Fiber Tutorial: How to Apply Images to 3D Objects
zhlédnutí 6KPřed 7 měsíci
React Three Fiber Tutorial: How to Apply Images to 3D Objects
10 Days to Create a 3D Multiplayer Game with React
zhlédnutí 2,3KPřed 8 měsíci
10 Days to Create a 3D Multiplayer Game with React
Build a 3D Multiplayer Mobile Shooter Game with Playroom and React Three Fiber
zhlédnutí 10KPřed 8 měsíci
Build a 3D Multiplayer Mobile Shooter Game with Playroom and React Three Fiber
How to Build a 3D Chatbot with ChatGPT & ElevenLabs
zhlédnutí 29KPřed 8 měsíci
How to Build a 3D Chatbot with ChatGPT & ElevenLabs
React Three Fiber: The Ultimate Guide to 3D Web Development
zhlédnutí 5KPřed 8 měsíci
React Three Fiber: The Ultimate Guide to 3D Web Development
How to Build a 3D Slideshow with React Three Fiber
zhlédnutí 12KPřed 9 měsíci
How to Build a 3D Slideshow with React Three Fiber
I Built a Multiplayer Sims Game with Javascript
zhlédnutí 5KPřed 9 měsíci
I Built a Multiplayer Sims Game with Javascript
Three.js Multiplayer Game Tutorial Ready Player Me
zhlédnutí 6KPřed 9 měsíci
Three.js Multiplayer Game Tutorial Ready Player Me
Multiplayer Game Tutorial with R3F & Socket.io: Shop
zhlédnutí 2,5KPřed 9 měsíci
Multiplayer Game Tutorial with R3F & Socket.io: Shop
Multiplayer Game Tutorial with R3F & Socket.io: Room Builder
zhlédnutí 3,1KPřed 10 měsíci
Multiplayer Game Tutorial with R3F & Socket.io: Room Builder
Multiplayer Game Tutorial with R3F & Socket.io: Pathfinding
zhlédnutí 3,1KPřed 10 měsíci
Multiplayer Game Tutorial with R3F & Socket.io: Pathfinding
Multiplayer Game Tutorial with R3F & Socket.io: Grid System
zhlédnutí 4,5KPřed 10 měsíci
Multiplayer Game Tutorial with R3F & Socket.io: Grid System
Build a multiplayer game with React Three Fiber and Socket.io
zhlédnutí 14KPřed 10 měsíci
Build a multiplayer game with React Three Fiber and Socket.io
Mesh Explosion Effect - React Three Fiber Tutorial
zhlédnutí 4,8KPřed 11 měsíci
Mesh Explosion Effect - React Three Fiber Tutorial

Komentáře

  • @egretfx
    @egretfx Před dnem

    You are amazing!❤

  • @BhavinParekh-h6x
    @BhavinParekh-h6x Před 2 dny

    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 Před 2 dny

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

  • @mgalarzav5564
    @mgalarzav5564 Před 3 dny

    Amazing ... thanks for your explains Bro.

  • @voloUA
    @voloUA Před 3 dny

    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?

  • @TorriAI
    @TorriAI Před 3 dny

    Awesome projects thanks for sharing

  • @Legends_and_Sagas
    @Legends_and_Sagas Před 3 dny

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

  • @biancamontesanti856

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

  • @dhanush77732
    @dhanush77732 Před 4 dny

    Can u make waterfall mountain using threejs for next video please

  • @biancamontesanti856

    can this became multiplayer?

  • @jjjjjjjjooolllllllllll8395

    Such talent! I imagine you have some released games?

  • @BearGamerzTeam
    @BearGamerzTeam Před 6 dny

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

    • @WawaSensei
      @WawaSensei Před 5 dny

      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 Před 6 dny

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

    • @WawaSensei
      @WawaSensei Před 5 dny

      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 Před 6 dny

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

    • @WawaSensei
      @WawaSensei Před 5 dny

      Wow, thank you! 😍 Welcome on board!

  • @eldi
    @eldi Před 6 dny

    extremely laggy

  • @blankblank103
    @blankblank103 Před 7 dny

    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 Před 5 dny

      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 Před 7 dny

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

  • @sylvainschellenberger

    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 Před 5 dny

      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 Před 8 dny

    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 Před 8 dny

    I'd like this a thousand times :)

  • @andrewchen7174
    @andrewchen7174 Před 8 dny

    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 Před 8 dny

    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 Před 8 dny

    so many aha moments...loved it so much

    • @WawaSensei
      @WawaSensei Před 8 dny

      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 Před 8 dny

    It's amazing 🎉🎉🎉 😊

  • @irfansaeedkhan7242
    @irfansaeedkhan7242 Před 9 dny

    wow do you complete on that ?

    • @WawaSensei
      @WawaSensei Před 8 dny

      thank you! What else would you need ser?

  • @bravefastrabbit770
    @bravefastrabbit770 Před 9 dny

    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

    This guy don't stop to cook! 🔥

  • @yayanartha408
    @yayanartha408 Před 9 dny

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

    • @WawaSensei
      @WawaSensei Před 8 dny

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

  • @julianvelez6563
    @julianvelez6563 Před 9 dny

    Wow bro awesome work bro bro ❤❤❤

  • @slempens
    @slempens Před 9 dny

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

    • @WawaSensei
      @WawaSensei Před 8 dny

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

  • @PetrandoRichard
    @PetrandoRichard Před 9 dny

    Yes! Thank you!! 😍😎

  • @megabowser
    @megabowser Před 9 dny

    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 Před 8 dny

      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 Před 9 dny

    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 Před 8 dny

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

    • @malickgm507
      @malickgm507 Před 8 dny

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

    • @Legends_and_Sagas
      @Legends_and_Sagas Před 3 dny

      same problem some help please

  • @khevlar_studios
    @khevlar_studios Před 9 dny

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

    • @WawaSensei
      @WawaSensei Před 8 dny

      🕺happy that you like it! Thank you!

  • @boshen3953
    @boshen3953 Před 9 dny

    Welcome back, great video! 😍😍

  • @manilyildiz
    @manilyildiz Před 9 dny

    Thank you 🎉

  • @HuynhLuong227
    @HuynhLuong227 Před 9 dny

    wow, welcome back, thanks for sharing

  • @sureshsingh9880
    @sureshsingh9880 Před 9 dny

    Three. Js and R3F wizard is back

    • @WawaSensei
      @WawaSensei Před 8 dny

      △🧙 I really like this title!

  • @MaxCodeJourney
    @MaxCodeJourney Před 9 dny

    Super!

    • @WawaSensei
      @WawaSensei Před 8 dny

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

  • @AndersonMancini
    @AndersonMancini Před 9 dny

    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 Před 8 dny

      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 Před 9 dny

    Me the first viewer plzz pin sir

    • @WawaSensei
      @WawaSensei Před 9 dny

      I'm happy if it makes you happy ser 🙌

  • @sergiogonzalez2611
    @sergiogonzalez2611 Před 10 dny

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

  • @maximumcockage6503
    @maximumcockage6503 Před 11 dny

    Is it going to cover the new TSL?

  • @user-xo4rn9fr6k
    @user-xo4rn9fr6k Před 12 dny

    Can PayPal be added as a payment method?

  • @WawaSensei
    @WawaSensei Před 12 dny

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

  • @daniel_paez
    @daniel_paez Před 12 dny

    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 Před 14 dny

    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 Před 12 dny

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