Question

任何具有DeviceOrientationEvent经验和手机/平板电脑的人都可以使用吗？

在具有陀螺仪的设备上运行以下代码片段，我注意到伽玛（沿着y轴向左/右旋转）变大且不可预测，因为β接近90度（设备指向正上方）。我认为这是gimbal-lock。

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

我研究了如here所讨论的旋转矩阵和四元数，但没有得到有效的结果。事实上，当beta命中90deg时，作者github页面上的例子也会中断！与此MDN tutorial相同 - 请在您的设备上查看：当它直接上升时，球会变得疯狂。如何忽视这些失常！

Answer 1

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

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

注意，我尝试使用Quaternions，但结果值对单向运动没有帮助。

Answer 2

出于某种原因尝试使用Google“万能锁”，

不仅要关注伽玛本身，它的一部分角度值会指向alpha轴，还需要考虑其他2个维度来重新计算

看到类似的问题： https://stackoverflow.com/a/52264991/5853749

DeviceOrientationEvent：当beta接近/命中90deg时如何处理疯狂的伽玛？

2 个答案: