Using orthographic camera mode with ArcRotateCamera

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:


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.

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 ?

1 Like

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

To use orthographic camera mode was just a guess.

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

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

4 Likes

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
When zooming my models get cut. Is there a way to zoom in in

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:

    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

7 Likes

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

You change the camera position on x axis :slight_smile:

1 Like

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

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

2 Likes

cc @PolygonalSun