Minimap with functionality

Hi again,

I have another challenge that I’m facing. We want to improve our virtual tour functionality on this page:

As you can see if you activate the Virtual Tour view mode we created a svg minimap of the floor. What I’m trying to achieve is to swap out the svg with a real minimap of the current floor.
I’m using the same technique from here to create the minimap:

What I’m struggling with:

  1. The background of the minimap, I want it to be transparent on the minimap camera, but keep it on the main camera
  2. Recreating the move to click on the new minimap
  3. Recreating the current position and the view angle on the new minimap

Can you help me with these issues?


1 Like

Adding @Cedric to provide guidance

for 1 and 2, I don’t know yet! I can try things and I’ll you know if I find something.
Basically, for 1, maybe create a mesh with transparency or create a new scene.
for 3 I have more ideas: Get the camera view direction, set the Y component to 0 and normalize it. You will have the direction on X/Z axis. With a Math.atan2(z, x), you will get the angle. Append a quad with the rotation ontop of the minimap and that should be it. I can try to do a PG.

here is a quick test with viewport, it solves point 1.

minimap | Babylon.js Playground

For point2, you can test raypicking, it should work with the minimap too.
Mesh Picking | Babylon.js Documentation

I’m trying to do 3 now


And with a box for the camera position in the minimap!

minimap | Babylon.js Playground