Resize window in OrthographicCamera

Questions
1

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?

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);
}
2

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?

1 Like
3

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

4

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.

5

Yes maybe this is complex find a function to do it

6

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?

7

have you a source code example?