DeviceOrientationEvent：当 beta approaches/hits 90deg 时如何处理疯狂的 gamma？

Question

有没有人有 DeviceOrientationEvent 经验并且phone/tablet 得心应手？

运行带有陀螺仪的设备上的以下代码片段，我注意到伽马（沿 y 轴旋转 left/right）随着 beta 接近 90 度（设备指向正上方）变得很大且不可预测.我假设这是 gimbal-lock。

var data, raf, alpha = document.getElementById("alpha"),
  beta = document.getElementById("beta"),
  gamma = document.getElementById("gamma");

window.addEventListener("deviceorientation", processData);
window.addEventListener('click', togglePause);
updateText();

function processData(e) {
  data = e;
}

function updateText() {
  if (data) {
    alpha.textContent = Math.round(data.alpha);
    beta.textContent = Math.round(data.beta);
    gamma.textContent = Math.round(data.gamma);
  }
  raf = requestAnimationFrame(updateText);
}

function togglePause(e) {
  if (raf) {
    cancelAnimationFrame(raf);
    raf = null;
    window.removeEventListener("deviceorientation", processData);
  } else {
    window.addEventListener("deviceorientation", processData);
    raf = requestAnimationFrame(updateText);
  }
}

body {
  font: normal 30px/200% sans-serif;
  margin: 20px;
  cursor: default;
}
span {
  font-size: 50px;
  vertical-align: middle;
}

<body>
  alpha: <span id="alpha">null</span>
  <br>beta: <span id="beta">null</span>
  <br>gamma: <span id="gamma">null</span>
  <br>[tap to pause/resume]
</body>

https://jsfiddle.net/1us8p1ad/show

我的问题：如何使用 gamma 可预测地跟踪 left/right 设备方向？ Gamma 是我唯一关心的值——不需要 3d space。

我研究过使用旋转矩阵和四元数，如讨论的那样 here, but not getting valid results. In fact, the examples on the author's github page also break when beta hits 90deg! Same with this MDN tutorial - 在您的设备上检查它：当它笔直向上时，球会变得疯狂。这些偏差是如何被忽视的！

Answer 1

似乎万向节锁是一个已知的 real-world 障碍，许多应用程序通过限制设备运动来避免它（在我的情况下不可能）。

我的解决方案是将 alpha/beta/gamma 值转换为旋转矩阵，然后从其中一个矩阵值中提取数据。我使用的代码来自 W3C here。

请注意，我尝试使用四元数，但结果值对仅在一个方向上的运动没有帮助。

Answer 2

尝试google'gimbal lock'原因，

并且不要只关注gamma本身，它的部分角度值会进入alpha轴，你需要重新计算并考虑其他2个维度

查看类似问题：

DeviceOrientationEvent：当 beta approaches/hits 90deg 时如何处理疯狂的 gamma？

DeviceOrientationEvent: how to deal with crazy gamma when beta approaches/hits 90deg?

javascript

mobile

device-orientation

gyroscope