Three.js相机垂直旋转问题：如何确定旋转向量并计算newTarget

你的核心问题是垂直旋转的轴选错了——垂直旋转不能用固定的(x,y,z)，必须基于相机当前的朝向计算本地水平轴（也就是相机的右方向，在世界坐标系下的向量），因为垂直旋转是让相机绕自己的水平方向上下转动，而不是绕固定世界轴。

修改后的代码实现 #

var camera = viewer.navigation.getCamera();
var horizontalRadians = (horizontalAngle * Math.PI) / 180;
var verticalRadians = (verticalAngle * Math.PI) / 180;

// 获取相机当前的位置和目标方向
var position = camera.position.clone();
var target = camera.target.clone();
var direction = target.clone().sub(position).normalize();

// 计算垂直旋转的轴：相机的右方向向量（世界空间）
// 用世界上方向（Z轴）和相机方向叉乘，得到右方向
var worldUp = new THREE.Vector3(0, 0, 1);
var right = new THREE.Vector3().crossVectors(worldUp, direction).normalize();

// 先做垂直旋转（绕右轴）
var verticalQuaternion = new THREE.Quaternion().setFromAxisAngle(right, verticalRadians);
direction.applyQuaternion(verticalQuaternion);

// 再做水平旋转（绕世界Z轴）
var horizontalQuaternion = new THREE.Quaternion().setFromAxisAngle(worldUp, horizontalRadians);
direction.applyQuaternion(horizontalQuaternion);

// 计算新目标点
var newTarget = position.clone().add(direction);
console.log(newTarget);

// 最后更新相机目标并让相机看向新目标
camera.target = newTarget;
camera.lookAt(newTarget);

关键说明 #

• 垂直旋转轴right：通过世界上方向（你使用的Z轴）和相机当前朝向的叉乘得到，这个轴始终是相机的水平右方向，保证垂直旋转是上下俯仰的效果。
• 旋转顺序：先垂直后水平，避免旋转轴互相干扰（如果先水平再垂直，垂直旋转的轴会跟着水平旋转偏移，可能不符合预期）。
• 如果是基于Forge Viewer，也可以直接用Viewer自带的方法简化实现：

  // Viewer内置旋转方法，直接传入水平和垂直角度（弧度）
  viewer.navigation.rotate(horizontalRadians, verticalRadians);
  

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