有DeviceOrientationEvent经验和手机/平板电脑的人吗？
在具有陀螺仪的设备上运行以下代码片段时，我注意到伽马（沿y轴向左/右旋转）变大且不可预测，因为β接近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是我唯一关心的值 - 不需要3D空间。
我研究了使用旋转矩阵和四元数，如讨论here，但没有得到有效的结果。实际上，当beta命中90deg时，作者的github页面上的例子也会中断！与这个MDN tutorial相同 - 在你的设备上检查它：当它直接上升时，球变得疯狂。这些偏差是如何被忽视的！
看起来万向节锁是一个已知的现实世界的障碍，许多应用程序通过限制设备运动来避免它（在我的情况下不可能）。
我的解决方案是将alpha / beta / gamma值转换为旋转矩阵，然后从其中一个矩阵值中提取数据。我使用的代码是来自W3C的here。
注意，我尝试使用四元数，但结果值对单向运动没有帮助。
尝试google'万向节锁'的原因，
并且不要只关注伽马本身，其角度值的一部分转到alpha轴，你需要重新计算考虑其他2个维度