Skip to content

OrthographicCamera:正交相机(不随距离缩放)

正交相机没有透视缩放:无论物体远近,屏幕上的大小都一致。常用于:

  • CAD/建筑平面与立面视图
  • 2.5D/等距视角(isometric)
  • UI 叠加层(配合单独的正交相机渲染)

构造参数

ts
const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);

关键在于 left/right/top/bottom 如何取值。一个常见做法是根据视口尺寸与缩放系数计算:

ts
const aspect = window.innerWidth / window.innerHeight;
const frustumHeight = 10;
const frustumWidth = frustumHeight * aspect;

const camera = new THREE.OrthographicCamera(
  -frustumWidth / 2,
  frustumWidth / 2,
  frustumHeight / 2,
  -frustumHeight / 2,
  0.1,
  1000
);

resize 处理

窗口变化时,需要重新计算 left/right/top/bottomupdateProjectionMatrix()

练习

  • 用正交相机做一个“等距视角”的小场景(相机旋转到合适角度)
  • 用 GUI 控制 frustumHeight,实现“正交缩放”