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

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-...

Demo 🔗
https://vrm.wawasensei.dev/

Starter code 🔗
https://github.com/wass08/r3f-vrm-sta...

Final code 🔗
https://github.com/wass08/r3f-vrm-final

#threejs #reactjs #reactthreefiber

▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬

Pixiv ThreeVRM
https://github.com/pixiv/three-vrm

VRoid Hub
https://hub.vroid.com/en

VRoid Studio
https://vroid.com/en/studio

Mixamo
https://www.mixamo.com/

Kalidokit
https://github.com/yeemachine/kalidokit

Mediapipe Holistic
https://ai.google.dev/edge/mediapipe/...

React Three Fiber
https://r3f.docs.pmnd.rs/getting-star...

Threejs
https://threejs.org/


▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬

Become a member to get access to awesome perks:
   / @wawasensei  

▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬

💻 The Discord Community
  / discord  

📸 Instagram :
  / wawa.sensei  

🎎 Facebook :
  / wawasenseiyt  

🐦Twitter :
  / wawasensei  

🐦TikTok :
  / wawasensei08  


▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬

00:00:00 Introduction
00:01:31 What is a VRM
00:02:05 Starter Pack
00:03:02 Find VRM models
00:04:18 Load VRM with Three.js
00:08:31 Facial Expressions / MorphTargets
00:14:10 Play animations
00:20:39 Mediapipe face and pose tracking
00:24:23 Apply results to VRM with Kalidokit
00:30:16 Conclusion


▬▬▬▬▬▬ CREDITS ▬▬▬▬▬▬
Song: Blue Boi
Composer: Lakey Inspired
Website:    / lakeyinspired  
License: Creative Commons (BY-NC 3.0) https://creativecommons.org/licenses/...
Music powered by BreakingCopyright: https://breakingcopyright.com