有DeviceOrientationEvent经验并且有手机/平板电脑的人吗?
在装备陀螺仪的设备上运行以下代码片段,我注意到当beta接近90度(设备正指向上方)时,gamma(沿y轴左右旋转)变得很大且不可预测。 我认为这是万向节锁定。
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空间。
我研究了使用旋转矩阵和四元数的方法,如此处所述,但没有得到有效的结果。事实上,作者在github页面上的示例在beta达到90度时也会出现错误!这个MDN教程也一样-在您的设备上检查它:当它竖直时,球会发疯。这些异常怎么会被忽视了呢!