# Using orthographic camera mode with ArcRotateCamera

**URL:** <https://forum.babylonjs.com/t/using-orthographic-camera-mode-with-arcrotatecamera/12319>\
**Category:** Questions\
**Created:** [July 8, 2020, 10:06am UTC](https://forum.babylonjs.com/t/using-orthographic-camera-mode-with-arcrotatecamera/12319 "2020-07-08T10:06:14Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Browork](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/browork/32/13350_2.png) [@Browork](https://forum.babylonjs.com/u/Browork)\
**Post date:** [July 8, 2020, 10:06am UTC](https://forum.babylonjs.com/t/using-orthographic-camera-mode-with-arcrotatecamera/12319/1 "2020-07-08T10:06:14Z")

</div>

I think I can achieve this with a orthographic camera, but I have problems with it.  
This is what I get with a perspective camera:

 ![grafik](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/8/82a7ef89f5aecb2292b9596af5cf9d2e84d3530b.png)  
[https://www.babylonjs-playground.com/#KUM5WC#23](https://www.babylonjs-playground.com/#KUM5WC#23)

How can I achieve it that the hole takes the hole height of the main plate?  
Like in a technical drawing I want to be able to see if the hole takes the whole height or not.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [July 8, 2020, 1:20pm UTC](https://forum.babylonjs.com/t/using-orthographic-camera-mode-with-arcrotatecamera/12319/2 "2020-07-08T13:20:08Z")

</div>

With an orthographic camera you are able to control all the different position left bottom top right so it should not be an issue ?

Could you share a playground with the ortho cam reproducing your issue ?

---

<div class="post-metadata">

**Author:** ![Browork](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/browork/32/13350_2.png) [@Browork](https://forum.babylonjs.com/u/Browork)\
**Post date:** [July 8, 2020, 1:23pm UTC](https://forum.babylonjs.com/t/using-orthographic-camera-mode-with-arcrotatecamera/12319/3 "2020-07-08T13:23:23Z")

</div>

[https://www.babylonjs-playground.com/#KUM5WC#24](https://www.babylonjs-playground.com/#KUM5WC#24)  
It was commented out in line 7.  
What I would like to see is something like this: the hole should be on the complete height of the plate, since the hole is going through the complete plate

 ![grafik](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/f/f2d423caafbafc01cf497e9a48ed5ca9d75081cb.png)

To use orthographic camera mode was just a guess.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [July 8, 2020, 1:39pm UTC](https://forum.babylonjs.com/t/using-orthographic-camera-mode-with-arcrotatecamera/12319/4 "2020-07-08T13:39:46Z")

</div>

Yup ortho might do if it is what you are looking for. You will need to change:  
camera.orthoTop = 2;  
camera.orthoBottom = -2;  
camera.orthoLeft = -2;  
camera.orthoRight = 2;

to fit with your scene: [https://www.babylonjs-playground.com/#KUM5WC#25](https://www.babylonjs-playground.com/#KUM5WC#25)

You could also compute the exact radius needed to fit your object vertically like : [javascript - Calculate camera zoom required for object to fit in screen height - Stack Overflow](https://stackoverflow.com/questions/20059612/calculate-camera-zoom-required-for-object-to-fit-in-screen-height)

---

<div class="post-metadata">

**Author:** ![Browork](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/browork/32/13350_2.png) [@Browork](https://forum.babylonjs.com/u/Browork)\
**Post date:** [July 8, 2020, 2:13pm UTC](https://forum.babylonjs.com/t/using-orthographic-camera-mode-with-arcrotatecamera/12319/5 "2020-07-08T14:13:37Z")

</div>

What I’m looking for is kinda like the camera handling in blender, where you have orthographic side views and a moving perspective camera.  
[https://www.babylonjs-playground.com/#KUM5WC#26](https://www.babylonjs-playground.com/#KUM5WC#26)  
When zooming my models get cut. Is there a way to zoom in in

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 8, 2020, 2:26pm UTC](https://forum.babylonjs.com/t/using-orthographic-camera-mode-with-arcrotatecamera/12319/6 "2020-07-08T14:26:45Z")

</div>

An orthographic camera does not behave like a perspective one. When you zoom you are not getting the camera closer as the position is defined by the orthoXXX properties

I would recommend to disable the radius control (inherited from the arcrotatedirectly) and instead do your own changes when zooming:  
`camera.inputs.attached.mousewheel.detachControl(canvas)`

something like that:

```auto
    var zoomScale = 1;
    scene.onPointerObservable.add(p => {
        var event = p.event;
        let wheelDelta = 0;

        if (event.wheelDelta) {
            wheelDelta = event.wheelDelta;
        } else {
            wheelDelta = -(event.deltaY || event.detail) * 60;
        }

        zoomScale += wheelDelta / 5000;
        
        camera.orthoTop = 100 * zoomScale;
        camera.orthoBottom = -100 * zoomScale;
        camera.orthoLeft = -100 * zoomScale;
        camera.orthoRight = 100 * zoomScale;
    }, BABYLON.PointerEventTypes.POINTERWHEEL);

```

Demo: [https://www.babylonjs-playground.com/#KUM5WC#27](https://www.babylonjs-playground.com/#KUM5WC#27)

---

<div class="post-metadata">

**Author:** ![Browork](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/browork/32/13350_2.png) [@Browork](https://forum.babylonjs.com/u/Browork)\
**Post date:** [July 8, 2020, 2:39pm UTC](https://forum.babylonjs.com/t/using-orthographic-camera-mode-with-arcrotatecamera/12319/7 "2020-07-08T14:39:55Z")

</div>

That works really nice !  
How would I “move” the camera for example in x direction?

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 9, 2020, 4:35pm UTC](https://forum.babylonjs.com/t/using-orthographic-camera-mode-with-arcrotatecamera/12319/8 "2020-07-09T16:35:35Z")

</div>

You change the camera position on x axis 🙂

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [September 8, 2022, 1:43am UTC](https://forum.babylonjs.com/t/using-orthographic-camera-mode-with-arcrotatecamera/12319/9 "2022-09-08T01:43:08Z")

</div>

Is there an example of how to do this in Babylon Native with pinch gesture?

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [September 8, 2022, 7:38am UTC](https://forum.babylonjs.com/t/using-orthographic-camera-mode-with-arcrotatecamera/12319/10 "2022-09-08T07:38:39Z")

</div>

It was a bit tricky but I got orthographic pinch “zoom” working with Babylon Native.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [September 8, 2022, 4:07pm UTC](https://forum.babylonjs.com/t/using-orthographic-camera-mode-with-arcrotatecamera/12319/11 "2022-09-08T16:07:09Z")

</div>

cc @PolygonalSun
