如何避免使用设备方向避免使用kimbal锁定，以将相机位置移动三j？

Question

我正在尝试使用浏览器的设备方向在三js场景中移动相机，但是当beta命中90时，我无法避免摄影锁。

我在这里创建了一个演示站点：

“ https://mattparrilla.github.io/gimbal-lock” rel =“ nofollow noreferrer”> https://mattparrilla.github.io/gimbal-lock 要肖像（因此电话沿重力矢量直立），然后摇摆到周围，看到立方体疯狂地移动。

这是我的代码的肉：

let initialOrientation;
function onDeviceOrientation (e) {
  // use initial angle as our "origin"
  if (!initialOrientation) {
    initialOrientation = {
      alpha: e.alpha,
      beta: e.beta,
      gamma: e.gamma
    }
  }
  
  // move camera X and Y positions between -5 and 5 depending on
  // angles of beta and gamma, keeping Z position fixed
  // the calc[Gamma|Beta]Offset functions maps my angle between -1 and 1 for use with lerp
  camera.position.set(
    THREE.MathUtils.lerp(0, 5, calcGammaOffset(e.gamma, initialOrientation.gamma)),
    THREE.MathUtils.lerp(0, 5, calcBetaOffset(e.beta, initialOrientation.beta)),
    5
  )
  camera.lookAt(0, 0, 0);
}

我知道我需要使用四元组或旋转矩阵，并且我可以计算出两种方法（三js具有方便的方法），我只是不够理解它们，以将它们从现有示例转换为我自己的用例。

可以在此处查看整个应用>