# 2 cameras don't work correctly

**URL:** <https://discourse.threejs.org/t/2-cameras-dont-work-correctly/3802>\
**Category:** Questions\
**Tags:** camera\
**Created:** [August 16, 2018, 5:54am UTC](https://discourse.threejs.org/t/2-cameras-dont-work-correctly/3802 "2018-08-16T05:54:24Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![1115](https://avatars.discourse-cdn.com/v4/letter/1/9f8e36/32.png) [@1115](https://discourse.threejs.org/u/1115)\
**Post date:** [August 16, 2018, 5:54am UTC](https://discourse.threejs.org/t/2-cameras-dont-work-correctly/3802/1 "2018-08-16T05:54:24Z")

</div>

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](https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Viewports-Minimap.html)  
Here is my code:  
[https://jsfiddle.net/suh9Lzrv/1/](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](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/1/1c4a7b05ad6a435402863b65bd63b01c83a8ae9d.png) ![%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA2](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/d/d26695d8ed6b7d7eaed032b436c9d9095b3942ca.png)

PS No errors in console

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 16, 2018, 8:43am UTC](https://discourse.threejs.org/t/2-cameras-dont-work-correctly/3802/2 "2018-08-16T08:43:12Z")

</div>

Try it with this example:

[https://jsfiddle.net/f2Lommf5/11653/](https://jsfiddle.net/f2Lommf5/11653/)

---

<div class="post-metadata">

**Author:** ![1115](https://avatars.discourse-cdn.com/v4/letter/1/9f8e36/32.png) [@1115](https://discourse.threejs.org/u/1115)\
**Post date:** [August 16, 2018, 11:53am UTC](https://discourse.threejs.org/t/2-cameras-dont-work-correctly/3802/3 "2018-08-16T11:53:41Z")

</div>

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](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/4/4a5a92b7f97743bfde373ac8cf8030c3e782caee.png)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 16, 2018, 12:25pm UTC](https://discourse.threejs.org/t/2-cameras-dont-work-correctly/3802/4 "2018-08-16T12:25:12Z")

</div>

> [@1115](#):
>
> I have a next question. Can I skew mapcamera as I drew?

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

---

<div class="post-metadata">

**Author:** ![1115](https://avatars.discourse-cdn.com/v4/letter/1/9f8e36/32.png) [@1115](https://discourse.threejs.org/u/1115)\
**Post date:** [August 16, 2018, 12:32pm UTC](https://discourse.threejs.org/t/2-cameras-dont-work-correctly/3802/5 "2018-08-16T12:32:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 16, 2018, 12:43pm UTC](https://discourse.threejs.org/t/2-cameras-dont-work-correctly/3802/6 "2018-08-16T12:43:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![1115](https://avatars.discourse-cdn.com/v4/letter/1/9f8e36/32.png) [@1115](https://discourse.threejs.org/u/1115)\
**Post date:** [August 20, 2018, 1:30pm UTC](https://discourse.threejs.org/t/2-cameras-dont-work-correctly/3802/7 "2018-08-20T13:30:55Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![1115](https://avatars.discourse-cdn.com/v4/letter/1/9f8e36/32.png) [@1115](https://discourse.threejs.org/u/1115)\
**Post date:** [September 3, 2018, 7:27am UTC](https://discourse.threejs.org/t/2-cameras-dont-work-correctly/3802/8 "2018-09-03T07:27:18Z")

</div>

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.