OrthographicCamera
Quick answer
OrthographicCamera projects parallel rays, so objects keep their size regardless of distance, which suits plan views, sections, and measurements. Configure left, right, top, bottom, near, and far, then call updateProjectionMatrix() after changing any of them. Set zoom to scale the view without recomputing the four bounds.
new THREE.OrthographicCamera ( left , right , top , bottom , near , far ) → OrthographicCamera
Key points
- left, right, top, and bottom define the visible rectangle in scene units, not pixels.
- zoom scales the view uniformly and is safer than editing frustum bounds.
- setViewOffset() splits the view for tiled or multi-monitor rendering.
Example
const VIEW_HEIGHT = 24; // 纵向可见 24 个场景单位
function fitOrtho(camera, width, height) {
const aspect = width / height;
const halfH = VIEW_HEIGHT / 2;
const halfW = halfH * aspect;
camera.left = -halfW;
camera.right = halfW;
camera.top = halfH;
camera.bottom = -halfH;
camera.updateProjectionMatrix();
}
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 500);
fitOrtho(camera, stage.clientWidth, stage.clientHeight);camera.position.set(0, 120, 0);
camera.up.set(0, 0, -1); // 让图纸上方对应世界 -Z
camera.lookAt(0, 0, 0);
camera.zoom = 1.8;
camera.updateProjectionMatrix();
Notes
- Changing bounds without updateProjectionMatrix() leaves the old projection in place.
- Aspect ratio mismatch stretches content; derive bounds from the canvas dimensions.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). OrthographicCamera. https://www.jingweizhi.com/en/three/api/orthographic-camera.html (accessed 2026-11-03).