设备方向传感器到 CSS 转换

Question

我创建了 the following widget (see demo here) 来模仿 chrome 开发人员选项卡上的传感器选项卡：

我的代码侦听设备的方向事件并尝试转换值以适应 css 变换比例，如下所示：

let phone = document.querySelector(".phone");
    window.addEventListener('deviceorientation', (event) => {
      phone.style.transform =
        "rotateY(" + ( event.alpha) + "deg) "
        +
        "rotateX(" + (90 - event.beta) + "deg) "
        +
        "rotateZ(" + (event.gamma ) + "deg)";
    })

但是，如果我对这些值玩得够多，我的小部件和 chrome 小部件就会不同步。显然，我的计算是错误的，我错过了什么？

要测试我的代码，只需转到 demo 打开开发工具传感器选项卡并使用小部件。

如有任何帮助，我们将不胜感激。

更新： 进入传感器选项卡：打开开发工具，按 Esc，在第二个面板上单击左侧的 3 点并选择传感器。

更新： 有问题的值的示例是：
阿尔法：-77.6163
测试版：-173.4458
伽马：-40.4889

Answer 1

这就是 chromium 的做法 chrome:

codepen

重要的部分是，当我们应用 gamma 角度变换时，轴已经被先前的 beta 角度变换旋转了。因此，我们需要将伽马旋转角度应用到 (0, 0, 1) 轴，而不是应用到考虑 beta 角的变换轴。

来源：

function degreesToRadians (deg) {
    return deg * Math.PI / 180;
}

class EulerAngles {
  constructor(alpha, beta, gamma) {
    this.alpha = alpha;
    this.beta = beta;
    this.gamma = gamma;
  }
  
  toRotate3DString() {
    const gammaAxisY = -Math.sin(degreesToRadians(this.beta));
    const gammaAxisZ = Math.cos(degreesToRadians(this.beta));
    const axis = {
      alpha: [0, 1, 0],
      beta: [-1, 0, 0],
      gamma: [0, gammaAxisY, gammaAxisZ]
    };
    return (
      "rotate3d(" +
      axis.alpha.join(",") +
      "," +
      this.alpha +
      "deg) " +
      "rotate3d(" +
      axis.beta.join(",") +
      "," +
      this.beta +
      "deg) " +
      "rotate3d(" +
      axis.gamma.join(",") +
      "," +
      this.gamma +
      "deg)"
    );
  }
}

function ready(fn) {
  if (
    document.attachEvent
      ? document.readyState === "complete"
      : document.readyState !== "loading"
  ) {
    fn();
  } else {
    document.addEventListener("DOMContentLoaded", fn);
  }
}

ready(() => {
  let phone = document.querySelector(".phone");
  window.addEventListener("deviceorientation", event => {
    console.log(event);
    const eulerAngles = new EulerAngles(event.alpha, -90 + event.beta, event.gamma)
    phone.style.transform = eulerAngles.toRotate3DString();
  });
});

设备方向传感器到 CSS 转换

Device orientation sensor to CSS transform

javascript

css

3d

transform

orientation