Wawa Sensei logo
Back to videos

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

Resources

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

Need help with this tutorial? Join our Discord community!