javascript - 设备方向传感器到 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
Gamma :-40.4889

Answer 1

这就是在 chromium 和 chrome 中的做法:

codepen

重要的部分是，当我们应用gamma Angular 变换时，轴已经通过之前的beta Angular 变换进行了旋转。因此，我们需要将 Gamma 旋转 Angular 应用到 (0, 0, 1) 轴，而是应用到考虑 beta Angular 的转换轴。

来源:

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();
  });
});