Back to videos

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

Overview

In this tutorial series, we’ll create an interactive game with React Three Fiber and Three.js, designed to help users learn Japanese characters (Hiragana and Katakana). This step-by-step guide is perfect for developers looking to dive into 3D game development while leveraging the power of React.

Learning Through Interaction

Traditional language learning apps often rely on static flashcards or repetitive exercises. But what if you could make the process more engaging? This tutorial introduces a game-based approach to learning Japanese characters, making memorization fun and interactive.

In this first episode, we’ll lay the groundwork for our game. We’ll set up a physics engine, load 3D models, render Japanese text in 3D, and create a game engine using Zustand for state management.

Insights and Skills

In this tutorial, you’ll learn how to:

• Setting up a 3D scene with React Three Fiber

• Implementing Rapier for physics-based interactions

• Loading and displaying 3D models in a game environment

• Rendering Japanese characters as 3D text

• Managing game state using Zustand

Tech Stack

• React Three Fiber

• Three.js

• Zustand

• Rapier Physics Engine

Code links

• Starter pack 🔗

• Final code 🔗

Resources

• Models 1

• Models 2

• Learn Hiragana

• Learn Katakana

• React Three Fiber documentation

• R3F Drei

#threejs #r3f #react

Need help with this tutorial? Join our Discord community!