问DeviceOrientationEvent:当测试版接近/达到90度时，如何处理疯狂的gamma？
EN

Stack Overflow用户

提问于 2017-01-06 02:15:27

回答 0查看 1.5K关注 0票数 8

有DeviceOrientationEvent经验并且手头有手机/平板电脑的人吗？

在一个有陀螺仪的设备上运行以下代码片段，我注意到随着beta接近90度(设备笔直向上)，gamma (沿y轴向左/向右旋转)变得越来越大且不可预测。我想这是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可预测地跟踪左/右设备方向？Gamma是我唯一关心的值--不需要3d空间。

我研究了使用旋转矩阵和四元数作为讨论的here，但没有得到有效的结果。事实上，当beta达到90deg时，作者github页面上的示例也会崩溃！这个MDN tutorial也一样--在你的设备上检查它:当它垂直向上时，球就会发疯。这些偏差是如何被忽视的！

mobile

gyroscope

device-orientation

javascript

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41491940

复制

相似问题

问DeviceOrientationEvent:当测试版接近/达到90度时，如何处理疯狂的gamma？
EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问DeviceOrientationEvent:当测试版接近/达到90度时，如何处理疯狂的gamma？EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问DeviceOrientationEvent:当测试版接近/达到90度时，如何处理疯狂的gamma？
EN