Learn how to build a dynamic minimap that follows your character using Three.js and React Three Fiber (R3F) with the Drei View component! 🗺️

In this tutorial, we’ll cover setting up a minimap in your 3D scene, integrating it with React Three Fiber, and using Drei’s View component. We'll implement it on the final project of the 3rd person controller tutorial (https://youtu.be/yjpGVIe_Gy8)


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

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

Final code 🔗
https://github.com/wass08/r3f-3rd-person-controller-minimap

Starter code 🔗
https://github.com/wass08/r3f-3rd-person-controller-final

#threejs #js #reactjs

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

View Component from Drei library
https://drei.docs.pmnd.rs/portals/view

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

Threejs
https://threejs.org/


▬▬▬▬▬▬ Support the channel 🙏   ▬▬▬▬▬▬ 

Become a member to get access to awesome perks:
https://www.youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join

▬▬▬▬▬▬ Connect with me 👋   ▬▬▬▬▬▬ 

💻 The Discord Community
https://discord.gg/2wBhwchcWu

📸 Instagram : 
https://instagram.com/wawa.sensei

🎎 Facebook :
https://www.facebook.com/wawasenseiyt

🐦Twitter : 
https://twitter.com/wawasensei

🐦TikTok : 
https://www.tiktok.com/@wawasensei08


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

00:00 Intro
00:47 Third Person Controller
01:27 View Component
06:37 Valtio Proxy State
11:28 Minimap Camera Logic
14:44 Autorotate
16:33 Visual indicators
18:28 Final result
19:44 Conclusion

▬▬▬▬▬▬ CREDITS  ▬▬▬▬▬▬
Song: Blue Boi
Composer: Lakey Inspired
Website: https://www.youtube.com/LakeyInspired
License: Creative Commons (BY-NC 3.0) https://creativecommons.org/licenses/by-nc/3.0/
Music powered by BreakingCopyright: https://breakingcopyright.com

Wawa Sensei

Learn to create an interactive minimap for 3D web games using React Three Fiber's View component. The tutorial covers setting up multiple camera views within a single canvas, implementing global state management with Valtio to sync character position between main scene and minimap, and adding visual elements like character indicators and zoom controls. The minimap displays a top-down view that follows the player character with optional rotation alignment.

How to Create a Minimap in Three.js with React Three Fiber (Drei View)