How to Create a 3D game with React Three Fiber: Part 1 - Zustand Wawa Sensei 2026-09-20 | How to Create a 3D game with React Three Fiber: Part 1 - Zustand
From Blender to Three.js: The Complete Baking Guide (AO, PBR, HighβLow Poly) Wawa Sensei 2025-09-19 | Learn how to bake ambient occlusion, PBR textures from custom Nodes and high to low poly in Blender for your Three.js projects. π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/Demo πhttps://baking-advanced.wawasensei.devFinal code πgithub.com/wass08/r3f-baking-advancedStarter code πgithub.com/wass08/r3f-webgpu-starter#threejs #js #webgpuβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Simplebakesuperhivemarket.com/products/simplebake---simple-pbr-and-other-baking-in-blender-2Blenderkitblenderkit.comGltf Reporthttps://gltf.report/PBRen.wikipedia.org/wiki/Physically_based_renderingThreejsthreejs.orgReact Three Fiberhttps://r3f.docs.pmnd.rs/getting-started/introductionβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 Introduction00:56 Blender Nodes Issue04:19 PBR Baking09:04 High Poly to Low Poly16:28 Ambient Occlusion Baking25:50 Threejs Material Export Settings34:47 PBR vs Cycles35:34 Conclusionβ¬β¬β¬β¬β¬β¬ CREDITS β¬β¬β¬β¬β¬β¬Song: Blue BoiComposer: Lakey InspiredWebsite: youtube.com/LakeyInspiredLicense: Creative Commons (BY-NC 3.0) creativecommons.org/licenses/by-nc/3.0Music powered by BreakingCopyright
How to Bake Lighting with Blender for Three.js Wawa Sensei 2025-09-05 | Learn how to bake lighting in Blender for Three.js projects. This tutorial covers the fundamentals of texture baking, explaining what it is, why it's essential for web performance, and providing a step-by-step guide to achieve Blender-quality renders in your Three.js applications.π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/Demo πhttps://baking.wawasensei.devFinal code πgithub.com/wass08/r3f-bakingStarter code πgithub.com/wass08/r3f-webgpu-starter#threejs #js #webgpuβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Simplebakesuperhivemarket.com/products/simplebake---simple-pbr-and-other-baking-in-blender-2UVPackmastersuperhivemarket.com/products/uvpackmaster?ref=2271Andrew Woan awesome tutorials for Blender and Three.jsyoutube.com/channel/UCN9Sb92kzuuarZ4JLKRViZA/aboutThree.js Shading Languagegithub.com/mrdoob/three.js/wiki/Three.js-Shading-LanguageZen UVsuperhivemarket.com/products/zen-uvUnwrapping tutorialyoutube.com/watch?v=sZwed1IHcmwThreejsthreejs.orgReact Three Fiberhttps://r3f.docs.pmnd.rs/getting-started/introductionβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 Introduction00:58 3D model into Three.js Scene04:11 Why is it different?05:07 Baking the floor08:52 Simple Bake12:02 UVs explanation15:35 Simple UV unwrapping17:48 Bake multiple objects21:26 Packing UVs25:08 UV Islands Scale & Margin27:49 UVPackmaster30:34 Denoiser common issues32:15 Resources to learn UV unwrapping36:18 Preparing all the objects39:14 Scale issue & Saving Texture Space44:05 Extra Margin Space46:41 Rebake items48:59 Export final bake for Three.js50:32 Final resultβ¬β¬β¬β¬β¬β¬ CREDITS β¬β¬β¬β¬β¬β¬Song: Blue BoiComposer: Lakey InspiredWebsite: youtube.com/LakeyInspiredLicense: Creative Commons (BY-NC 3.0) creativecommons.org/licenses/by-nc/3.0Music powered by BreakingCopyright
How to Fake Godrays in Three.js (WebGPU + React) Wawa Sensei 2025-08-22 | Learn how to build Godrays with React Three Fiber using the Three Shading Language (TSL) and WebGPUπ Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/Demo πhttps://godrays.wawasensei.devFinal code πgithub.com/wass08/r3f-godraysStarter code πgithub.com/wass08/r3f-webgpu-starter#threejs #js #webgpuβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Blender Tutorial to make godraysyoutube.com/watch?v=hZI2pqcp8igThree.js Shading Languagegithub.com/mrdoob/three.js/wiki/Three.js-Shading-LanguageThreejsthreejs.orgReact Three Fiberhttps://r3f.docs.pmnd.rs/getting-started/introductionβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 Introduction00:54 WebGPU / TSL Starter Pack01:37 Learning process02:17 Cylinder Geometry05:54 Godray Shader with TSL13:07 Smoothing & Inverted Fresnel17:45 Loading our scene19:04 Adding controls20:20 Placing & Customizing our Godrays23:31 Real Godrays23:47 Conclusionβ¬β¬β¬β¬β¬β¬ CREDITS β¬β¬β¬β¬β¬β¬Song: Blue BoiComposer: Lakey InspiredWebsite: youtube.com/LakeyInspiredLicense: Creative Commons (BY-NC 3.0) creativecommons.org/licenses/by-nc/3.0Music powered by BreakingCopyright
Vibe Code a 3D Carousel with Claude Code & Three.js Wawa Sensei 2025-08-08 | Let's see how good is Claude Code with Three.js to vibecode a 3D images Carousel with TSL & WebGPU!π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/Demo πhttps://3d-carousel.wawasensei.devFinal code πgithub.com/wass08/r3f-carousel-sliderStarter code πgithub.com/wass08/r3f-webgpu-starterEleven Labs Carouselelevenlabs.io/music#threejs #vibecoding #claudecodeβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Claude Codeanthropic.com/claude-codeThree.js Shading Languagegithub.com/mrdoob/three.js/wiki/Three.js-Shading-LanguageThreejsthreejs.orgReact Three Fiberhttps://r3f.docs.pmnd.rs/getting-started/introductionβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 Intro00:35 Vibe Coding with Claude Code21:26 Learn Three.js with React21:51 Thoughts and Key Takeways22:35 Conclusionβ¬β¬β¬β¬β¬β¬ CREDITS β¬β¬β¬β¬β¬β¬Song: Blue BoiComposer: Lakey InspiredWebsite: youtube.com/LakeyInspiredLicense: Creative Commons (BY-NC 3.0) creativecommons.org/licenses/by-nc/3.0Music powered by BreakingCopyright: breakingcopyright.com
How to Create a Lenticular Material with TSL and WebGPU Wawa Sensei 2025-07-18 | Learn how to build a Lenticular Effect Material with Three.js using the Three Shading Language (TSL) and WebGPU3D AI Studio3daistudio.comπ Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/Demo πhttps://lenticular.wawasensei.devFinal code πgithub.com/wass08/r3f-lenticular-materialStarter code πgithub.com/wass08/r3f-webgpu-starterOriginal Question onRedditreddit.com/r/blenderhelp/s/owPwwgLZKn#threejs #js #reactjsβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Three.js Shading Languagegithub.com/mrdoob/three.js/wiki/Three.js-Shading-LanguageThreejsthreejs.orgReact Three Fiberhttps://r3f.docs.pmnd.rs/getting-started/introductionβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 Intro01:02 R3F WebGPU Starter Pack01:53 Node Materials with React Three Fiber03:52 Three Shading Language (TSL)06:59 3D AI Studio Images Generation08:58 Loading Textures with TSL13:46 Lenticular logic22:00 Conclusionβ¬β¬β¬β¬β¬β¬ CREDITS β¬β¬β¬β¬β¬β¬Song: Blue BoiComposer: Lakey InspiredWebsite: youtube.com/LakeyInspiredLicense: Creative Commons (BY-NC 3.0) creativecommons.org/licenses/by-nc/3.0Music powered by BreakingCopyright: breakingcopyright.com
How to Create a Minimap in Three.js with React Three Fiber (Drei View) Wawa Sensei 2025-07-04 | Learn how to build a dynamic minimap that follows your character using Three.js and React Three Fiber (R3F) with the Drei View component! πΊοΈIn this tutorial, weβll cover setting up a minimap in your 3D scene, integrating it with React Three Fiber, and using Dreiβs View component. We'll implement it on the final project of the 3rd person controller tutorial (youtu.be/yjpGVIe_Gy8)π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/Demo πhttps://minimap.wawasensei.dev/Final code πgithub.com/wass08/r3f-3rd-person-controller-minimapStarter code πgithub.com/wass08/r3f-3rd-person-controller-final#threejs #js #reactjsβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ View Component from Drei libraryhttps://drei.docs.pmnd.rs/portals/viewReact Three Fiberhttps://r3f.docs.pmnd.rs/getting-started/introductionThreejsthreejs.orgβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 Intro00:47 Third Person Controller01:27 View Component06:37 Valtio Proxy State11:28 Minimap Camera Logic14:44 Autorotate16:33 Visual indicators18:28 Final result19:44 Conclusionβ¬β¬β¬β¬β¬β¬ CREDITS β¬β¬β¬β¬β¬β¬Song: Blue BoiComposer: Lakey InspiredWebsite: youtube.com/LakeyInspiredLicense: Creative Commons (BY-NC 3.0) creativecommons.org/licenses/by-nc/3.0Music powered by BreakingCopyright: breakingcopyright.com
Real-Time Lipsync for Web: Build AI Chatbots & Games with Wawa-Lipsync (Free & Open-Source!) Wawa Sensei 2025-06-20 | Discover Wawa-Lipsync: A FREE, open-source JavaScript library for real-time lipsync in web-based 2D/3D games and AI chatbots! πTired of slow and expensive lipsync solutions like Azure or Rhubarb? In this video, I introduce Wawa-Lipsync, a fast, TypeScript-based library that works with any JS framework (Three.js, React Three Fiber, and more). Learn how to create convincing talking characters for your games or AI projects for free!π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/Demo πhttps://wawa-lipsync.wawasensei.dev/Wawa Lipsync Library πgithub.com/wass08/wawa-lipsync#lipsync #js #opensourceβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ AI Girlfriend tutorialyoutu.be/EzzcEL_1o9oOculus Lipsync Viseme referencedevelopers.meta.com/horizon/documentation/unity/audio-ovrlipsync-viseme-referenceAnalyser Nodedeveloper.mozilla.org/en-US/docs/Web/API/AnalyserNodeReact Three Fiberhttps://r3f.docs.pmnd.rs/getting-started/introductionThreejsthreejs.orgβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00:00 Introduction00:00:42 Azure TTS00:01:09 Rhubarb lipsync library00:02:08 AI Chatbots00:02:38 Introducing Wawa-Lipsync00:03:07 Visemes detection00:05:15 How to use it00:06:07 Going further00:06:33 Conclusionβ¬β¬β¬β¬β¬β¬ CREDITS β¬β¬β¬β¬β¬β¬Song: Blue BoiComposer: Lakey InspiredWebsite: youtube.com/LakeyInspiredLicense: Creative Commons (BY-NC 3.0) creativecommons.org/licenses/by-nc/3.0Music powered by BreakingCopyright: breakingcopyright.com
How to Create a VTuber Studio with Three.js, React & VRM Wawa Sensei 2025-04-25 | In this tutorial, you'll learn what VRM avatars are and how to use them with React Three Fiber. In addition, we will use Mediapipe face recognition features to control our avatar eyes, face, and pose with our webcam!π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/Demo πhttps://vrm.wawasensei.dev/Starter code πgithub.com/wass08/r3f-vrm-starterFinal code πgithub.com/wass08/r3f-vrm-final#threejs #reactjs #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Pixiv ThreeVRMgithub.com/pixiv/three-vrmVRoid Hubhub.vroid.com/enVRoid Studiovroid.com/en/studioMixamomixamo.comKalidokitgithub.com/yeemachine/kalidokitMediapipe Holistichttps://ai.google.dev/edge/mediapipe/solutions/vision/holistic_landmarkerReact Three Fiberhttps://r3f.docs.pmnd.rs/getting-started/introductionThreejsthreejs.orgβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00:00 Introduction00:01:31 What is a VRM00:02:05 Starter Pack00:03:02 Find VRM models00:04:18 Load VRM with Three.js00:08:31 Facial Expressions / MorphTargets00:14:10 Play animations00:20:39 Mediapipe face and pose tracking00:24:23 Apply results to VRM with Kalidokit00:30:16 Conclusionβ¬β¬β¬β¬β¬β¬ CREDITS β¬β¬β¬β¬β¬β¬Song: Blue BoiComposer: Lakey InspiredWebsite: youtube.com/LakeyInspiredLicense: Creative Commons (BY-NC 3.0) creativecommons.org/licenses/by-nc/3.0Music powered by BreakingCopyright: breakingcopyright.com
Easily add VFX to React Three Fiber - Mini Game Tutorial Wawa Sensei 2025-04-11 | In this tutorial, you'll learn how to build an axe throwing game with custom VFX using a brand new free npm package I created for React Three Fiber. It's part of my advanced course, and today Iβm showing you how to use it live!π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/Demo πhttps://axe.wawasensei.dev/Starter code πgithub.com/wass08/r3f-axe-throwing-game-starterFinal code πgithub.com/wass08/r3f-axe-throwing-game-final#threejs #reactjs #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Wawa VFXgithub.com/wass08/wawa-vfxReact Three Fiberhttps://r3f.docs.pmnd.rs/getting-started/introductionThreejsthreejs.orgβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00:00 Introduction00:01:03 Starter Pack00:02:04 Axe Controller00:10:33 Target collision00:13:13 Adding explosion VFX00:18:32 Balloons00:24:43 Exploding Balloons00:30:29 Game polishing00:37:58 Axe trail00:41:04 SFX00:42:39 Mobile adjustments00:43:59 Conclusionβ¬β¬β¬β¬β¬β¬ CREDITS β¬β¬β¬β¬β¬β¬Song: Blue BoiComposer: Lakey InspiredWebsite: youtube.com/LakeyInspiredLicense: Creative Commons (BY-NC 3.0) creativecommons.org/licenses/by-nc/3.0Music powered by BreakingCopyright: breakingcopyright.com
3D Websites Valentines Day Edition π #threejs #webdevelopment Wawa Sensei 2025-02-14 | Discover amazing 3D Websites made with Threejs, React Three Fiber, and Webgl/WebGPU (Valentine's Day Edition) πJewelry Landing Pagehttps://webgi-jewelry.vercel.app/Le Jardin Extraordinairelejardin.pha5e.comHouse of Dreamershttps://www.houseofdreamers.fr/π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/β¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communityhttps://wawasensei.dev/discordπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08
3D Websites Selection #threejs #webdevelopment Wawa Sensei 2025-02-07 | Discover amazing 3D Websites made with Threejs, React Three Fiber, and Webgl/WebGPU π₯M Fishermfisher-apollonas.comUtsuboutsubo.comKubotakubota.com/futurecubeMoooimoooi.com/en/defy-gravityπ Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/β¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communityhttps://wawasensei.dev/discordπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08
Three.js 101: How to Build 3D Websites (Ep 5 - Materials) #threejs Wawa Sensei 2025-01-31 | Welcome to Three.js 101! π In this fifth episode we will discover what are Materials π¨πͺπ Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/β¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communityhttps://wawasensei.dev/discordπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08
Three.js 101: How to Build 3D Websites (Ep 4 - Geometries) #threejs Wawa Sensei 2025-01-24 | Welcome to Three.js 101! π In this fourth episode we will discover what are Geometries πͺπ Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/β¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communityhttps://wawasensei.dev/discordπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08
Three.js 101: How to Build 3D Websites (Ep 3 - Mesh) #threejs Wawa Sensei 2025-01-17 | Welcome to Three.js 101! π In this third episode we will discover what are Meshes πͺπ Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/β¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communityhttps://wawasensei.dev/discordπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08
My Journey Coding a VR/AR Rhythm Game with Three.js & React Three Fiber Wawa Sensei 2024-12-13 | Discover how to build a VR/AR music game with three.js & React Three Fiber in this Devlog format tutorial. π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/Demo πhttps://wawataiko.wawasensei.dev/Final code πgithub.com/wass08/wawataiko-xr-game#threejs #reactjs #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ React Three Fiberhttps://r3f.docs.pmnd.rs/getting-started/introductionReact XRgithub.com/pmndrs/xrUIKitgithub.com/pmndrs/uikitSimpleBakeblendermarket.com/products/simplebake---simple-pbr-and-other-baking-in-blender-2Tonejsgithub.com/Tonejs/Midiβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00:00 Introduction00:00:58 Scene creation00:02:26 Instruments & Ambient Occlusion00:04:42 Positional Audio00:09:20 VR/AR Development00:12:33 UIKit00:16:14 Midi file format00:19:33 Notes movement logic00:21:20 Score calculation logic00:23:31 Performance00:24:20 Animations & Particles00:28:45 Open-Source00:29:17 VR Game Session00:30:56 Conclusion
Three.js 101: How to Build 3D Websites (Ep 2 - Setup) #threejs Wawa Sensei 2024-12-06 | Welcome to Three.js 101! π In this second episode we will create our first 3D scene with Three.js πͺπ Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/β¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communityhttps://wawasensei.dev/discordπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08
Three.js 101: How to Build 3D Websites (Ep 1 - Introduction) #threejs Wawa Sensei 2024-11-29 | Welcome to Three.js 101! π In this first episode weβll discover the magical world of WebGL and WebGPU, the technologies powering 3D websites. πͺDiscover how Three.js, your ultimate 3D JavaScript library, makes it easy to create immersive visuals, animations, lights, shadows, and moreβall in your browser.If youβve ever dreamed of bringing your ideas to life in 3D, this series is for you. Ready to start your journey? Letβs unlock the magic of 3D web development together!π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/β¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communityhttps://wawasensei.dev/discordπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08
Get React Three Fiber: The Ultimate Guide at Black Friday Prices to Master #threejs Wawa Sensei 2024-11-28 | Final Hours to get 50% off on React Three Fiber: The Ultimate Guide to 3D Web Development. A project-based course to learn how to build 3D websites, chatbots, metaverses, and games with Three.js and React Three Fiber πLink to the courseπ https://wawasensei.dev/courses/react-three-fiberβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08π» My website : https://www.wawasensei.dev
3 Beginner Project Ideas to Master 3D Web Development with #threejs and #reactthreefiber Wawa Sensei 2024-11-22 | Want to level up your 3D web development skills? π» Here are 3 beginner-friendly projects to get hands-on with Three.js and React Three Fiber.π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/β¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communityhttps://wawasensei.dev/discordπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08
π₯ Black Friday: 50% OFF React Three Fiber Guide! Master #threejs Now! Wawa Sensei 2024-11-15 | Learn how to build 3D websites, chatbots, metaverses, and games with Three.js and React Three Fiber with my project-based course πGet 50% off during our Black Friday deal π https://wawasensei.dev/courses/react-three-fiberβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08π» My website : https://www.wawasensei.dev
Three.js Devs, You NEED This VS Code Extension! 3D Previews Made Easy! π₯ #threejs #tutorial #vscode Wawa Sensei 2024-11-08 | Discover this useful extension for Threejs developers to preview GLB files directly within Visual Studio Code π§βπ»π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/Link to the extension π marketplace.visualstudio.com/items?itemName=degreat.3eβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communityhttps://wawasensei.dev/discordπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08
Build a 3D Avatar Builder with Threejs and React - Full Course Wawa Sensei 2024-11-01 | Learn how to build a 3D Avatar Creator with Three.js and React Three Fiber from scratch! In this complete threejs course we will learn step by step how to:- Compose avatars using 3D assets fetched from a database- Download and optimize it into a GLB file- Take picture of our avatar- Add animations and poses on our character- Create compatible 3D assets- Use your avatar in your projectsπ Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://wawasensei.dev/courses/react-three-fiber/Demo πhttps://avatar.wawasensei.dev/Final code πgithub.com/wass08/r3f-ultimate-character-configurator#threejs #reactjs #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Enable CICD and deploy your project with Elestio elest.ioKirzozz instagram.com/kirzozzCreate a React App with Vitehttps://vitejs.dev/guide/React Three Fiberhttps://r3f.docs.pmnd.rs/getting-started/introductionTailwindCSS installtailwindcss.com/docs/guides/viteThreejsthreejs.orgDeploy your PocketBase instance with Elestioelest.io/open-source/pocketbasePocketBase Files Handlingpocketbase.io/docs/files-handling#file-urlZustand State Managementgithub.com/pmndrs/zustandSetting up Environment Variables with Vitehttps://vitejs.dev/guide/env-and-mode.htmlSkinned meshesthreejs.org/docs/?q=skinn#api/en/objects/SkinnedMeshGLTFExporterthreejs.org/docs/#examples/en/exporters/GLTFExporterThreejs Materialthreejs.org/docs/#api/en/materials/MaterialGoogle Fontsfonts.google.comHeroIconsheroicons.comReact Colorcasesandberg.github.io/react-colorBlenderblender.orgMixamomixamo.com/#React Three Post-Processinggithub.com/pmndrs/react-postprocessingReact Springhttps://react-spring.dev/Gltf-transformgithub.com/donmccurdy/glTF-Transformβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00:00 Introduction00:01:30 Project setup00:06:22 Build and Deploy (CICD)00:08:57 PocketBase collections creation00:16:15 Fetching Data into Zustand Store00:22:08 Draft UI00:30:12 Blender Assets Explanation00:32:50 Asset Selection00:35:17 Avatar composition00:45:06 Scene lights & shadows00:48:07 Default asset00:50:54 Playing animations00:52:13 Download button00:56:32 Color palettes01:02:15 UI Enhancement01:04:52 Color Picker01:07:08 Update material colors01:08:48 Skin color01:11:36 Removable assets01:13:56 Randomize button01:17:22 Custom asset creation01:22:27 Attach skin to asset01:27:20 Asset rigging to the armature01:30:09 Thumbnail generation01:40:11 Uploading asset & thumbnail01:42:08 Group locking mechanism01:48:36 UI Adjustment01:49:23 Uploading all assets (fix)01:50:47 More UI adjustments01:51:25 Camera Controls01:59:50 Scene adjustments02:02:49 Poses & Animations02:06:52 Photo booth mode02:11:17 Screenshot02:16:10 Bloom Post-Processing02:17:21 Responsive Adjustments02:18:31 Loading Screen02:21:26 React Spring Transitions02:30:44 Gltf-transform Optimizations02:33:25 Use avatar on your project02:34:02 Use avatar with the 3rd Person Controller02:39:42 Use avatar on the AI Virtual Girlfriend02:48:04 Continue learning Threejs
Threejs & React Avatar Builder Tutorial - Part 7: Post Processing Wawa Sensei 2024-10-25 | Learn how to build a professional avatar builder with Three.js and React Three Fiber! In this seventh and final part, we will add a bloom post-processing effect, a loading screen, animated model transitions, and a process to optimize the final GLB file we download π§ββοΈπ Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Demo πhttps://avatar.wawasensei.dev/Final code πgithub.com/wass08/r3f-ultimate-character-configurator#threejs #webdevelopment #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ React Three Post-Processinggithub.com/pmndrs/react-postprocessingReact Springhttps://react-spring.dev/Gltf-transformgithub.com/donmccurdy/glTF-Transformβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 Introduction00:15 Bloom Post-Processing01:26 Responsive adjustments02:21 Loading Screen05:16 React Spring Transitions14:34 Gltf-transform Optimizations17:30 Thank you!
Threejs & React Avatar Builder Tutorial - Part 6: Camera Controls Wawa Sensei 2024-10-18 | Learn how to build a professional avatar builder with Three.js and React Three Fiber! In this sixth part, we will add camera controls to always look at the part we're adjusting and a photo booth mode to change our character poses and take screenshots πΈπ Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Demo πhttps://avatar.wawasensei.dev/Sixth part code πgithub.com/wass08/r3f-ultimate-character-configurator-part-6Final code πgithub.com/wass08/r3f-ultimate-character-configurator#threejs #webdevelopment #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Mixamomixamo.com/#Blenderblender.orgβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 Introduction00:16 Uploading all assets (fix)01:40 UI adjustments02:18 Camera Controls10:43 Scene adjustments13:42 Poses & Animations17:45 Photo booth mode22:10 Screenshot27:03 Next part preview
Threejs & React Avatar Builder Tutorial - Part 5: Asset Creation Wawa Sensei 2024-10-11 | Learn how to build a professional avatar builder with Three.js and React Three Fiber! In this fifth part, we will prepare a custom asset from scratch, compatible with our builder, generate high-quality thumbnails, and add a lock mechanism to have full-body outfits ππ Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Demo πhttps://avatar.wawasensei.dev/Fifth part code πgithub.com/wass08/r3f-ultimate-character-configurator-part-5Final code πgithub.com/wass08/r3f-ultimate-character-configurator#threejs #webdevelopment #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Blenderblender.orgβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 Introduction00:37 Custom asset creation05:42 Attach skin to asset10:35 Asset rigging to the armature13:24 Thumbnail generation23:26 Uploading asset & thumbnail25:23 Group locking mechanism31:51 UI Adjustment32:38 Next part preview
Threejs & React Avatar Builder Tutorial - Part 4: Color Picker Wawa Sensei 2024-10-04 | Learn how to build a professional avatar builder with Three.js and React Three Fiber! In this fourth part, we will add a custom color picker, enhance the UI, and add a randomize button π¨π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Demo πhttps://avatar.wawasensei.dev/Fourth part code πgithub.com/wass08/r3f-ultimate-character-configurator-part-4Final code πgithub.com/wass08/r3f-ultimate-character-configurator#threejs #webdevelopment #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Threejs Materialthreejs.org/docs/#api/en/materials/MaterialGoogle Fontsfonts.google.comHeroIconsheroicons.comReact Colorcasesandberg.github.io/react-colorβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 Introduction00:15 Color palettes05:58 UI Enhancement08:35 Color Picker10:51 Update material colors12:31 Skin color15:19 Removable assets17:39 Randomize button21:05 Next part preview
Threejs & React Avatar Builder Tutorial - Part 3: Composition Wawa Sensei 2024-09-27 | Learn how to build a professional avatar builder with Three.js and React Three Fiber! In this third part, we will assemble 3D assets to generate and download our animated 3D model.π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Demo πhttps://avatar.wawasensei.dev/Third part code πgithub.com/wass08/r3f-ultimate-character-configurator-part-3Final code πgithub.com/wass08/r3f-ultimate-character-configurator#threejs #webdevelopment #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Skinned meshesthreejs.org/docs/?q=skinn#api/en/objects/SkinnedMeshGLTFExporterthreejs.org/docs/#examples/en/exporters/GLTFExporterβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 Introduction00:10 Blender Assets Explanation02:48 Asset Selection05:15 Avatar composition15:04 Scene lights & shadows18:05 Default asset20:52 Playing animations22:11 Download button26:31 Next part preview
Threejs & React Avatar Builder Tutorial - Part 2: PocketBase Wawa Sensei 2024-09-20 | Learn how to build a professional avatar builder with Three.js and React Three Fiber! In this second part, we will use PocketBase as our Backend as a Service solution and Zustand for our global store.π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Demo πhttps://avatar.wawasensei.dev/Second part code πgithub.com/wass08/r3f-ultimate-character-configurator-part-2Final code πgithub.com/wass08/r3f-ultimate-character-configurator#threejs #webdevelopment #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Deploy your PocketBase instance with Elestioelest.io/open-source/pocketbasePocketBase Files Handlingpocketbase.io/docs/files-handling#file-urlZustand State Managementgithub.com/pmndrs/zustandSetting up Environment Variables with Vitehttps://vitejs.dev/guide/env-and-mode.htmlβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 Introduction00:09 PocketBase collections creation07:27 Fetching Data into Zustand Store13:20 Draft UI21:23 Next part preview
Threejs & React Avatar Builder Tutorial - Part 1: Setup Wawa Sensei 2024-09-13 | Learn how to build a professional avatar builder with Three.js and React Three Fiber!π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Demo πhttps://avatar.wawasensei.dev/First part code πgithub.com/wass08/r3f-ultimate-character-configurator-setupFinal code πgithub.com/wass08/r3f-ultimate-character-configurator#threejs #webdevelopment #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Enable CICD and deploy your project with Elestio elest.ioKirzozz instagram.com/kirzozzCreate a React App with Vitehttps://vitejs.dev/guide/React Three Fiberhttps://r3f.docs.pmnd.rs/getting-started/introductionTailwindCSS installtailwindcss.com/docs/guides/viteThreejsthreejs.orgβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 Introduction01:40 Project presentation06:32 Build and Deploy09:08 Next part preview
Fix Loading Model Freezes with Three.js & React #reactthreefiber #threejs #webdevelopment Wawa Sensei 2024-08-30 | Learn how to optimize your gltf models and textures to get rid of the loading freezes when loading Three.js / React Three Fiber scenes!π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Final code & Commandsπgithub.com/wass08/r3f-ktx2β¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ GLTF Reporthttps://gltf.report/GLTF Transformhttps://gltf-transform.dev/Learn more about KTX Formatgithub.com/KhronosGroup/3D-Formats-Guidelines/blob/abb088ef6f2a015f830bfd942bd42930a543c6ca/KTXArtistGuide.mdKTX Toolsgithub.khronos.org/KTX-Software/ktxtools/ktxsc.htmlInstall KTX Toolsgithub.com/KhronosGroup/KTX-Software/releasesOnline GLB Optimizer Toolglb.babylonpress.orgLoading Textures with React Three Fiberhttps://r3f.docs.pmnd.rs/tutorials/loading-texturesPBR Texturesambientcg.com/list?type=Material,Atlas,Decalβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 Intro00:49 The problem04:07 The solution04:34 Transform textures06:08 Threejs KTX2 textures07:36 Benefits08:21 Additional compression09:47 Online tool10:24 Convert images to KTX213:46 Thank you!
Fix Loading Model Freezes with Three.js & React Wawa Sensei 2024-08-30 | Learn how to optimize your gltf models and textures to get rid of the loading freezes when loading Three.js / React Three Fiber scenes!π Learn React Three Fiber with the Ultimate Guide to 3D Web Development β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Final code & Commandsπgithub.com/wass08/r3f-ktx2#threejs #webdevelopment #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ GLTF Reporthttps://gltf.report/GLTF Transformhttps://gltf-transform.dev/Learn more about KTX Formatgithub.com/KhronosGroup/3D-Formats-Guidelines/blob/abb088ef6f2a015f830bfd942bd42930a543c6ca/KTXArtistGuide.mdKTX Toolsgithub.khronos.org/KTX-Software/ktxtools/ktxsc.htmlInstall KTX Toolsgithub.com/KhronosGroup/KTX-Software/releasesOnline GLB Optimizer Toolglb.babylonpress.orgLoading Textures with React Three Fiberhttps://r3f.docs.pmnd.rs/tutorials/loading-texturesPBR Texturesambientcg.com/list?type=Material,Atlas,Decalβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 Intro00:49 The problem04:07 The solution04:34 Transform textures06:08 Threejs KTX2 textures07:36 Benefits08:21 Additional compression09:47 Online tool10:24 Convert images to KTX213:46 Thank you!
Boids Flocking Simulation with Three.js & React Wawa Sensei 2024-08-16 | Learn how to build an amazing Boids Flocking Simulation landing page with Three.js and React Three Fiberπ Learn React Three Fiber with my complete course β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Kirzozz πΈinstagram.com/KirzozzLive demo ποΈhttps://r3f-boids-final.vercel.app/Starter pack πgithub.com/wass08/r3f-boids-starterFinal code πgithub.com/wass08/r3f-boids-final#threejs #webdevelopment #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Convert fonts to Typefacegero3.github.io/facetype.jsBoids algorithmred3d.com/cwr/boidsReact Three Fiber Exampleshttps://react-three-fiber.docs.pmnd.rs/getting-started/examplesGPGPU examplethreejs.org/examples/?q=pgp#webgl_gpgpu_birds_gltfβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00:00 Intro00:00:44 Starter pack00:01:51 Boundaries00:05:19 Boids creation00:09:27 Wandering00:15:15 Limits00:18:16 Small but fast!00:20:10 Alignment00:23:41 Separation00:26:13 Cohesion00:28:37 3 Dimensions00:30:01 PostProcessing00:33:30 Glassy Text00:35:14 Going further00:35:38 Thank you!
Build a 3D Book Slider Landing Page with Three.js & React Wawa Sensei 2024-07-27 | Learn how to build an amazing 3D Book Slider landing page with Three.js and React Three Fiberπ Learn React Three Fiber with my complete course β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Live demo ποΈhttps://r3f-animated-book-slider-final.vercel.app/Starter pack πgithub.com/wass08/r3f-animated-book-slider-starterFinal code πgithub.com/wass08/r3f-animated-book-slider-final#threejs #webdevelopment #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Squoosh Texture compressionhttps://squoosh.app/Box Geometrythreejs.org/docs/#api/en/geometries/BoxGeometrySkinned Meshthreejs.org/docs/?q=skinn#api/en/objects/SkinnedMeshGraphToygraphtoy.comβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 - Intro01:00 - Starter pack02:03 - Book05:30 - BoxGeometry08:11 - SkinnedMesh17:44 - Textures20:55 - Initial state22:22 - Page transitions32:44 - Fold animation36:50 - Delay between pages38:57 - PointerEvents41:35 - Final touch43:02 - Thank you!
Wiggle Bones Threejs Library w/ React Three Fiber Wawa Sensei 2024-07-05 | In this 3D Snippet, learn how to use the amazing Wiggle Bones Threejs Library with React Three Fiberπ Learn React Three Fiber with my complete course β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Live demo ποΈhttps://r3f-skibidi-final.vercel.app/Starter pack πgithub.com/wass08/r3f-skibidi-starterFinal code πgithub.com/wass08/r3f-skibidi-final#threejs #webdevelopment #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Mixamomixamo.com/#Blenderblender.org3D Modelshttps://poly.pizza/m/47UYz6vLa_Vsketchfab.com/3d-models/summer-collection-5-anime-bikini-3d-characters-107d110762f34607b0b2d5ea157a4558Wiggle Bones Libraryhttps://wiggle.three.tools/Wiggle Bones Tutorialshttps://pre-wiggle.xl.digital/Xavier Jack (@KMkota0 )https://x.com/KMkota0youtube.com/@KMkota0β¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 - Intro01:08 - Starter pack01:50 - Preparing the box07:36 - Wiggle Bones12:55 - Preparing the Mixamo Model19:31 - Wiggle Springs on Animated Model26:23 - Thank you!
Third Person Controller (React Three Fiber Tutorial) #threejs #webdevelopment Wawa Sensei 2024-06-21 | In this 3D Snippet, learn how to create a simple and reusable third-person controller using Three.js and React Three Fiber.Link to the full videoπ Learn React Three Fiber with my complete course β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Live demo ποΈhttps://r3f-3rd-person-controller-final.vercel.app/Starter pack πgithub.com/wass08/r3f-3rd-person-controller-starterFinal code πgithub.com/wass08/r3f-3rd-person-controller-finalβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ 3D Modelssketchfab.com/3d-models/castle-on-hills-b874cb19b42741729b950f6afbdf0deasketchfab.com/3d-models/de-dust-2-with-real-light-4ce74cd95c584ce9b12b5ed9dc418db5sketchfab.com/3d-models/animal-crossing-map-9f53cb8a02134037887875e022b2eae2sketchfab.com/3d-models/medieval-fantasy-book-06d5a80a04fc4c5ab552759e9a97d91asketchfab.com/3d-models/city-scene-tokyo-b25d23ff186949dca3df669c14447db5Ecctrlgithub.com/pmndrs/ecctrlβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08
Third Person Controller (React Three Fiber Tutorial) Wawa Sensei 2024-06-21 | 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 β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Live demo ποΈhttps://r3f-3rd-person-controller-final.vercel.app/Starter pack πgithub.com/wass08/r3f-3rd-person-controller-starterFinal code πgithub.com/wass08/r3f-3rd-person-controller-final#threejs #webdevelopment #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ 3D Modelssketchfab.com/3d-models/castle-on-hills-b874cb19b42741729b950f6afbdf0deasketchfab.com/3d-models/de-dust-2-with-real-light-4ce74cd95c584ce9b12b5ed9dc418db5sketchfab.com/3d-models/animal-crossing-map-9f53cb8a02134037887875e022b2eae2sketchfab.com/3d-models/medieval-fantasy-book-06d5a80a04fc4c5ab552759e9a97d91asketchfab.com/3d-models/city-scene-tokyo-b25d23ff186949dca3df669c14447db5Ecctrlgithub.com/pmndrs/ecctrlβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08β¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 - Intro00:58 - Starter pack01:34 - Physics03:35 - Character controller05:48 - 3rd person follow camera08:59 - Physics movement12:08 - Rotations17:03 - Animations18:36 - Mouse control21:49 - Touch control22:34 - Customizable/Reusable23:45 - Ecctrl24:19 - Thank you!
Coastal World Aesthetics | 3D Snippet Wawa Sensei 2024-05-17 | 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 β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Coastal World ποΈcoastalworld.comStarter pack πgithub.com/wass08/r3f-vite-starterLive demo ποΈhttps://wawa-coastal-aesthetics.vercel.app/Final code πgithub.com/wass08/wawa-coastal-aesthetics#threejs #webdevelopment #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ 3D Modelshttps://poly.pizza/m/fG9iP5afr7Uhttps://poly.pizza/m/kKtL4zvS3nHow to use UV Unwrap models for gradient texturesyoutube.com/watch?v=EIxwWGj28_sβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08
React Three Fiber Ultimate Guide - New Shaders Chapter Wawa Sensei 2024-05-10 | Discover the new shaders chapter from my complete course React Three Fiber: The Ultimate Guide to 3D Web Developmentπ Link to the course β¨https://lessons.wawasensei.dev/courses/react-three-fiber/#threejs #shaders #reactthreefiberβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08π» My website : https://www.wawasensei.dev
3D Artists Create my Green Screen Video Background Wawa Sensei 2024-04-18 | I asked 4 Fiverr Creators to make the perfect background for my YouTube videos, I need your help to decide which one I should use!Fiverrgo.fiverr.com/visit/?bta=928411&brand=fiverrcpaUse my promo code WAWASENSEI to get 10% off at the checkout processKatarina profilego.fiverr.com/visit/?bta=928411&brand=fiverrcpa&landingPage=https%253A%252F%252Fwww.fiverr.com%252Fkatarina1928%252Fmake-an-amazing-background-for-your-twitch-youtube-vtube-streamRventima profilego.fiverr.com/visit/?bta=928411&brand=fiverrcpa&landingPage=https%253A%252F%252Fwww.fiverr.com%252Frventima%252Fmake-backgrounds-in-blender-and-intermedium-photoshop-editsThinhnv profilego.fiverr.com/visit/?bta=928411&brand=fiverrcpa&landingPage=https%253A%252F%252Fwww.fiverr.com%252Fcatbg_art%252Fcreate-animated-background-for-live-streamZaman profilego.fiverr.com/visit/?bta=928411&brand=fiverrcpa&landingPage=https%253A%252F%252Fwww.fiverr.com%252Fzamanmahbub%252F3d-render-youtube-video-backdrop-interior-scene-greenscreenπ Learn React Three Fiber with my complete course β¨https://lessons.wawasensei.dev/courses/react-three-fiber/#fiverr #greenscreenβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08π» My website : https://www.wawasensei.dev
Make a Fall Guys Clone for Discord Activity w/ Playroom Wawa Sensei 2024-04-12 | 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 β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Play Wawa Guys πΉοΈwawaguys.playroom.ggStarter code πgithub.com/wass08/wawa-guys-starterFinal code πgithub.com/wass08/wawa-guys-final#threejs #gamedev #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Discord Activitydiscord.com/build/embedded-app-sdkPlayroom Discord Kitjoinplayroom.com/discordHost your gamedev.playroom.ggAsk Playroom for helpdiscord.gg/tEPbGnyfGvβ¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 - Intro01:23 - Starter Pack02:27 - Game arena05:49 - Install Playroom Kit06:42 - Game State Logic14:32 - Physics & Player Controller23:20 - Network RPC Events26:44 - Camera Follow27:34 - Synced Character Animations29:04 - Winner Logic33:15 - Player name34:49 - Setup / Host on Playroom35:54 - Setup Discord application40:34 - Final touch43:30 - Final result44:10 - Thank you!β¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08π» My website : https://www.wawasensei.dev
3D Food Delivery App w/ React Native and React three Fiber Wawa Sensei 2024-03-22 | 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 β¨https://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 modelsketchfab.com/3d-models/sandwich-assembly-2ee0a6ea4b7547ad9ced7ec5aade37c9Download Android Studiodeveloper.android.com/studioReact Three Fiber React Native documentationhttps://docs.pmnd.rs/react-three-fiber/getting-started/installationExpo Metro Confighttps://docs.expo.dev/guides/customizing-metro/Convert font to Typeface.jsgero3.github.io/facetype.jsZustand Librarygithub.com/pmndrs/zustandReact Springhttps://docs.pmnd.rs/react-three-fiber/tutorials/using-with-react-springβ¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 - Intro01:03 - Create React Native App04:13 - React Three Fiber Native09:18 - Zustand State Management12:25 - 3D Sandwich Ingredients17:45 - Scroll views & Touchable Opacity26:39 - Animations & Final Touch31:10 - Final result31:24 - See you soonβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08π» My website : https://www.wawasensei.dev
Build a 3D AI Teacher w/ Next.js, ChatGPT & Azure Wawa Sensei 2024-03-08 | 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.Fiverrgo.fiverr.com/visit/?bta=928411&brand=fiverrcpaUse my promo code WAWASENSEI to get 10% off at the checkout process3D Character Designers:Beeapoo go.fiverr.com/visit/?bta=928411&brand=fiverrcpa&landingPage=https%3A%2F%2Fwww.fiverr.com%2Fbeeapo%2Fcreate-3d-model-character-and-avatar-for-animation-and-gamesSahasub go.fiverr.com/visit/?bta=928411&brand=fiverrcpa&landingPage=https%3A%2F%2Fwww.fiverr.com%2Fmazata%2Flow-poly-model-for-3d-printing-and-more3D Classroom Designers:Remigiuszgo.fiverr.com/visit/?bta=928411&brand=fiverrcpa&landingPage=https%3A%2F%2Fwww.fiverr.com%2Frevi_3d%2Fcreate-realistic-or-low-poly-3d-scene-on-your-needsAdityiago.fiverr.com/visit/?bta=928411&brand=fiverrcpa&landingPage=https%3A%2F%2Fwww.fiverr.com%2Fartramp3d%2Fcreate-various-3d-models-for-youDeploy the project on Elestioelest.ioπ Learn React Three Fiber with my complete course β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Final code πgithub.com/wass08/r3f-ai-language-teacher#threejs #chatbot #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ OpenAI API Keyplatform.openai.com/signupNextJS Getting Startednextjs.org/docs/getting-started/installationAzure API Keyazure.microsoft.com/en-us/free Azure Speech SDKlearn.microsoft.com/en-us/azure/ai-services/speech-service/quickstarts/setup-platform?pivots=programming-language-javascript&tabs=macos%2Cubuntu%2Cdotnetcli%2Cdotnet%2Cjre%2Cmaven%2Cnodejs%2Cmac%2CpypiVirtual Girlfriend Tutorialyoutube.com/watch?v=EzzcEL_1o9oMixamo Animationsmixamo.comβ¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 - Intro00:43 - Custom 3D models with Fiverr02:30 - Next.js Project03:28 - React Three Fiber w/ Next.js08:44 - OpenAI14:22 - Azure Speech SDK19:27 - Zustand State Management25:15 - 3D Html UI32:47 - Visemes & MorphTargets35:42 - Teacher animations37:54 - Final polish42:25 - Deploy to production44:34 - Final result45:40 - γγγγ¨γβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08π» My website : https://www.wawasensei.dev
Build a Multiplayer Game Lobby with R3F & Playroom Wawa Sensei 2024-03-01 | Let's learn how to make a 3D Multiplayer Car Game with JavaScript with React Three Fiber and PlayroomPlayroom Documentationdocs.joinplayroom.comπ Learn React Three Fiber with my complete course β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Starter pack πgithub.com/wass08/r3f-vite-starterFinal code πgithub.com/wass08/r3f-playroom-lobby-car-prototypeDemo π https://r3f-playroom-lobby-car-prototype.vercel.app/#threejs #developer #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ 3D Models: Kenney Car Kithttps://www.kenney.nl/assets/car-kit3D Models: Kay Lousberg City Builder Bitskaylousberg.itch.io/city-builder-bitsToolbox https://poly.pizza/m/bNqhcgTSc_EToolbox2 https://poly.pizza/m/20JcnkCnbAcWorkbench https://poly.pizza/m/24I9X8aeWTRCone https://poly.pizza/m/WoXpAJT0oDnTires https://poly.pizza/m/mmq7GmG1AKShelf https://poly.pizza/m/6gKdASmfB9UAudio Soundbanksoundeffect-lab.info/sound/machine/machine2.htmlGenerate Images With AIapp.leonardo.aiβ¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 - Intro01:23 - Project setup01:55 - Lobby 3D scene07:48 - Custom Playroom Lobby10:21 - Responsive Camera13:58 - Car selection23:28 - Username editor27:21 - Car switching animation30:37 - Light & Camera dynamism31:48 - Invite button33:03 - Private game & matchmaking37:35 - Game city map39:16 - Physics World w/ Rapier40:46 - Multiplayer car controller48:53 - Mobile development mode50:40 - γγγγ¨γβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08π» My website : https://www.wawasensei.dev
Lets Fix Your React Three Fiber Projects Wawa Sensei 2024-02-09 | 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 β¨https://lessons.wawasensei.dev/courses/react-three-fiber/3D Responsive Tutorialyoutube.com/playlist?list=PLpepLKamtPjguLKYT7c66998iTaWvqSReAI Virtual Girlfriend Chatbot Tutorialyoutu.be/EzzcEL_1o9o#threejs #developer #reactthreefiberβ¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 - Intro01:19 - Mixamo animations rotation issue04:41 - Ready Player Me disappearing eyes and hair06:27 - How to setup the AI virtual girlfriend project09:46 - Thank youβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08π» My website : https://www.wawasensei.dev
Build a Multiplayer Card Game w/ React Three Fiber & Playroom Stream Mode Wawa Sensei 2024-01-26 | Let's learn how to make a 3D Multiplayer Card Game with JavaScript w/ React Three Fiber and Playroom Stream modePlayroom Stream Mode feature documentation docs.joinplayroom.com/multiplayer/streamπ Learn React Three Fiber with my complete course β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Starter pack πgithub.com/wass08/r3f-vite-starterFinal code πgithub.com/wass08/r3f-multiplayer-pirate-card-gameDemo π https://r3f-multiplayer-pirate-card-game.vercel.app/#threejs #developer #reactthreefiberβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Generate Cards with AIapp.leonardo.aiQuaternius Pirate Kit (3D Assets)quaternius.com/packs/piratekit.htmlAudio librarysoundeffect-lab.infoyoutube.com/audiolibraryCreate Schemaexcalidraw.comβ¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 - Intro01:44 - Project Setup02:18 - Game Engine Explanation04:59 - useGameEngine07:11 - Playroom Multiplayer State10:55 - Multiplayer Game Logic25:29 - User Interface32:01 - Learn React Three Fiber32:20 - 3D AI Generated Cards40:14 - Player Avatars43:51 - Mobile Controllers53:33 - Playroom Stream Mode55:43 - Streamer Gameboard01:00:42 - Player01:05:06 - SFX01:08:23 - Final Result01:09:37 - Thank youβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08π» My website : https://www.wawasensei.dev
Building a 3D TikTok Live Game with React Three Fiber & Playroom Wawa Sensei 2023-12-22 | 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 β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Starter pack πgithub.com/wass08/r3f-vite-starterFinal code πgithub.com/wass08/r3f-tiktok-christmasDemo π (use "test" as username)https://r3f-tiktok-christmas.vercel.app/#threejs #developer #tiktoklivegameβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ 3D Assets- https://poly.pizza/u/Polygonal Mind- https://poly.pizza/m/KtbHdsr07s- https://poly.pizza/m/LVg3ynJDxa- https://poly.pizza/m/bydgit--BYd- https://poly.pizza/m/1oeJ9IH1igP- kaylousberg.itch.io/halloween-bitsβ¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 - Intro00:58 - Project setup01:35 - Loading and animating characters09:36 - useGame hook19:31 - Infinite background animation22:35 - Playroom integration26:05 - Tailwind UI 30:44 - Handle Tiktok events37:13 - Leaderboard42:53 - Timer and game over47:40 - Graves49:53 - Tiktok live test session53:06 - Bloom & Explosion59:49 - Real Tiktok live game session01:00:38 - Merry Christmas πβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08π» My website : https://www.wawasensei.dev
Step-by-Step Guide to Mesmerizing 3D Text with React Three Fiber Wawa Sensei 2023-12-15 | 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 π visme.co/form-builder/?ref=wawasenseiIn this project-based tutorial, we will cover the following:- RenderTexture- ReflectorMaterial- Postprocessing- CameraControls- Responsiveπ Learn React Three Fiber with my complete course β¨https://lessons.wawasensei.dev/courses/react-three-fiber/Starter pack πgithub.com/wass08/r3f-vite-starterFinal code πgithub.com/wass08/r3f-3d-text-effectDemo πhttps://r3f-3d-text-effect.vercel.app/#threejs #developer #3Dtextβ¬β¬β¬β¬β¬β¬ Useful L I N K S π β¬β¬β¬β¬β¬β¬ Camping Asset Collection by Alex Safayanhttps://poly.pizza/m/3nj59_uuCbMCamera Controls Documentationgithub.com/yomotsu/camera-controlsβ¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 - Intro00:31 - Visme Forms01:50 - Starter Pack02:31 - Custom font text04:47 - 3D Assets07:29 - Camera Animations09:38 - Reflecting floor10:38 - Render content in text12:20 - Bloom effect14:12 - Responsive camera17:20 - Preload18:25 - Tailwind UI21:19 - Camera Transition23:58 - 3D Html elements26:55 - Conclusionβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08π» My website : https://www.wawasensei.dev
How to Create Shader Transitions with React Three Fiber and Lygia Wawa Sensei 2023-12-08 | Let's learn how to create transitions between 3D scenes with Three.js and React Three Fiber using Shaders and Lygia libraryIn 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:https://lessons.wawasensei.dev/courses/react-three-fiber/lessons/render-targetLearn Shaders:youtu.be/e2ntx-fyXaEPart 1 video:youtu.be/aFkU3AcwyKEStarter pack πgithub.com/wass08/r3f-scene-transition-starterFinal code πgithub.com/wass08/r3f-scene-transition-finalModern Kitchen 3D Modelsketchfab.com/3d-models/modern-kitchen-9843a830b96142a9a53f45f25304d93c#threejs #lygia #r3fβ¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 - Intro00:21 - Starter project01:16 - Organizing parameters04:23 - Shader code adjustments06:36 - Repeat07:57 - Lygia11:41 - Refactoring13:29 - New transitions14:54 - Smoothness21:27 - Final result21:39 - Thank you!β¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08π» My website : https://www.wawasensei.dev
How to Create Scene Transitions with React Three Fiber Wawa Sensei 2023-12-01 | Let's learn how to create transitions between 3D scenes with Three.js and React Three FiberIn 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:https://lessons.wawasensei.dev/courses/react-three-fiber/lessons/render-targetLearn Shaders:youtu.be/e2ntx-fyXaEPart2:youtu.be/aFkU3AcwyKEStarter pack πgithub.com/wass08/r3f-scene-transition-starterModern Kitchen 3D Modelsketchfab.com/3d-models/modern-kitchen-9843a830b96142a9a53f45f25304d93c#threejs #javascript #r3fβ¬β¬β¬β¬β¬β¬ T I M E S T A M P S β° β¬β¬β¬β¬β¬β¬00:00 - Intro01:02 - Starter project04:00 - Render target explanation06:24 - Different scenes08:09 - Model preparation09:58 - Render target11:14 - Custom shader transition13:51 - Final result14:17 - Thank you!β¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08π» My website : https://www.wawasensei.dev
React Three Fiber Black Friday 3D Escape Game Wawa Sensei 2023-11-24 | Solve this mini 3D escape room game to get 42% OFF on React Three Fiber: The Ultimate Guide to 3D Web Development. π https://escape.wawasensei.dev/β‘οΈ Only this (Black) Friday, November 24th.Presentation of the coursehttps://lessons.wawasensei.dev/courses/react-three-fiberRender Target lesson free previewhttps://lessons.wawasensei.dev/courses/react-three-fiber/lessons/render-targetIt's the perfect time to learn how to build 3D websites and games with Three.js and React Three Fiber with my project-based course π#threejs #r3f #escapegameβ¬β¬β¬β¬β¬β¬ Support the channel π β¬β¬β¬β¬β¬β¬ Become a member to get access to awesome perks:youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/joinβ¬β¬β¬β¬β¬β¬ Connect with me π β¬β¬β¬β¬β¬β¬ π» The Discord Communitydiscord.gg/2wBhwchcWuπΈ Instagram : instagram.com/wawa.senseiπ Facebook :facebook.com/wawasenseiytπ¦Twitter : twitter.com/wawasenseiπ¦TikTok : tiktok.com/@wawasensei08π» My website : https://www.wawasensei.dev
