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

Let's learn how to make an AI Language Teacher with Next.js, React Three Fiber, Microsoft Azure Speech SDK, Chat GPT, and custom 3D models made by Fiverr Creators.

Fiverr
https://go.fiverr.com/visit/?bta=9284...
Use my promo code WAWASENSEI to get 10% off at the checkout process

3D Character Designers:
Beeapoo https://go.fiverr.com/visit/?bta=9284...
Sahasub https://go.fiverr.com/visit/?bta=9284...

3D Classroom Designers:
Remigiusz
https://go.fiverr.com/visit/?bta=9284...
Adityia
https://go.fiverr.com/visit/?bta=9284...

Deploy the project on Elestio
https://elest.io/

🚀 Learn React Three Fiber with my complete course ✨
https://lessons.wawasensei.dev/course...

Final code 🔗
https://github.com/wass08/r3f-ai-lang...

#threejs #chatbot #reactthreefiber

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

OpenAI API Key
https://platform.openai.com/signup

NextJS Getting Started
https://nextjs.org/docs/getting-start...

Azure API Key
https://azure.microsoft.com/en-us/free

Azure Speech SDK
https://learn.microsoft.com/en-us/azu...

Virtual Girlfriend Tutorial
   • How to Build a 3D Chatbot with ChatGP...  

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

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

00:00 - Intro
00:43 - Custom 3D models with Fiverr
02:30 - Next.js Project
03:28 - React Three Fiber w/ Next.js
08:44 - OpenAI
14:22 - Azure Speech SDK
19:27 - Zustand State Management
25:15 - 3D Html UI
32:47 - Visemes & MorphTargets
35:42 - Teacher animations
37:54 - Final polish
42:25 - Deploy to production
44:34 - Final result
45:40 - ありがとう



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