hello，大家好，我是老王，今天来聊一个有趣的Web API。

DeviceOrientationEvent它提供了设备物理方向的信息。这个API可以让你获取设备的三个旋转角度：alpha、beta和gamma。这些值可以被用于控制3D图形的旋转，比如一个3D立方体。

API的工作原理是使用设备上的传感器，包括陀螺仪、指南针和加速度计，来检测设备的物理方向。就像你的设备拥有了一双眼睛，能够看到你的每一个动作。这个API的用途非常广泛，从网页游戏，到地图应用，再到手势识别，都离不开它的帮助。

想象一下，你在玩一个网页游戏，只需要转动你的手机，就能控制游戏中的角色。或者，在使用地图应用时，只需要转动手机，就能改变地图的方向。这些都是DeviceOrientationEvent API的魔法。

此功能仅在**安全上下文**(HTTPS) 中、在某些或所有 支持的浏览器 中可用。

一、DeviceOrientationEvent介绍

DeviceOrientationEvent对象包含有关设备方向的信息。这个事件在设备的方向发生变化时触发。事件对象包含以下三个属性：

在DeviceOrientationEvent中使用的是固定坐标系，用于描述设备的方向。固定坐标系的原点位于设备的中心，并且与设备的初始方向对齐。

Alpha：设备围绕Z轴旋转的角度，范围从0到360度。当设备水平放置时，Alpha为0度，当设备顺时针旋转时，Alpha值逐渐增加。
Beta：设备围绕X轴倾斜的角度，范围从-180到180度。当设备水平放置时，Beta为0度，当设备向前倾斜时，Beta值逐渐减小。
Gamma：设备围绕Y轴倾斜的角度，范围从-90到90度。当设备水平放置时，Gamma为0度，当设备向右倾斜时，Gamma值逐渐增加。

通过使用固定坐标系，可以在设备的旋转和倾斜方向上进行准确的控制和操作。

二、使用DeviceOrientationEvent

使用DeviceOrientationEvent需要首先检查浏览器是否支持这个事件。
如果支持，你可以添加一个事件监听器来监听deviceorientation事件。当设备的方向发生变化时，这个监听器就会被调用，并且会收到一个DeviceOrientationEvent对象作为参数。
你可以从这个对象中获取alpha、beta和gamma值来使用。

以下是一个简单的示例代码：

javascript 复制代码

if(window.DeviceOrientationEvent) {
    window.addEventListener('deviceorientation', function(event) {
        var alpha = event.alpha;
        var beta = event.beta;
        var gamma = event.gamma;

        // 使用alpha、beta和gamma值
    });
} else {
    console.log("Sorry, your browser doesn't support Device Orientation");
}

三、DeviceOrientationEvent示例：控制3D立方体的旋转

假设我们有一个3D立方体，我们想根据设备的方向来控制它的旋转。我们可以使用DeviceOrientationEvent来实现这个功能。

首先，我们需要一个HTML元素来表示3D立方体。我们给它一个类名.cube：

html 复制代码

<div class="cube"></div>

然后，我们可以使用以下的JavaScript代码来控制立方体的旋转：

javascript 复制代码

if(window.DeviceOrientationEvent) {
    window.addEventListener('deviceorientation', function(event) {
        var alpha = event.alpha;
        var beta = event.beta;
        var gamma = event.gamma;

        var cube = document.querySelector('.cube');
        cube.style.transform = 'rotateZ(' + alpha + 'deg) rotateX(' + beta + 'deg) rotateY(' + gamma + 'deg)';
    });
} else {
    console.log("Sorry, your browser doesn't support Device Orientation");
}

这段代码会监听deviceorientation事件，并在设备的方向发生变化时更新立方体的旋转。

四、总结

API在桌面浏览器的设备上可能会有一些限制，因为这些设备可能没有足够的硬件支持。但这并不是大问题，因为这个API主要还是用在装有传感器的移动设备上。

总的来说，DeviceOrientationEvent API就像一个魔法师，它赋予你的设备感知方向的能力，让你的设备变得更加智能。这是一个非常有趣且有用的API，值得我们去探索和学习。

五、3D立方体的示例代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<style>
  .cube {
    margin: 0 auto;
    margin-top: 140px;
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
  }

  .face {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: red;
    text-align: center;
    font-size: 30px;
    line-height: 200px;
    color: white;
    border: 1px solid black;
  }
  .front {
    transform: rotateY(0deg) translateZ(100px);
  }
  .back {
    transform: rotateX(180deg) translateZ(100px);
  }
  .right {
    transform: rotateY(90deg) translateZ(100px);
  }
  .left {
    transform: rotateY(-90deg) translateZ(100px);
  }
  .top {
    transform: rotateX(90deg) translateZ(100px);
  }
  .bottom {
    transform: rotateX(-90deg) translateZ(100px);
  }
</style>

<body>
  <div class="cube">
    <div class="face front">Front</div>
    <div class="face back">Back</div>
    <div class="face right">Right</div>
    <div class="face left">Left</div>
    <div class="face top">Top</div>
    <div class="face bottom">Bottom</div>
  </div>

  <script>
    // 检测浏览器是否支持 DeviceOrientation 事件
    if (window.DeviceOrientationEvent) {
      // 添加事件监听器
      window.addEventListener('deviceorientation', function (event) {
        // 获取设备的方向信息
        var alpha = event.alpha; // 设备围绕Z轴旋转的度数，即设备左右旋转
        var beta = event.beta; // 设备围绕X轴旋转的度数，即设备前后倾斜
        var gamma = event.gamma; // 设备围绕Y轴旋转的度数，即设备侧倾斜

        // 获取立方体元素
        var cube = document.querySelector('.cube');

        // 更新立方体的旋转
        cube.style.transform =
          'rotateZ(' + alpha + 'deg) ' +
          'rotateX(' + beta + 'deg) ' +
          'rotateY(' + gamma + 'deg)';
      });
    } else {
      alert('你的浏览器不支持DeviceOrientation');
    }
  </script>
</body>

</html>

如果你感觉还不错，可以自己实现一个陀螺仪来玩一玩。

From 公众号 <老王聊前端>

探索神秘的设备方向：DeviceOrientationEvent API的魅力与应用

一、DeviceOrientationEvent介绍

二、使用DeviceOrientationEvent

三、DeviceOrientationEvent示例：控制3D立方体的旋转

四、 总结

五、3D立方体的示例代码

四、总结