1

How do you make a mini-cam or mini-map using three.js?

Two camera views. One mini-map "mini-cam" - top right corner (see image below), and the main camera view should span the rest of the scene (the rest, without the border in image below).

N.B. This actually can't quite be done via the viewport method, as the scene shouldn't be cropped off by the x-dimensionality, but should stretch out.

enter image description here

ina
  • 17,912
  • 37
  • 113
  • 187
  • See [this](http://stackoverflow.com/questions/16226693/three-js-show-world-coordinate-axes-in-corner-of-scene) related question and answer. – WestLangley Oct 18 '13 at 13:29
  • After some experimentation, I think I understand your statement about the viewport method not working; it does appear to fail in some circumstances, such as using postprocessing together with an orthogonal camera. I suspect this could be a bug, and I've opened an issue at https://github.com/mrdoob/three.js/issues/4053. In the meantime, do you have live code posted somewhere to illustrate how the viewport method fails in your project? – Lee Stemkoski Nov 01 '13 at 20:36

2 Answers2

1

I have created a working example of a scene together with a minimap at:

http://stemkoski.github.io/Three.js/Viewports-Minimap.html

I don't understand your N.B. about not able to be done using viewports; as you'll see in the code at the website posted above, if you use for example an orthogonal camera positioned above the scene, you can set the left/right/top/bottom values so that the entire scene is included in your render, you just have to be careful about the height-to-width ratio so that your scene doesn't appear stretched.

On the other hand, if you're looking to go to the render-to-texture route, I have a relevant example at http://stemkoski.github.io/Three.js/Camera-Texture.html but as yaku mentioned in his response, you will have to update the position of the plane mesh so that it follows both the camera position (offset by some amount) and also rotation so that it always faces the camera. Due to the more complex nature of this approach, I really recommend the viewport method.

Lee Stemkoski
  • 8,138
  • 2
  • 39
  • 58
0

You can make a plane geometry (normal 3D object, and it actually doesn't need to be a plane, any shape goes) representing the minimap, and add it to camera so it follows the camera movement and is always visible.

Then use "Render to Texture" method to render the minimap and slap the texture to the plane "container".

There are render to texture examples around the net, SO, as well as in the Three.js examples folder, those should help get you started with that.

yaku
  • 2,834
  • 2
  • 16
  • 33