Preserve scene scale on Orthographic Camera resize

Hi!

I know there is a way for preserving the scene scale when using a PerspectiveCamera as stated in the Faq and showcased in this example.

The question is, how can the same be achieved when using an OrtographicCamera? Is it even possible?

All examples I found preserve the scale only when resizing the width OR the height, but not both.

Thx!

i using this on didisoftwares.ddns.net
and using desired ratio in var ratio = 1440 / 765;
add another ‘IF else’ to width if want crop width

function onWindowResize() {
    var ww = window.innerWidth;
    var hh = window.innerHeight;
    var ratio = 1440 / 765;
    var nww = ww;
    var nhh = Math.round(ww / ratio);
    if (nhh > hh) { 
        nww = ww;
        nhh = hh;
        mainDiv.style.top = '0px';
    } else {
        mainDiv.style.top = Math.round((hh - nhh) / 2) + 'px';
    }
    mainDiv.style.width = nww + 'px';
    mainDiv.style.height = nhh + 'px';
    camera.aspect = nww / nhh;
    camera.updateProjectionMatrix();
    renderer.setSize(nww, nhh);
}

@didi_softwares Have you even read my question?
The title, the tags and the content state crealy that I’m asking the question for an Orthographic Camera.
What you proposed is for a Perspective Camera, and even for that it’s wrong.

I understood, I just showed that by updating the ratio of both the DIV and the renderer you will always have the same aspect without changing the scale

Does this Japanese flag answer your question:

https://codepen.io/boytchev/full/vYMQGWb

image

2 Likes

Thanks so much @PavelBoytchev you know it does :heart_eyes:

Works like a charm, thanks to that I can keep my objects now always at the same ‘size’ no matter the dimensions of the user browser window, which was very important in my use case.

The solution is so simple and makes so much sense with how OrtographicCamera is intended to work… I think the previous calclulations I had, involving the aspect ratio and such, were giving me tunnel vision and I couldn’t see it was so obvious.

1 Like