HTML5方向轴跳跃

Question

我正在制作一个网络应用程序，我需要知道 phone 围绕深度轴的方向：就像 phone 如果它像手臂一样旋转时的位置时钟的表面。 beta 轴告诉我这一点。

然而，当我将 phone 置于纵向模式时，当我来回倾斜 phone 时（Rolodex 上顶部卡片的倾斜方式），所有值跳跃。观看视频：

https://drive.google.com/file/d/0B5C3MHv2Hmc6VTI2RDlOSkJPVHc/view?usp=sharing

我已经在两个 phone 上试过了，它们是一致的。如何在不跳跃的情况下获得 beta 轴值？我确定有一种数学方法可以抵消跳跃，但我不确定从哪里开始。

Answer 1

我正要放弃，我想，"Gee, I never have that kind of problem with Unity. But, of course, Unity has quaternions."这个想法让我想到必须是 JavaScript 的四元数库，并且确实 there is.

这让我想到了这段代码：我只是将 "up" 旋转到转换为四元数的 phone 方向并抓住 z 轴：

let quaternion = new Quaternion();
let radian = Math.PI / 180;

$(window).on('deviceorientation', function(event) {
    event = event.originalEvent;
    quaternion.setFromEuler(
        event.alpha * radian,
        event.beta * radian,
        event.gamma * radian);
    let vector3 = quaternion.rotateVector([0, 1, 0]);
    let result = vector3[2];
});

这正是我需要的结果！

HTML5方向轴跳跃

HTML5 orientation axes jump

html

javascript

orientation

https://drive.google.com/file/d/0B5C3MHv2Hmc6VTI2RDlOSkJPVHc/view?usp=sharing