如何使Three.js球面全景视图适配任意模型轴向（Y-UP/Z-UP等）

问题根源在于原逻辑依赖Three.js默认的Y-UP坐标系，直接使用相机世界方向设置controls.target，当模型采用Z-UP等其他轴向时，相机的朝向轴与全景环视的基准轴不匹配，导致球面视图姿态异常。

优化核心思路 #

基于**模型的向上轴（Up Axis）**修正相机朝向与控制器参数：

• 提取相机朝向在垂直于模型向上轴平面上的分量，确保切换后的环视基准与模型轴向一致
• 同步更新控制器的up属性，匹配模型的向上轴，保证旋转逻辑正确

优化后代码实现 #

// 全局/模块内维护当前模型的向上轴，切换模型时更新该值
let modelUpAxis = new THREE.Vector3(0, 1, 0); // 默认Y-UP，Z-UP则设为(0,0,1)

function switchToSphericalView() {
  // 获取相机当前世界方向
  const cameraWorldDir = new THREE.Vector3();
  camera.getWorldDirection(cameraWorldDir);

  // 将相机方向投影到垂直于模型向上轴的平面，得到水平朝向
  const horizontalDir = cameraWorldDir.clone()
    .sub(modelUpAxis.clone().multiplyScalar(cameraWorldDir.dot(modelUpAxis)))
    .normalize();

  // 处理相机完全朝上/朝下的极端情况，设置默认水平方向
  if (horizontalDir.lengthSq() < 0.0001) {
    horizontalDir.set(1, 0, 0);
    horizontalDir.sub(modelUpAxis.clone().multiplyScalar(horizontalDir.dot(modelUpAxis))).normalize();
  }

  // 计算符合模型轴向的lookAt目标点
  const lookAtPoint = camera.position.clone().add(horizontalDir);

  // 同步控制器的up属性与模型轴向
  controls.up.copy(modelUpAxis);
  controls.enableZoom = false;
  controls.pan = false;
  controls.target.copy(lookAtPoint);
  controls.update();
}

关键步骤说明 #

1. 投影水平方向：通过向量点积消除相机朝向中与模型向上轴同向的分量，确保最终的朝向是水平（垂直于模型向上轴）的，适配任意轴向的模型。
2. 极端情况处理：当相机完全指向模型的上下方向时，水平方向向量会趋近于零，此时设置一个默认的水平方向（如X轴正方向），避免逻辑崩溃。
3. 同步控制器up属性：OrbitControls的up属性决定了旋转的基准轴，必须与模型向上轴一致，否则环视时的上下方向会出现错乱。

动态适配模型轴向 #

如果模型的向上轴可从元数据获取（比如GLTF模型的asset.upAxis字段），可在模型加载时自动更新modelUpAxis：

// 示例：加载GLTF模型时提取向上轴
gltfLoader.load('model.gltf', (gltf) => {
  const upAxis = gltf.asset?.upAxis || 'Y_UP';
  switch(upAxis) {
    case 'Y_UP':
      modelUpAxis.set(0,1,0);
      break;
    case 'Z_UP':
      modelUpAxis.set(0,0,1);
      break;
    case 'X_UP':
      modelUpAxis.set(1,0,0);
      break;
  }
  // 后续模型加载逻辑...
});

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