How to Create a 3D game with React Three Fiber: Part 3 - Character animations @WawaSensei
How to Create a 3D game with React Three Fiber: Part 3 - Character animations  @WawaSensei
Uploaded May 2023 | Updated September 2026, 1 week ago
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 🔗
youtu.be/zwNF1-lsia8
youtu.be/2y4QYk6tHQs

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 💙
instagram.com/belyakova.dsn

Get the starter pack for this part here 🔗
github.com/wass08/r3f-kanagame-part-2

#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
github.com/wass08/r3f-kanagame-part-3

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

Mixamo
mixamo.com/#

Rapier Physics
github.com/pmndrs/react-three-rapier

R3F Drei
github.com/pmndrs/drei

Zustand
github.com/pmndrs/zustand

Learn Hiragana
tofugu.com/japanese/learn-hiragana

Learn Katakana
tofugu.com/japanese/learn-katakana

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


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

▬▬▬▬▬▬ 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:
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
How to Create a 3D game with React Three Fiber: Part 3 - Character animationsMy $1,700/month Tokyo Furnished Apartment TourHow to create an amazing profile with GitHub | Customize your Github Profile ReadmeThree.js 101: How to Build 3D Websites (Ep 1 - Introduction) #threejsLets Fix Your React Three Fiber ProjectsReact Three Fiber tutorial - 3D animated Christmas ExperienceBuild a multiplayer game with React Three Fiber and Socket.ioHow to build a Dapp - Model the Infinity tower with Three.js (React Three Fiber)Multiplayer Game Tutorial with R3F & Socket.io: PathfindingHow to Bake Lighting with Blender for Three.jsThreejs & React Avatar Builder Tutorial - Part 7: Post ProcessingReact Three Fiber tutorial - 3D Table Configurator
Wawa Sensei |

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

SHARE TO X SHARE TO REDDIT SHARE TO FACEBOOK WALLPAPER