Загрузка...

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-three-fiber/

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

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

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/solutions/vision/holistic_landmarker

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

Threejs
https://threejs.org/
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬

Become a member to get access to awesome perks:
https://www.youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join

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

💻 The Discord Community
https://discord.gg/2wBhwchcWu

📸 Instagram :
https://instagram.com/wawa.sensei

🎎 Facebook :
https://www.facebook.com/wawasenseiyt

🐦Twitter :
https://twitter.com/wawasensei

🐦TikTok :
https://www.tiktok.com/@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: https://www.youtube.com/LakeyInspired
License: Creative Commons (BY-NC 3.0) https://creativecommons.org/licenses/by-nc/3.0/
Music powered by BreakingCopyright: https://breakingcopyright.com

Видео How to Create a VTuber Studio with Three.js, React & VRM канала Wawa Sensei
threejs three js tutorial threejs tutorial react three fiber react three fiber tutorial three js react three js three.js threejs journey threejs course react three fiber ultimate guide r3f tutorial how to learn r3f how to learn react three fiber learn threejs 3d website tutorial r3f threejs beginner course threejs complete course threejs for beginners mediapipe threejs face recognition threejs vrm threejs vrm react three fiber vrm avatar threejs
Комментарии отсутствуют
Зарегистрируйтесь или войдите с
Информация о видео
25 апреля 2025 г. 13:42:00
00:30:41
Wawa Sensei
Теги
Правообладателям
Жалоба на материал Недопустимый материал Нарушение авторских прав
Комментарии
Поделиться
Другие видео канала

How to Create a Lenticular Material with TSL and WebGPUHow to Create a Lenticular Material with TSL and WebGPU

How to Create Scene Transitions with React Three FiberHow to Create Scene Transitions with React Three Fiber

3D Artists Create my Green Screen Video Background3D Artists Create my Green Screen Video Background

Multiplayer Game Tutorial with R3F & Socket.io: PathfindingMultiplayer Game Tutorial with R3F & Socket.io: Pathfinding

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

How to build a Dapp - Interacting with a smart contract using React and Ethers / useDAppHow to build a Dapp - Interacting with a smart contract using React and Ethers / useDApp

I Had to Cut Real Holes Through 3D Walls - Here's How (Three.js)I Had to Cut Real Holes Through 3D Walls - Here's How (Three.js)

How To Use ChatGPT by OpenAI To Write Better Code?How To Use ChatGPT by OpenAI To Write Better Code?

Threejs & React Avatar Builder Tutorial - Part 4: Color PickerThreejs & React Avatar Builder Tutorial - Part 4: Color Picker

Grid Placement is Easy - Walls and Ceilings? Here's What It Took (Three.js)Grid Placement is Easy - Walls and Ceilings? Here's What It Took (Three.js)

Threejs & React Avatar Builder Tutorial - Part 7: Post ProcessingThreejs & React Avatar Builder Tutorial - Part 7: Post Processing

How to Create Shader Transitions with React Three Fiber and LygiaHow to Create Shader Transitions with React Three Fiber and Lygia

React Tailwind CSS Tutorial - Introduction, Basics & Responsive DesignReact Tailwind CSS Tutorial - Introduction, Basics & Responsive Design

Boids Flocking Simulation with Three.js & ReactBoids Flocking Simulation with Three.js & React

Threejs & React Avatar Builder Tutorial - Part 5: Asset CreationThreejs & React Avatar Builder Tutorial - Part 5: Asset Creation

Multiplayer Game Tutorial with R3F & Socket.io: ShopMultiplayer Game Tutorial with R3F & Socket.io: Shop

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

How to build a Dapp - Model the Infinity tower with Three.js (React Three Fiber)How to build a Dapp - Model the Infinity tower with Three.js (React Three Fiber)

Three.js 101: How to Build 3D Websites (Ep 4 - Geometries) #threejsThree.js 101: How to Build 3D Websites (Ep 4 - Geometries) #threejs

My $1,700/month Tokyo Furnished Apartment TourMy $1,700/month Tokyo Furnished Apartment Tour

Яндекс.Метрика
© 2008-2026 «Информационно-развлекательный портал города Верхняя Салда»
salda.ws@mail.ru salda_ws Контакты Карта портала Сообщить об ошибке Соглашения Пользовательское соглашение Соглашение о конфиденциальности Согласие на обработку персональных данных Информация для правообладателей Об использовании Cookies
Все заметки Новая заметка Страницу в заметки
Страницу в закладки Мои закладки
На информационно-развлекательном портале SALDA.WS применяются cookie-файлы. Нажимая кнопку Принять, вы подтверждаете свое согласие на их использование.
О CookiesНапомнить позжеПринять