Uploaded July 2023 | Updated September 2026, 2 weeks ago

---

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 🔗
github.com/wass08/r3f-vite-starter

Final Code
github.com/wass08/r3f-lipsync-tutorial

#threejs #r3f #lipsync

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

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

Rhubarb LipSync
github.com/DanielSWolf/rhubarb-lip-sync

Ready Player Me
readyplayer.me

And the documentation
docs.readyplayer.me/ready-player-me/api-reference/rest-api/avatars/get-3d-avatars#examples-7

Convert MP3 to OGG
convertio.co/mp3-ogg

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

Mixamo Animations
mixamo.com/#

LeonardoAI
leonardo.ai

React Three Fiber documentation
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

R3F Drei
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:
youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join

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

💻 The Discord Community
discord.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