Three.js中透视与正交相机对齐后Z值异常及遮挡问题排查

首先，你的代码里存在一个明显笔误：aux2.project(half_height)应该改为aux2.project(perspective_camera)，错误的参数会导致完全不正确的投影结果，这是你当前得到异常Z值的直接原因之一。

核心原理差异 #

即使修正笔误后，两种相机投影后的NDC Z值依然会有差异，这是因为透视相机和正交相机的Z轴映射逻辑本质不同：

• 正交相机：Z轴采用线性映射，将世界空间的[near, far]区间直接线性转换为NDC空间的[-1, 1]。所有深度值的分布是均匀的，远处和近处的深度精度一致。
• 透视相机：Z轴采用非线性倒数映射，会将靠近near裁剪面的深度区间压缩得更密集，远离near的区间则更稀疏。这种设计是为了匹配人眼透视效果，同时优化深度缓冲区的精度分配（近处物体需要更高的深度精度）。

你的正交相机视锥体是按照透视相机的far平面大小计算的，但这只保证了两个相机在far平面处的视野范围一致，无法改变两者Z轴投影的本质差异。

解决遮挡异常的方案 #

如果需要让两个相机渲染的内容在深度遮挡上保持一致，可以通过以下方式处理：

• 同步相机状态：确保两个相机的position、rotation、quaternion完全一致，保证它们观察世界的角度和位置完全相同。
• 深度值转换：将其中一个相机的NDC Z值转换为另一个相机的等效NDC Z值，步骤如下：
  1. 从NDC Z反推世界空间Z坐标
  2. 再用目标相机的投影逻辑将世界Z转换为目标NDC Z
• 自定义投影矩阵：如果需要特定区间的深度完全对齐，可以自定义投影矩阵，修改Z轴的映射逻辑，让两种相机在关键深度区间的投影结果一致。

修正后的代码示例 #

const near = 0.1;
const far = 100;
const perspective_camera = new PerspectiveCamera(55, canvas.width / canvas.height, near, far);
const half_width = perspective_camera.far * Math.tan(perspective_camera.fov * 0.5 * (Math.PI / 180));
const half_height = half_width / perspective_camera.aspect;
const ortho_camera = new OrthographicCamera(-half_width, half_width, half_height, -half_height, near, far);

// 修正笔误，使用透视相机进行投影
const aux1 = new Vector3(0, 0, 1);
const aux2 = new Vector3(0, 0, 1);
console.log("正交相机投影结果:", aux1.project(ortho_camera));
console.log("透视相机投影结果:", aux2.project(perspective_camera));

// 透视NDC Z转正交等效NDC Z的工具函数
function ndcZToWorldZPerspective(ndcZ, near, far) {
  return (2 * near * far) / (far + near - ndcZ * (far - near));
}

function worldZToNdcZOrtho(worldZ, near, far) {
  return (2 * worldZ) / (far - near) - (far + near) / (far - near);
}

// 转换示例
const perspectiveNdcZ = aux2.project(perspective_camera).z;
const worldZ = ndcZToWorldZPerspective(perspectiveNdcZ, near, far);
const orthoEquivalentNdcZ = worldZToNdcZOrtho(worldZ, near, far);
console.log("透视NDC Z转换为正交等效NDC Z:", orthoEquivalentNdcZ);

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