Three.js/Aframe 跟随相机球体旋转故障：pan正常tilt异常及四元数形变问题

问题根源 #

1. 初始欧拉角实现X轴倾斜异常：未对X轴的tilt旋转做范围限制，当上下视角转动超过±90°时，欧拉角数值会发生跳变，导致差值计算错误，出现旋转方向反向的异常。
2. 四元数实现球体变形：直接修改四元数的x/y分量属于错误用法，四元数的四个分量必须满足归一化约束才能代表合法旋转，手动修改分量会破坏归一化特性，导致模型出现缩放、扭曲等异常形变。

正确实现方案 #

你需要的pan（水平平移）和tilt（垂直倾斜）本身就是两个独立的欧拉角参数，使用YXZ旋转顺序即可稳定实现，无需额外复杂操作，修正后代码如下：

this._prevVec = this.el.object3D.rotation.clone()

// 提取目标pan/tilt值
const targetPan = this._cameraParent.object3D.rotation.y + THREE.MathUtils.degToRad(this._rotationAnimation.y)
const targetTilt = THREE.MathUtils.clamp(
  this._cameraParent.object3D.rotation.x + THREE.MathUtils.degToRad(this._rotationAnimation.x),
  -Math.PI / 2,
  Math.PI / 2
)

// 计算最短角度差
this._deltaY = floatModulo(targetPan - this._prevVec.y, -this._half, this._half)
this._deltaX = floatModulo(targetTilt - this._prevVec.x, -this._half, this._half)

// 映射旋转速度
this._rotationSpeedY = THREE.MathUtils.mapLinear(
  this._deltaY, -this.data.springAngle, this.data.springAngle,
  -this.data.peakSpeed, this.data.peakSpeed
)
this._rotationSpeedX = THREE.MathUtils.mapLinear(
  this._deltaX, -this.data.springAngle, this.data.springAngle,
  -this.data.peakSpeed, this.data.peakSpeed
)

// 计算新的旋转值，同时限制tilt范围避免跳变
const newTilt = THREE.MathUtils.clamp(
  this._prevVec.x + this._rotationSpeedX * timeDelta,
  -Math.PI / 2,
  Math.PI / 2
)
const newPan = this._prevVec.y + this._rotationSpeedY * timeDelta

this.el.object3D.rotation.set(
  newTilt,
  newPan,
  THREE.MathUtils.degToRad(this._rotation.z),
  "YXZ"
)

如果需要使用四元数实现，不要手动修改四元数分量，需先将目标pan/tilt转换为合法四元数后再做插值，示例如下：

this._prevQuat = this.el.object3D.quaternion.clone()

// 生成合法的目标四元数
const targetRot = new THREE.Euler(
  THREE.MathUtils.clamp(
    this._cameraParent.object3D.rotation.x + THREE.MathUtils.degToRad(this._rotationAnimation.x),
    -Math.PI / 2,
    Math.PI / 2
  ),
  this._cameraParent.object3D.rotation.y + THREE.MathUtils.degToRad(this._rotationAnimation.y),
  THREE.MathUtils.degToRad(this._rotation.z),
  "YXZ"
)
const targetQuat = new THREE.Quaternion().setFromEuler(targetRot)

// 直接做球面插值，插值系数可根据需求调整，示例为0.1的平滑系数
this.el.object3D.quaternion.slerp(targetQuat, 0.1)

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