Three.js - Orthographic camera
3d, javascript, three.js
Solution
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
Problem
I've working on an app which displays some 3D models. We load the models, create the meshes, add them to the scene...standard procedure. After the last mesh is added, we compute the bounding box in order to move the camera and cover all the scene, using the size of the total geometry and the size of the viewport to do the math. ``` if (bounds.bx / bounds.by < camera.aspect) { /* Vertical max */ r = bounds.by / (2 * Math.tan(Math.PI / 8)); } else { /* Horizontal max */ hFOV = 2 * Math.atan(Math.tan(Math.PI / 8) * camera.aspect); r = bounds.bx / (2 * Math.tan((hFOV / 2))); } ``` `bounds` is an object containing the width and height of the bounding box. After this calculation, we move the camera(plus a little ratio, just aesthetics, we want a little room between the geometry and the screen border :) ) and render ``` camera.position.z = r * 1.05; ``` So far this is implemented and runs ok. This has been done with PerspectiveCamera. Now we want to change that and use OrthographicCamera...turns out to be a mess. Models are too small, we lose the mousewheel zoom from the TrackBall Controls and the algorithm to move the camera is not working anymore. Also I don't understand the parameters of the constructor for the camera...these width and height are for the geometry or the viewport?