How to Create a 3D game with React Three Fiber: Part 3 - Character animations

Published: 19 May 2023
on channel: Wawa Sensei

7,901

211

Let's finsh to create our Hiragana and Katakana 3D game with threejs and React Three Fiber

Start by watching the first and second parts of the tutorial here 🔗
   • How to Create a 3D game with React Th...
   • How to Create a 3D game with React Th...

In this final part, we will polish our game:
Adding high-quality 3D assets
Learn how to use 3D animations from Mixamo on our character
Using mesh physical material to create glass bubbles
Fixing loading issues
Improving the UI and 3D visual experience

Thanks to Camilla for her super 3D models 💙
  / belyakova.dsn

Get the starter pack for this part here 🔗
https://github.com/wass08/r3f-kanagam...

#threejs #r3f #react

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

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

Demo
https://r3f-kanagame-part-3.vercel.app/

Final source code
https://github.com/wass08/r3f-kanagam...

Models
https://poly.pizza/
https://market.pmnd.rs/

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

Rapier Physics
https://github.com/pmndrs/react-three...

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

Zustand
https://github.com/pmndrs/zustand

Learn Hiragana
https://www.tofugu.com/japanese/learn...

Learn Katakana
https://www.tofugu.com/japanese/learn...

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

Three.js Journey.
https://threejs-journey.com/
I also have a discount code just for you to get -20%
https://threejs-journey.xyz/join/wawa...

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

00:00 - Intro
00:44 - Fixes
00:55 - 3D Models
02:17 - Lighting & Shadows
03:14 - Glass bubbles
04:13 - Better 2D Text
05:05 - Animated character
08:22 - Camera animation
09:36 - Better menu & loading screen
11:26 - Final result
11:55 - Conclusion

▬▬▬▬▬▬ 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 How to Create a 3D game with React Three Fiber: Part 3 - Character animations online without registration, duration online in high quality. This video was added by user Wawa Sensei 19 May 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 7,901 once and liked it 211 people.

18,442

174

00:00:00