经纬志
首页 / three.js / API 文档

OrthographicCamera

先看结论

正交相机,投影保持平行,物体不因距离而变小,适合平面图、剖面与工程量测。

最后验证 2026-11-03 · three.js 0.160.0 · 更新 2026-10-28 · 引用本文
new THREE.OrthographicCamera(left, right, top, bottom, near, far) → OrthographicCamera

构造参数

参数默认说明
left-1视景体左边界,场景单位
right1视景体右边界
top1视景体上边界
bottom-1视景体下边界
near0.1近裁剪面,比它更近的内容不绘制
far2000远裁剪面,比它更远的内容不绘制

right - left 决定横向可见宽度,top - bottom 决定纵向可见高度。 两个数值的单位就是场景单位,与画布像素无关。

属性

属性说明
left / right横向边界,改完要调用 updateProjectionMatrix()
top / bottom纵向边界,同样需要重建投影矩阵
near / far裁剪范围,正交投影下深度仍是线性的
zoom默认 1。整体放大画面,比改四个边界更安全
view子视图偏移,由 setViewOffset 写入
isOrthographicCamera只读标记,用于类型判断

方法

方法说明
updateProjectionMatrix()边界、zoom、near、far 改动后必须调用
setViewOffset(w, h, x, y, vw, vh)把完整画面切成子视图,参数依次为整幅宽高、偏移与子视图宽高
clearViewOffset()取消偏移,回到完整画面
lookAt(x, y, z)改写朝向,俯视平面图时常用
getWorldDirection(target)把相机朝向写入传入的向量

按容器尺寸校正

直接给四个边界填固定值,画面在非方形容器里会被横向拉伸。 常用做法是固定纵向可视高度,再按宽高比推出横向范围:

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

容器尺寸变化时重新调用 fitOrtho 即可,缩放交给 camera.zoom: zoom 为 2 表示把当前视野缩小一半,相当于放大两倍,同时不会破坏宽高比。

俯视平面图

camera.position.set(0, 120, 0);
camera.up.set(0, 0, -1);   // 让图纸上方对应世界 -Z
camera.lookAt(0, 0, 0);

// 之后每次改 zoom 都要重建投影
camera.zoom = 1.8;
camera.updateProjectionMatrix();

正交相机放在正上方并朝下看,得到的就是平面图。注意此时默认的 up 方向(0, 1, 0)与视线平行,lookAt 会退化, 必须先把 up 改成 (0, 0, -1) 或任意与视线不平行的方向。

与透视相机互换

两种相机都可以用 position 与 lookAt 摆放, 但投影矩阵不同,不能只替换构造语句就算完成。正交相机的视野由边界宽度决定, 换到透视相机后要按距离换算 fov,否则构图会突变。 量测、比例尺、图幅裁切这类要求像素与场景单位严格对应的功能,必须使用正交投影。

three.js 是渲染库,不是地图库。正交相机只负责投影方式, 它不知道投影带、经纬度或瓦片编号。把地理坐标放进场景之前, 需要自行换算成米制平面坐标,并决定哪两个轴对应 left/right 与 top/bottom。

引用本文

经纬志(2026)。《OrthographicCamera》。https://www.jingweizhi.com/three/api/orthographic-camera.html(访问日期 2026-11-03)。