ThreeJS orthographic camera: Adjusting size of scene to window

three.js, webgl

Solution

I am not sure if this will help with your particular issue or not. I am not sure if this is correct or not, or if there is a better or more standard way to handle this. But this is what I use in my orthographic code so far. It doesn't work perfect by any means, but you can try it out. Post back and let me know if you figure out anything better.

        $(window).on('resize', function () {
            // notify the renderer of the size change
            renderer.setSize(window.innerWidth, window.innerHeight);
            // update the camera
            camera.left = -window.innerWidth / camFactor;
            camera.right = window.innerWidth / camFactor;
            camera.top = window.innerHeight / camFactor;
            camera.bottom = -window.innerHeight / camFactor;
            camera.updateProjectionMatrix();
        });

Problem

In ThreeJS, I'm using the OrthographicCamera because I have several objects which should be shown from the front, without any perspective distortion. This works fine with one issue: the bunch of objects I created should always roughly fill the screen, but not be much smaller or larger. Using e.g. ``` var factor = 4.5; this.camera = new THREE.OrthographicCamera(-window.innerWidth / factor, window.innerWidth / factor, window.innerHeight / factor, -window.innerHeight / factor, 1, 1000); ``` ... I can get it to run fine on 1920x1080 pixel resolution, but when I then resize the window to something smaller and reload the page, the objects will start to be too large, as they act as if they were fixed. (When using the CombinedCamera with perspective, the resizing is dynamic and works well.) How to fix this using the OrthographicCamera? Or is there a trick where I can turn off perspective in the CombinedCamera? Thanks!

Original source