Three.js中旋转相机正对倾斜平面实现俯视2D效果

核心思路是通过计算平面的中心与法向量，将相机定位到平面法向量方向上，并让相机正对平面中心，必要时切换正交相机实现纯2D扁平化效果。具体步骤如下：

• 计算平面中心
  遍历所有点集，累加坐标后取平均值，得到平面的几何中心：

  const pointCenter = new THREE.Vector3();
  points.forEach(point => pointCenter.add(point));
  pointCenter.divideScalar(points.length);
  

• 计算平面法向量
  取平面内三个不共线的点，通过叉乘计算平面的单位法向量：

  const p0 = points[0];
  const p1 = points[1];
  const p2 = points[2];
  const v1 = new THREE.Vector3().subVectors(p1, p0);
  const v2 = new THREE.Vector3().subVectors(p2, p0);
  const normal = new THREE.Vector3().crossVectors(v1, v2).normalize();
  

• 定位并校准相机

  1. 将相机放置在平面中心沿法向量向外的位置，距离根据场景尺寸调整：

     const cameraDistance = 50; // 按需修改，确保能完整看到平面
     camera.position.copy(pointCenter).add(normal.multiplyScalar(cameraDistance));
     

  2. 校准相机up向量，避免视角倾斜：

     let up = new THREE.Vector3(0, 1, 0);
     // 若法向量与Y轴接近平行，切换为X轴计算up
     if (Math.abs(normal.y) > 0.9) {
       up = new THREE.Vector3(1, 0, 0);
     }
     const tangent = new THREE.Vector3().crossVectors(normal, up).normalize();
     up = new THREE.Vector3().crossVectors(tangent, normal).normalize();
     camera.up = up;
     

  3. 让相机正对平面中心：

     camera.lookAt(pointCenter);
     

• 可选：切换正交相机实现纯2D效果
  透视相机存在近大远小，若需要严格的2D扁平化视图，改用正交相机，并根据平面包围盒设置参数：

  const boundingBox = new THREE.Box3().setFromPoints(points);
  const size = boundingBox.getSize(new THREE.Vector3());
  const aspect = window.innerWidth / window.innerHeight;
  const orthoCamera = new THREE.OrthographicCamera(
    -size.x * aspect / 2, size.x * aspect / 2,
    size.y / 2, -size.y / 2,
    0.1, 1000
  );
  // 复用之前计算的位置、up和lookAt
  orthoCamera.position.copy(camera.position);
  orthoCamera.up = camera.up;
  orthoCamera.lookAt(pointCenter);
  

注意事项

• 确保点集中存在至少三个不共线的点（题目已说明在同一平面，此条件默认满足）
• 相机距离可根据平面包围盒的尺寸动态计算，避免平面超出视口
• 若使用透视相机，可通过缩小fov（视野角）+增大相机距离，进一步弱化透视效果

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