任何有 DeviceOrientationEvent 经验和手机/平板电脑的人吗？
在带有陀螺仪的设备上运行以下代码片段，我注意到 gamma（沿 y 轴向左/向右旋转）随着 beta 接近 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 …我已经编写了一个JS SDK，可以监听移动设备的旋转，并提供3个输入：
？：角度可以在0到360度之间变化
吗？：-180至180度之间的角度
？：-90至90度之间的角度
我曾尝试使用Euler Angles确定设备方向，但遇到了万向节锁定效应，当设备指向上方时，该计算会爆炸。这导致我使用Quaternion，而不受万向节锁定效应的影响。
我已经找到了可转换？，？的js库。和？到四元数，因此对于以下值：
？：81.7324
？：74.8036
吗？：-84.3221
我得到这个四元数的ZXY订单：
w：0.7120695154301472
x：0.6893688637611577
y：-0.10864439143062626
z：0.07696733776346154
码：
var rad = Math.PI / 180;
window.addEventListener("deviceorientation", function(ev) {
// Update the rotation object
var q = Quaternion.fromEuler(ev.alpha * rad, ev.beta * rad, ev.gamma * rad, 'ZXY');
// Set the CSS style to the element you want to rotate
elm.style.transform = "matrix3d(" + q.conjugate().toMatrix4() + ")";
}, …