2 cameras don't work correctly

Questions
1

Hello! I want to make two cameras (one as FP view and one as minimap). I try to do it like here:
https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Viewports-Minimap.html
Here is my code:
https://jsfiddle.net/suh9Lzrv/1/
But I got not interactive big black screen and small grey. I also included two screens - with and without this part commented:
renderer.setViewport( 10, window.innerHeight - mapHeight - 10, mapWidth, mapHeight );
renderer.render( scene, mapCamera );

What am I doing wrong?%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA %D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA2

PS No errors in console

2

Try it with this example:

https://jsfiddle.net/f2Lommf5/11653/

3

Thx a lot, this helped me. As I understand, there are two key moments:

  1. We should add mapcamera (orthocamera) into the main camera (perspectivecamera) to make a moving mapcamera. If we add mapcamera to the scene, we have a static mapcamera (this is my case, exactly).
  2. renderer.setScissor cuts a “window” for the mapcamera viewport.

I have a next question. Can I skew mapcamera as I drew?

%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA3

4

I’m not sure I understand. What do you mean with “skew”? Can you please elaborate a bit?

5

I mean I want the map to “lay on the ground”. Like you hold a paper map horizontally in your hands.

6

Can’t you achieve your desired effect with a perspective camera?

7

I think not. Anyway, I want a topview with labels “sides of the world” and with moving pointer of the player. This topview should “lay on the ground”. If it is not possible to skew the mapcamera viewport to the trapeze, maybe I should make a top-layer trapeze-transformed div with moving pointer and labels?

8

So, I made an overlaying div with css transformation looking like a trapeze. I translate player coords every frame into this div. Background of this div may have a texture of tha map, and the player icon (which is a div, too) may be any pic.