设备方向传感器到CSS转换 [英] Device orientation sensor to CSS transform

问题描述

我创建了以下小部件(请参见此处的演示)，以模仿Chrome上的传感器标签开发人员标签:

I've created the following widget (see demo here) to mimic the sensors tab on the chrome developer tab:

我的代码侦听设备的定向事件，并尝试将值转换为适合css转换比例的方式，

My code listens to the orientation event of the device and tries to convert the values to fit the css transform scale, like so:

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小部件将不同步.显然，我的计算是错误的，我想念的是什么?

However, if I play around enough with the values, my widget and the chrome widget get out of sync. Obviously, my calculations are wrong, what am I missing?

要测试我的代码，只需转到 demo 打开开发工具传感器"标签，然后使用小部件.

To test my code, just go to the demo open the dev tools sensors tab and play around with the widget.

任何帮助将不胜感激.

更新: 要进入传感器"标签，请执行以下操作:打开开发工具，按Esc，在第二个面板上，单击左侧的3点并选择传感器.

Update: to get to the sensors tab: Open dev tools, press Esc, on the second panel click the 3dots on the left and choose sensors.

更新: 有问题的值的示例是:
alpha:-77.6163
beta:-173.4458
伽玛:-40.4889

Update: Example of problematic values are:
alpha: -77.6163
beta:-173.4458
gamma:-40.4889

推荐答案

在铬和铬中就是这样:

codepen

关键部分是，当我们应用gamma角度变换时，该轴已经通过以前的beta角度变换进行了旋转.因此，我们需要将伽马旋转角不应用于(0, 0, 1)轴，而是应用于考虑了β角的变换轴.

Essential part there is that when we apply gamma angle transformation, the axis is already rotated by previous beta angle transformation. So we need to apply gamma rotation angle not to (0, 0, 1) axis but to transformed axis which considers beta angle.

来源:

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转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！