How to Create a 3D 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 🔗
github.com/wass08/r3f-vite-st...
#threejs #r3f #react
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
My complete course to learn React Three Fiber
lessons.wawasensei.dev/
Final source code
github.com/wass08/r3f-kanagam...
Models
poly.pizza/
market.pmnd.rs/
Zustand
github.com/pmndrs/zustand
Learn Hiragana
www.tofugu.com/japanese/learn...
Learn Katakana
www.tofugu.com/japanese/learn...
React Three Fiber documentation
docs.pmnd.rs/react-three-fibe...
R3F Drei
github.com/pmndrs/drei
Three.js Journey.
threejs-journey.com/
I also have a discount code just for you to get -20%
threejs-journey.xyz/join/wawa...
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00 - Japanese characters
00:42 - Setup
01:05 - Basic scene
02:37 - 3D Text
04:09 - Zustand game engine
07:17 - Simple character controller
09:44 - First part progression
▬▬▬▬▬▬ 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 :
www.wawasensei.dev
Пікірлер: 22
This actually is a very unique and innovative way to make a learning game. Well done Wawa
@WawaSensei
Жыл бұрын
Thanks a lot for being present every time 🔥
Really nice work!
@WawaSensei
10 ай бұрын
Thanks a lot! 🙌
Super, French people are always very creative
@WawaSensei
Жыл бұрын
Merciii 🙌
Sugoi 👏 Arigato gozaimasu 👍
@WawaSensei
Жыл бұрын
Yokatta!!! 🙏
OMG! OMG! GRACIAS!!
@WawaSensei
Жыл бұрын
Thank youuu 😊
Oh my gosh, that is so insanely awesome! I tried manually messing with Three Bounding boxes and first trials with Cannon.js and was already close to jumping out of the window. But seeing THIS now changes everything! What an insane simplification! Finalllyyyyy! All the praise to Mister Wawa for such an inspiring demo :)
@WawaSensei
9 ай бұрын
Glad I could help! Very happy that my teaching style resonates with some other developers 🙏
Hi Wawasensei, I'm not able to render Text3D. Can you please help out? This is the error - THREE.WebGLRenderer: Context Lost.
@WawaSensei
11 ай бұрын
Hey, join us on the Discord, we'll help you find the issue 🙏 (link in the description)
супер
@WawaSensei
Жыл бұрын
🙏
Can you please do a FPS game video ❤ or FPS controls
@WawaSensei
Жыл бұрын
Hey! I won't cover it very soon, but I can definitely do it in the coming months!
Bro how I can add button to return please I don't know how 😭😭😭😭😭😭🙏🙏🙏
@WawaSensei
4 ай бұрын
🔘 Here is a button 🙏
Wow this project is awesome 🥲 😭
@WawaSensei
Жыл бұрын
Thank you! Hope it will be 😍