Three.js Hud Map

Can we create a three.js Hud map?

Has any three.js project that has created a Hud map for three.js directly from the environment assets?

It would be a cool feature too help players navigate through the environment.

I am looking to add Hud map on:

https://theneoverse.web.app/#threeviewer&&redrock-ridge

or

https://codepen.io/VeinSyct/pen/ogLyypb

you can follow this tutorial How To Make A Minimap In Three.js

otherwise, i tried your app, just a quick comment, why don’t you work with pointerlockcontrols ? i couldn’t rotate around the player (hopefully this helps you during your test)

1 Like

How To Make A Minimap In Three.js is exactly what i need, i am thinking about the pointer lock it would make navigation orientation and looking around much easier on desktop, this started on mobile for android, this is why it inherit touch control methods where u orient the character with joy stick then becomes A and D on keyboard. pointer lock would actually makes things easier to look around on desktop.

The mini map is now completed and fully working. It has very minimal impact on overall performance, even during movement and camera updates. I’ve attached a video above to show the current state and how it behaves in real time. Moving forward, I’m considering pointer lock as the next improvement to make desktop navigation and camera control feel more natural compared to the inherited mobile-style controls.

1 Like