Wawa Sensei Videos

Learn Threejs with React through project-based video tutorials.

📚 Three.js & React Three Fiber Tutorials

Fundamental tutorials teaching you how to master Three.js and React Three Fiber from beginner to advanced levels.

How to Create a VTuber Studio with Three.js, React & VRM

In this tutorial, you'll learn what how to use VRMs with React Three Fiber and use Mediapipe to control an avatar with our webcam.

Easily add VFX to React Three Fiber - Mini Game Tutorial

Learn how to build an axe throwing game with custom VFX using a brand new free npm package I created for React Three Fiber.

Boids Flocking Simulation with Three.js & React

Learn how to build an amazing Boids Flocking Simulation landing page with Three.js and React Three Fiber

Build a 3D Book Slider Landing Page with Three.js & React

Learn how to build an amazing 3D Book Slider landing page with Three.js and React Three Fiber

Let's Fix Your React Three Fiber Projects

Let's dive into the most common issues you face during my React Three Fiber Tutorial and fix them together

How to Create Shader Transitions with React Three Fiber and Lygia (PART 2)

Let's learn how to create transitions between 3D scenes with Three.js and React Three Fiber using Shaders and Lygia library

How to Create Scene Transitions with React Three Fiber

Let's learn how to create transitions between 3D scenes with Three.js and React Three Fiber

6 Techniques to Make Any 3D Website Responsive

Let's learn how to make any 3D website responsive with 6 ready to use techniques.

React Three Fiber Tutorial: How to Apply Images to 3D Objects

Let's learn how to create personalized 3D products such as mugs, t-shirts, bags, or any complex 3D shape by applying image textures.

How to Build a 3D Slideshow with React Three Fiber

Let's learn how to build a 3D Slideshow between 3D scenes using Three.js with React Three Fiber

Dissolve Effect

Let's learn how to build a dissolve shader material to make 3D objects appear and disappear with React Three Fiber and Three.js

Hover Image Transition Effect

Let's learn how to build an amazing transition effect on hover using shaderMaterial with React Three Fiber and Three.js

React Three Fiber Tutorial - Rapier Physics Engine

How to use Rapier Physics Engine with React Three Fiber?

Making our React Three Fiber Scene Looks Better

Let's edit our animated scene to make it look more professional!

Spring animations with React Three Fiber

How to create a custom loading screen progression using threejs with React Three Fiber?

Create a custom Loading Screen with React Free Fiber

How to create a custom loading screen progression using threejs with React Three Fiber?

How to create animated shaders with three.js

Discover what are shaders and how to create custom shader materials

React Three Fiber tutorial - 3D Table Configurator

How to build a 3D product configurator? Together we will build a table configurator using threejs with React Three Fiber.

React Three Fiber tutorial - Scroll Animations

Discover how to load a 3D model and animate it based on the current user scroll.

🤖 3D AI Chatbots with Three.js

Discover how to build interactive 3D AI chatbots that live inside your web scenes using Three.js and React.

Build a 3D AI Teacher w/ Next.js, ChatGPT & Azure

Let's learn how to make a 3D Multiplayer Car Game with JavaScript with React Three Fiber and Playroom

How to Build a 3D Chatbot with ChatGPT & ElevenLabs

Let's learn how to build a 3D Chatbot powered by AI with ChatGPT, ElevenLabs, and ReadyPlayerMe Avatars.

Lip Sync

Let's learn how to add LipSync on Ready Player Me with React Three Fiber and Three.js

🎨 Build a 3D Avatar with Three.js and React

Learn how to create custom 3D avatar builders using Three.js and React Three Fiber.

Build a 3D Avatar Builder with Threejs and React - Full Course

Learn how to build a 3D Avatar Creator with Three.js and React Three Fiber from scratch!

Make a 3D Avatar Builder w/ Threejs and React - Part 7: Post Processing

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

Make a 3D Avatar Builder w/ Threejs and React - Part 6: Camera Controls

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 📸

Make a 3D Avatar Builder w/ Threejs and React - Part 5: Asset Creation

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 👘

Make a 3D Avatar Builder w/ Threejs and React - Part 4: Color Picker

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 🎨

Make a 3D Avatar Builder w/ Threejs and React - Part 3: Composition

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.

Make a 3D Avatar Builder w/ Threejs and React - Part 2: PocketBase

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.

Make a 3D Avatar Builder w/ Threejs and React - Part 1: Project Setup

Learn how to build a professional avatar builder with Three.js and React Three Fiber!

🎮 Multiplayer Game Tutorials with React Three Fiber

Learn to build real-time multiplayer games in 3D using React Three Fiber, Playroom, and WebSockets.

Make a Multiplayer Fall Guys Clone with React Three Fiber

Let's learn how to make a Fall Guys game clone in this React Three Fiber/Three.js Tutorial.

3D Food Delivery App with React Native and React three Fiber

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!

Build a Multiplayer Game Lobby with R3F & Playroom

Let's learn how to make a 3D Multiplayer Car Game with JavaScript with React Three Fiber and Playroom

Build a Multiplayer Card Game w/ React Three Fiber & Playroom Stream Mode

Let's learn how to make a 3D Multiplayer Card Game with JavaScript with React Three Fiber and Playroom Stream mode

Building a 3D TikTok Live Game with React Three Fiber & Playroom

Let's learn how to make a 3D live game for TikTok with Playroom and React Three Fiber! 🎄

Build a 3D Multiplayer Mobile Shooter Game with Playroom and React Three Fiber

Let's learn how to build a 3D Multiplayer Mobile Shooter Game easily with Playroom and React Three Fiber

🖼️ Three.js Portfolio Project

Get inspired and learn by building a professional-grade 3D web portfolio project with Three.js and React Three Fiber.

Build a 3D Portfolio with React Three Fiber - Responsive

Let's focus on responsive with React Three Fiber and three.js

Build a 3D Portfolio with React Three Fiber - Projects Slider

In this final part we will finish building our 3D portfolio with React Three Fiber.

Build a 3D Portfolio with React Three Fiber - Framer Motion Scroll Animations

Time to build the HTML interface and add scroll animations with framer-motion on our 3D portfolio

Build a 3D Portfolio with React Three Fiber - Blender Baking

Let's continue building our 3D portfolio with Three JS and React Three Fiber in the style of David Heckhoff.

Build a 3D Portfolio with React Three Fiber - Avatar animations

Let's build a 3D portfolio with Three JS and React Three Fiber in the style of David Heckhoff.

🌌 Atmos Tutorial — Recreating the Awwwards-Winning Experience

Step-by-step guide to rebuilding the iconic "Atmos" website using Three.js and React Three Fiber.

Reproduce Atmos Awwwards 3D Website with React Three Fiber

The complete tutorial is now live, it includes the four parts and some additional content

Recreating Atmos 3D Website with React Three Fiber: Part 4 - UI & Responsive

Let's finish to reproduce the Atmos website using threejs and React Three Fiber.

Recreating Atmos 3D Website with React Three Fiber: Part 3 - Effects

Let's continue to reproduce the Atmos website using threejs and React Three Fiber.

Recreating Atmos 3D Website with React Three Fiber: Part 2 - Environment Map

Let's contenu to reproduce the Atmos website using threejs and React Three Fiber

Recreating Atmos 3D Website with React Three Fiber: Part 1 - Curved Path

Let's try to reproduce the Atmos website using threejs and React Three Fiber.

🧩 3D Snippets — Quick Lessons for Three.js & R3F

Master 3D concepts fast with small, focused video tutorials covering essentials of Three.js and React Three Fiber.

Fix Loading Model Freezes with Three.js & React

Learn how to optimize your gltf models and textures to get rid of the loading freezes when loading Three.js / React Three Fiber scenes!

Wiggle Bones Threejs Library w/ React Three Fiber

In this 3D Snippet, learn how to use the amazing Wiggle Bones Threejs Library with React Three Fiber

Third Person Controller React Three Fiber Tutorial

In this 3D Snippet, learn how to recreate the stunning Coastal World aesthetics using Three.js, React Three Fiber and Blender.

Coastal World Aesthetics with React Three Fiber

In this 3D Snippet, learn how to recreate the stunning Coastal World aesthetics using Three.js, React Three Fiber and Blender.

🏡 Build an Online Sims-Style Game with Three.js and React

Learn how to create a multiplayer life simulation game inspired by The Sims, using Three.js, React Three Fiber, and Socket.IO.

I Built a Multiplayer Sims Game with Javascript

Welcome to the final episode of our multiplayer Sims-like game with React Three Fiber, Three.js, and Socket.io! 🎉

Three.js Multiplayer Game Tutorial Ready Player Me

Let's add the avatar configurator from Ready Player Me SDK into our online Sims-like multiplayer game

Multiplayer Game Tutorial with R3F & Socket.io: Shop

Let's add the shop feature into our online Sims-like multiplayer game with React Three Fiber and Socket.io

Multiplayer Game Tutorial with R3F & Socket.io: Room Builder

Let's add the room edition feature into our online Sims-like multiplayer game

Multiplayer Game Tutorial with R3F & Socket.io: Pathfinding

Let's add pathfinding movements into our online Sims-like multiplayer game with React Three Fiber and Socket.io

Multiplayer Game Tutorial with R3F & Socket.io: Grid System

Let's continue to build our online Sims-like multiplayer game with React Three Fiber and Socket.io

Build a multiplayer game with React Three Fiber and Socket.io

Let's learn how to use Socket.io to make a multiplayer 3D game with React Three Fiber

🧪 Wawa Lab — 3D Experiments with Three.js & R3F

Follow creative experiments and explorations pushing the limits of Three.js, React Three Fiber, and WebGL/WebGPU

AR/VR Rhythm Game with React Three Fiber

Discover how to build a VR/AR music game with three.js & React Three Fiber in this Devlog format tutorial.

Step-by-Step Guide to Mesmerizing 3D Text with React Three Fiber

Let's learn how to make a shopping landing page with an amazing 3D Text effect with React Three Fiber

Mesh Explosion Effect

Let's learn how to explode 3D meshes with React Three Fiber, Three.js, and Blender Cell fracture addon

Mesh Portal Material

Let's build 3D portal worlds with React Three Fiber and the incredible MeshPortalMaterial from the Drei library!

🎓 Educational 3D Game: Learn Hiragana & Katakana with R3F

Build a fun and interactive 3D platformer game that teaches Japanese Hiragana and Katakana characters.

How to Create a 3D game with React Three Fiber: Part 3 - Character animations

Let's finsh to create our Hiragana and Katakana 3D game with threejs and React Three Fiber

Create a game with React Three Fiber: Part 2 - Collisions & Menu

Let's continue to create our Hiragana and Katakana game with threejs and React Three Fiber

Create a game with React Three Fiber: Part 1 - Zustand

Let's create a game with threejs and React Three Fiber to learn Japanese characters Hiragana and Katakana.