# Resize window in OrthographicCamera

**URL:** <https://discourse.threejs.org/t/resize-window-in-orthographiccamera/7132>\
**Category:** Questions\
**Tags:** orthographic-camera\
**Created:** [April 17, 2019, 7:35am UTC](https://discourse.threejs.org/t/resize-window-in-orthographiccamera/7132 "2019-04-17T07:35:52Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ale211734](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ale211734/32/5146_2.png) [@ale211734](https://discourse.threejs.org/u/ale211734)\
**Post date:** [April 17, 2019, 7:35am UTC](https://discourse.threejs.org/t/resize-window-in-orthographiccamera/7132/1 "2019-04-17T07:35:52Z")

</div>

It’s possible get the same behavior as when I resize the window vertically, even horizontally?  
How can I edit my code to get it?

```auto
var camera, scene, renderer;
var originalAspect;
var viewSize = 20;

init(); animate();

function init() {

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);

    var aspectRatio = window.innerWidth / window.innerHeight;

    originalAspect = window.innerWidth / window.innerHeight;
    camera = new THREE.OrthographicCamera(-aspectRatio * viewSize / 2, aspectRatio * viewSize / 2, viewSize / 2, -viewSize / 2, 0.1, 1000);
    camera.position.set( 10, 10, -10 );
    camera.lookAt(scene.position);

    renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var controls = new THREE.OrthographicTrackballControls(camera, renderer.domElement);
            controls.rotateSpeed = 4.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 2.0;
            controls.noZoom = false;
            controls.noPan = false;
            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;
            controls.keys = [65, 83, 68];

    window.addEventListener('resize', onWindowResize, false);

    
    var geometry = new THREE.BoxGeometry( 10, 10, 10 );
    var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    console.log(screen.availWidth);
    console.log(screen.availHeight);

}

function onWindowResize() {
    var aspect = window.innerWidth / window.innerHeight;
    camera.left = -aspect * viewSize / 2;
    camera.right = aspect * viewSize / 2;
    camera.top = viewSize / 2;
    camera.bottom = -viewSize / 2;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  
    console.log(" **********************************");
    console.log("aspect "+ aspect);
    console.log("camera.left "+ camera.left);
    console.log("camera.right "+ camera.right);
    console.log("camera.top "+ camera.top);
    console.log("camera.bottom "+ camera.bottom);
    console.log(" **********************************");
}

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

```

---

<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:** [April 17, 2019, 8:52am UTC](https://discourse.threejs.org/t/resize-window-in-orthographiccamera/7132/2 "2019-04-17T08:52:15Z")

</div>

> [@ale211734](#):
>
> It’s possible get the same behavior as when I resize the window vertically, even horizontally?

What behavior are you referring to? The following live demo demonstrates how the dimensions of the box are retained when resizing the window horizontally. When resizing vertically, the cube scales. If I understand you correctly, you want to scale the cube when resizing the window horizontally, right?

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/mu5j2h07/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<div class="post-metadata">

**Author:** ![ale211734](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ale211734/32/5146_2.png) [@ale211734](https://discourse.threejs.org/u/ale211734)\
**Post date:** [April 17, 2019, 8:58am UTC](https://discourse.threejs.org/t/resize-window-in-orthographiccamera/7132/3 "2019-04-17T08:58:10Z")

</div>

> [@Mugen87](#):
>
> hen resizing vertically the cube scales. If I understand you correctly, you want to scale the cube when resizing the window horizontally,

The box scale only when I resize the window vertically. I would that the box scale when I resize the window horizontally and vertically.

---

<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:** [April 17, 2019, 11:20am UTC](https://discourse.threejs.org/t/resize-window-in-orthographiccamera/7132/4 "2019-04-17T11:20:37Z")

</div>

In most scenarios, you want prevent a distortion of your scene when rendering with an orthographic camera. To do so, the aspect ratio of the orthographic camera has to match the one of the viewport. Usually, the width **or** the height of the camera’s view frustum is corrected. I don’t know if it’s possible to adjust the height and the width at the same time in order to achieve your intended result. The following fiddle shows how the cube scales when you resize the window horizontally. It does now not scale when resizing vertically.

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/kq806r5m/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<div class="post-metadata">

**Author:** ![ale211734](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ale211734/32/5146_2.png) [@ale211734](https://discourse.threejs.org/u/ale211734)\
**Post date:** [April 17, 2019, 12:27pm UTC](https://discourse.threejs.org/t/resize-window-in-orthographiccamera/7132/5 "2019-04-17T12:27:29Z")

</div>

Yes maybe this is complex find a function to do it

---

<div class="post-metadata">

**Author:** ![amitlzkpa](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/amitlzkpa/32/1735_2.png) [@amitlzkpa](https://discourse.threejs.org/u/amitlzkpa)\
**Post date:** [April 17, 2019, 6:27pm UTC](https://discourse.threejs.org/t/resize-window-in-orthographiccamera/7132/6 "2019-04-17T18:27:21Z")

</div>

You could try resizing based on the size of the container holding the scene instead of the window and use CSS to fix the container size/aspect ratio?

---

<div class="post-metadata">

**Author:** ![ale211734](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ale211734/32/5146_2.png) [@ale211734](https://discourse.threejs.org/u/ale211734)\
**Post date:** [April 19, 2019, 7:46am UTC](https://discourse.threejs.org/t/resize-window-in-orthographiccamera/7132/7 "2019-04-19T07:46:43Z")

</div>

have you a source code example?