Three.js技术问答：如何调整透视相机（Perspective Camera）的画面畸变程度？

嘿，这个问题我之前做俯视类游戏时也碰到过，透视相机默认的第一人称设计确实在俯视视角下会让边缘物体畸变特别明显，想要介于透视和正交之间的视觉效果，其实有几种实用的方法，咱们一步步来聊：

1. 调整相机视场角（FOV）—— 最简单的快速解决方案 #

透视相机的边缘畸变和**视场角（FOV）**直接相关：FOV越大，边缘物体被拉伸弯曲的程度就越高；缩小FOV，画面会变得更“平”，接近正交相机的效果，但依然保留一定的透视纵深感。

你可以把默认的75°FOV降到30°-45°之间，然后调整相机的Z轴位置或者用camera.zoom来保证画面里的内容大小合适。示例代码：

// 缩小FOV到35度，同时保持宽高比、近远裁剪面
const camera = new THREE.PerspectiveCamera(
  35, 
  window.innerWidth / window.innerHeight, 
  0.1, 
  1000
);
// 如果画面内容变小，调整相机位置或者缩放
camera.position.z = 80; // 或者 camera.zoom = 2; camera.updateProjectionMatrix();

这种方法能快速降低边缘畸变，同时远处的墙体也不会因为大FOV被过度拉伸而额外暴露出来。

2. 混合透视与正交投影矩阵—— 精细控制视觉风格 #

如果单纯调FOV达不到你想要的“中间态”，可以手动混合透视和正交相机的投影矩阵，灵活控制两者的占比，实现刚好介于两者之间的效果。

原理是先创建透视相机，再生成正交相机的投影矩阵，最后用lerp方法混合两个矩阵，blendFactor参数控制混合程度（0=纯透视，1=纯正交）。示例代码：

const aspect = window.innerWidth / window.innerHeight;
const near = 0.1;
const far = 1000;
const zoom = 5;

// 基础透视相机
const camera = new THREE.PerspectiveCamera(45, aspect, near, far);

// 生成正交投影矩阵
const orthoMatrix = new THREE.Matrix4().makeOrthographic(
  -aspect * zoom, 
  aspect * zoom, 
  -zoom, 
  zoom, 
  near, 
  far
);

// 混合因子，0.3表示30%正交，70%透视
const blendFactor = 0.3;
// 混合两个矩阵
camera.projectionMatrix.lerp(orthoMatrix, blendFactor);
// 记得更新相机投影矩阵
camera.updateProjectionMatrix();

通过调整blendFactor，你可以精准控制边缘畸变的程度，同时让远处的墙体尽可能少地被观测到。

3. 使用等距投影（Isometric）相机—— 完全消除畸变的选择 #

如果你的游戏风格允许完全没有透视畸变，等距投影相机是绝佳选择——所有平行线保持平行，完全不会有边缘弯曲的问题，非常适合俯视策略类游戏。

实现等距相机不需要特殊的Three.js内置相机，基于正交相机调整旋转角度即可：

const camera = new THREE.OrthographicCamera(
  -aspect * zoom, 
  aspect * zoom, 
  -zoom, 
  zoom, 
  near, 
  far
);
// 设置等距视角的旋转：X轴45°，Y轴45°（可根据需求微调）
camera.rotation.x = Math.PI / 4;
camera.rotation.y = Math.PI / 4;
// 调整相机位置让场景居中显示
camera.position.set(50, 50, 50);

这种方案完全消除了畸变，远处的墙体只会按照等距规则显示，不会额外暴露。

4. 后期处理修正畸变—— 极端场景的补充方案 #

如果前面的方法都无法满足你的视觉需求，还可以用**后期处理（Post Processing）**来修正边缘畸变。通过自定义Shader，对画面边缘的像素进行拉伸修正，减少弯曲程度。不过这种方法相对复杂，且会增加性能开销，适合对视觉效果要求极高的场景。

内容的提问来源于stack exchange，提问作者Vardan Betikyan