How to controll minimap like games?Location and area


I added minimap from the tutorial to my software.:
I use IFC files. need a minimap like games:

I need 3 things:

  1. The current minimap has some problems that in 2d plan view lines do not appear:

2 ) I need to show a red circle as a location that we are in large 3d models in minimap.

like this? How Can I do this?


I mean when I walk in the model in first person mode that red point that is me should change realtime in minimap too.

  1. I need to show the area where I am in the viewport by a red rectangle on the minimap too. I mean when I zoom my camera maybe I lost that where Was I?So this rectangle area can show the place that I am looking at in main map. How can I add this?

Uploading: ce4755f8d02115c62364e9b64cd7bb83d79e4453.jpeg…
Screenshot 2024-06-15 at 2.22.25 PM

There are a couple steps…

After your first render…
You then save off the current render viewport+scissor,
set your minimap viewport+scissor, render the scene and then restore the previous viewport+scissor.

At init time:
let saveViewport = new THREE.Vector4()
let saveScissor = new THREE.Vector4()
let saveScissorTest = false;
let minimapViewport = new THREE.Vector4( 10,10, 100,100 )//x,y,w,h
let miniMapCamera = new THREE.PerspectiveCamera();

//... miniMapCamera is a separate camera that will follow the user and point down...

Then after you do: scene.render(scene,camera)

//Make the minimap Camera follow the player
minimapCamera.position.x = player.position.x;
minimapCamera.position.y = player.position.y+10;
minimapCamera.position.z = player.position.z;

renderer.getViewport( saveViewport )    //Save the viewport and scissor params
renderer.getScissor( saveScissor );
let saveScissorTest = renderer.getScissorTest()

renderer.setViewport( minimapViewport ) //Enable minimap viewport and scissor test
renderer.setScissor( minimapViewport  )

renderer.render( scene, miniMapCamera ); //Render the minimap

renderer.setViewport( saveViewport); //Restore previous viewport and scissor
renderer.setScissor( saveScissor );

What are scissors? Do these 2 main canvas and mini map render and camera are separate from each other?

Yeah they would be 2 separate cameras. Minimap camera is positioned above and pointing down… You’ll have to adjust its position to correspond with where the viewer is positioned.