Create a game with React Three Fiber: Part 1 - Zustand

Let's create a game with threejs and React Three Fiber to learn Japanese characters Hiragana and Katakana.
In this first part, we will build the foundation of our game:

  • Setup Rapier Physics Engine
  • Loading 3D Models
  • Rendering 3D Text (Japanese font)
  • Creating a game engine with Zustand state management library

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

threejs #r3f #react

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

Final source code
https://github.com/wass08/r3f-kanagame-part-1

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

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

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

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

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

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