# Preserve scene scale on Orthographic Camera resize

**URL:** <https://discourse.threejs.org/t/preserve-scene-scale-on-orthographic-camera-resize/64304>\
**Category:** Questions\
**Tags:** orthographic-camera, resize\
**Created:** [April 19, 2024, 10:51am UTC](https://discourse.threejs.org/t/preserve-scene-scale-on-orthographic-camera-resize/64304 "2024-04-19T10:51:41Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kikedao](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kikedao/32/26038_2.png) [@kikedao](https://discourse.threejs.org/u/kikedao)\
**Post date:** [April 19, 2024, 10:51am UTC](https://discourse.threejs.org/t/preserve-scene-scale-on-orthographic-camera-resize/64304/1 "2024-04-19T10:51:41Z")

</div>

Hi!

I know there is a way for preserving the scene scale when using a `PerspectiveCamera` as stated in the [Faq](https://threejs.org/docs/#manual/en/introduction/FAQ) and showcased in this [example](https://jsfiddle.net/Q4Jpu/).

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!

---

<div class="post-metadata">

**Author:** ![didi\_softwares](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/didi_softwares/32/22686_2.png) [@didi\_softwares](https://discourse.threejs.org/u/didi_softwares)\
**Post date:** [April 19, 2024, 11:16am UTC](https://discourse.threejs.org/t/preserve-scene-scale-on-orthographic-camera-resize/64304/2 "2024-04-19T11:16:48Z")

</div>

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

```javascript
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);
}

```

---

<div class="post-metadata">

**Author:** ![kikedao](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kikedao/32/26038_2.png) [@kikedao](https://discourse.threejs.org/u/kikedao)\
**Post date:** [April 19, 2024, 1:31pm UTC](https://discourse.threejs.org/t/preserve-scene-scale-on-orthographic-camera-resize/64304/3 "2024-04-19T13:31:55Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![didi\_softwares](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/didi_softwares/32/22686_2.png) [@didi\_softwares](https://discourse.threejs.org/u/didi_softwares)\
**Post date:** [April 19, 2024, 1:50pm UTC](https://discourse.threejs.org/t/preserve-scene-scale-on-orthographic-camera-resize/64304/4 "2024-04-19T13:50:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [April 19, 2024, 2:01pm UTC](https://discourse.threejs.org/t/preserve-scene-scale-on-orthographic-camera-resize/64304/5 "2024-04-19T14:01:20Z")

</div>

> [@kikedao](#):
>
> Is it even possible?

Does this Japanese flag answer your question:

[https://codepen.io/boytchev/full/vYMQGWb](https://codepen.io/boytchev/full/vYMQGWb)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/f/6f0e053c24f82f1f00a7faa9b461e637c94f5399.png)](https://codepen.io/boytchev/full/vYMQGWb)

---

<div class="post-metadata">

**Author:** ![kikedao](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kikedao/32/26038_2.png) [@kikedao](https://discourse.threejs.org/u/kikedao)\
**Post date:** [April 19, 2024, 7:44pm UTC](https://discourse.threejs.org/t/preserve-scene-scale-on-orthographic-camera-resize/64304/6 "2024-04-19T19:44:44Z")

</div>

Thanks so much @PavelBoytchev you know it does 😍

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.