首页 > 编程语言> > Javascript-DeviceOrientationEvent：当Beta接近/达到90deg时,如何处理疯狂的伽玛？

Javascript-DeviceOrientationEvent：当Beta接近/达到90deg时,如何处理疯狂的伽玛？

2019-11-11 22:34:19 作者：互联网

有DeviceOrientationEvent经验并能使用手机/平板电脑的人吗？

在装有陀螺仪的设备上运行以下代码段,我注意到随着beta接近90deg(设备指向上方),伽玛(沿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相同-在您的设备上进行检查：将其笔直向上时,球会变得很笨拙.这些像差怎么会被忽略！

解决方法:

万向节锁定似乎是已知的现实障碍,许多应用程序通过限制设备运动来避免这种情况(在我的情况下是不可能的).

我的解决方案是将alpha / beta / gamma值转换为旋转矩阵,然后从矩阵值之一中提取数据.我使用的代码是W3C提供的here.

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

标签：device-orientation,mobile,gyroscope,javascript
来源： https://codeday.me/bug/20191111/2022940.html