DeviceOrientationEvent：当 beta 接近/达到 90 度时如何处理疯狂的伽玛？

Question

DeviceOrientationEvent：当 beta 接近/达到 90 度时如何处理疯狂的伽玛？

cal*_*oop 7 javascript mobile device-orientation gyroscope

任何有 DeviceOrientationEvent 经验和手机/平板电脑的人吗？

在带有陀螺仪的设备上运行以下代码片段，我注意到 gamma（沿 y 轴向左/向右旋转）随着 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);
  }
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

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

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

我研究了使用旋转矩阵和四元数作为讨论here，但没有得到有效的结果。事实上，作者的github页面上的例子在beta达到90度时也会崩溃！与此MDN 教程相同- 在您的设备上检查：当它笔直向上时，球会发疯。这些畸变怎么会被忽视！

Answer 1

cal*_*oop 6

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

我的解决方案是将 alpha/beta/gamma 值转换为旋转矩阵，然后从矩阵值之一中提取数据。我使用的代码是从 W3C在这里给出的。

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

归档时间：	8 年，10 月前
查看次数：	1365 次
最近记录：	7 年，2 月前