Uploaded December 2024 | Updated September 2026, 1 week ago

---

Discover how to build a VR/AR music game with three.js & React Three Fiber in this Devlog format tutorial.

🚀 Learn React Three Fiber with the Ultimate Guide to 3D Web Development ✨
https://wawasensei.dev/courses/react-three-fiber/

Demo 🔗
https://wawataiko.wawasensei.dev/

Final code 🔗
github.com/wass08/wawataiko-xr-game

#threejs #reactjs #reactthreefiber

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

React Three Fiber
https://r3f.docs.pmnd.rs/getting-started/introduction

React XR
github.com/pmndrs/xr

UIKit
github.com/pmndrs/uikit

SimpleBake
blendermarket.com/products/simplebake---simple-pbr-and-other-baking-in-blender-2

Tonejs
github.com/Tonejs/Midi

▬▬▬▬▬▬ 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


▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬

00:00:00 Introduction
00:00:58 Scene creation
00:02:26 Instruments & Ambient Occlusion
00:04:42 Positional Audio
00:09:20 VR/AR Development
00:12:33 UIKit
00:16:14 Midi file format
00:19:33 Notes movement logic
00:21:20 Score calculation logic
00:23:31 Performance
00:24:20 Animations & Particles
00:28:45 Open-Source
00:29:17 VR Game Session
00:30:56 Conclusion