![Wawa Sensei](/img/default-banner.jpg)
- 70
- 756 231
Wawa Sensei
Japan
Registrace 25. 09. 2020
Welcome, to the Wawa Sensei channel.
On this channel I want to share with you my coding journey throughout tutorials and discussion videos. I always try to be as informative as possible to help you get the most out of my videos.
If you like tech, coding, web3, 3D and most of all learning, you'll enjoy joining the community!
See you in the next video :)
On this channel I want to share with you my coding journey throughout tutorials and discussion videos. I always try to be as informative as possible to help you get the most out of my videos.
If you like tech, coding, web3, 3D and most of all learning, you'll enjoy joining the community!
See you in the next video :)
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!
🚀 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
You are amazing!❤
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
Wawasensei you're projects are always great and awesome. I have build many complex 3D applications just by watching you on youtube. 😊
Amazing ... thanks for your explains Bro.
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?
use y forward when the time of export from blender
Awesome projects thanks for sharing
i change the character but this new character down please answer me i need to know why and thanx
it work's so good! thank you sensei i love your videos!
Can u make waterfall mountain using threejs for next video please
can this became multiplayer?
Such talent! I imagine you have some released games?
Wonderful ❤ can you make tutorial like chain gpt website robot animation
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)
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
i just discovered you today.. and i must say... i dont even have words.. Thank youuuuuu!@@@
Wow, thank you! 😍 Welcome on board!
extremely laggy
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)
Hi wawa, how to dynamically add object and add texture to all object differently, but not random?
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 🙏)
Awesome! It'll really take a lot of training to fully understand. If you`re not german(speaking) nobody else is, eh, eh! :D
I'd like this a thousand times :)
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. 🤩
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!
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 🤭)
It's amazing 🎉🎉🎉 😊
🥹🙏🥰
wow do you complete on that ?
thank you! What else would you need ser?
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?
This guy don't stop to cook! 🔥
🧑🍳
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 🙌
Wow bro awesome work bro bro ❤❤❤
Aaaah cool, j'ai ma vidéo pour ce weekend!!! Merci mon ami!
Yihaaa, bon week-end à toi l'ami ! Profite bien 🙌
Yes! Thank you!! 😍😎
Thank you more!
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🤣
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
Its finally hereeeeee🎊🎊🎊🎊🎊 Thanks so much Wassim
🕺happy that you like it! Thank you!
Welcome back, great video! 😍😍
🥹 thank youuuuu
Thank you 🎉
Thank you for the support!
wow, welcome back, thanks for sharing
Thanks a lot!
Three. Js and R3F wizard is back
△🧙 I really like this title!
Super!
Thank you! @everyone, check Max channel he deserves more views/subscribers! 🙌
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 🙌
Me the first viewer plzz pin sir
I'm happy if it makes you happy ser 🙌
thank you man, clear and precise tutorial, thnak you for shared
Is it going to cover the new TSL?
Can PayPal be added as a payment method?
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
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?
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.
Hi, can you make a post in the Discord instead? Cheers