Lip Sync - React Three Fiber Tutorial

Published: 01 January 1970
on channel: Wawa Sensei

33,488

837

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

We'll discover the concept of MorphTargets and Visemes

Live demo
https://r3f-lipsync-tutorial.vercel.app/

Get the starter pack here 🔗
https://github.com/wass08/r3f-vite-st...

Final Code
https://github.com/wass08/r3f-lipsync...

#threejs #r3f #lipsync

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

My complete course to learn React Three Fiber
https://lessons.wawasensei.dev/

Rhubarb LipSync
https://github.com/DanielSWolf/rhubar...

Ready Player Me
https://readyplayer.me/

And the documentation
https://docs.readyplayer.me/ready-pla...

Convert MP3 to OGG
https://convertio.co/mp3-ogg/

Eleven Labs (TTS)
https://elevenlabs.io/speech-synthesis

Mixamo Animations
https://www.mixamo.com/#/

LeonardoAI
https://leonardo.ai/

React Three Fiber documentation
https://docs.pmnd.rs/react-three-fibe...

R3F Drei
https://github.com/pmndrs/drei

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

00:00 - Intro
00:31 - Starter Pack
01:01 - 3D Avatar
03:27 - AI Background
04:45 - Mixamo Animations
06:57 - Attach animations
11:04 - Text to Speech
12:37 - Generate lip sync
15:35 - Play audio
17:38 - Morph Targets
21:37 - Play lip sync
24:38 - Visemes
27:46 - Polish
28:46 - Final Result
28:55 - Thank You

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

💻 My website :
https://www.wawasensei.dev

Watch video Lip Sync - React Three Fiber Tutorial online without registration, duration hours minute second in high quality. This video was added by user Wawa Sensei 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 33,488 once and liked it 837 people.

18,442

174

00:00:00