Three.js - Orthographic camera

For future reference: Updated video

var w = container.clientWidth;
var h = container.clientHeight;
var viewSize = h;
var aspectRatio = w / h;

_viewport = {
    viewSize: viewSize,
    aspectRatio: aspectRatio,
    left: (-aspectRatio * viewSize) / 2,
    right: (aspectRatio * viewSize) / 2,
    top: viewSize / 2,
    bottom: -viewSize / 2,
    near: -100,
    far: 100
}

_camera = new THREE.OrthographicCamera ( 
    _viewport.left, 
    _viewport.right, 
    _viewport.top, 
    _viewport.bottom, 
    _viewport.near, 
    _viewport.far 
);

In my specific case, my world units are pixels. Hence, I am using container.clientWidth and container.clientHeight as width and height. You probably don't want to do this.

The pattern for instantiating an orthographic camera in three.js is:

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, near, far );

where width and height are the width and height of the camera's cuboid-shaped frustum measured in world-space units.

near and far are the world-space distances to the near and far planes of the frustum. Both near and far should be greater than zero.

To prevent distortion, you will typically want the aspect ratio of the orthographic camera ( width / height ) to match the aspect ratio of the render's canvas. (see *Note below)

It is unfortunate that many of the three.js examples pass window.innerWidth and window.innerHeight as args to this constructor. Doing so only makes sense if the orthographic camera is used for rendering to a texture, or if the world units for your orthographic scene are in pixels.

---

*Note: Actually, the camera aspect ratio should match the aspect ratio of the renderer's viewport. The viewport can be a sub-region of the canvas. If you do not set the renderer's viewport directly using renderer.setViewport(), the viewport will be the same size as the canvas, and hence have the same aspect ratio as the canvas.

three.js r.73