如何在Web浏览器中检测设备是否具有陀螺仪？

Question

我正在使用THREE.js创建一个Web应用程序，用户可以旋转设备，场景会相应移动，类似于此处的示例：https://va3c.github.io/three.js/examples/misc_controls_deviceorientation.html。 我遇到了一个问题，无法区分具有陀螺仪和没有陀螺仪的设备。 检测完全没有方向传感器的设备很容易。所有DeviceOrientationEvent的alpha、beta、gamma值均为空。但是，如果移动设备没有陀螺仪，它仍然会在DeviceOrientationEvent中提供alpha、beta、gamma值。问题在于这些值非常嘈杂，会导致场景抖动很严重。因此，我想禁用这些设备的设备方向。但是，到目前为止，我还没有找到如何判断数据来自陀螺仪还是加速计（这是我猜测数据来自的地方）。 我不知道是否有帮助，但处理这个问题的一个很好的例子可以在此处看到：http://krpano.com/tours/paris。（按底部的轴标志图标；您必须在没有陀螺仪和有陀螺仪的设备上查看差异）。对于没有陀螺仪的设备，他们做的只是更新俯仰和翻滚。当您旋转手机时，偏航角不会被更新。 因此，这肯定是可以实现的，但即使经过了很多搜索，我也还没有找到如何判断数据来自哪里。如果有人能帮忙，那就太好了。 非常感谢。

在只拥有加速度计的设备上（例如 MOTO E），所有值都为空，包括DeviceOrientationEvent和rotationRate，唯一的例外是accelerationIncludingGravity。但是我之前测试的那台没有陀螺仪却仍然提供了DeviceOrientationEvent的alpha、beta、gamma值的设备，根据GSM Arena上的传感器详情，看起来它似乎有2个加速度计。这就是我怀疑它能够提供DeviceOrientationEvent数据的方式，尽管噪声很大。看来两个加速度计不足以提供旋转速率 ;)

- Parth

Answer 1

如果您想检查陀螺仪是否存在，请检查仅陀螺仪可以测量的参数。例如，旋转速率是仅由陀螺仪测量的。

看看下面的示例代码，它会告诉您是否存在陀螺仪：

var gyroPresent = false;
window.addEventListener("devicemotion", function(event){
    if(event.rotationRate.alpha || event.rotationRate.beta || event.rotationRate.gamma)
        gyroPresent = true;
});

希望这能帮助到你！

编辑：

仅做一个小注：这里使用DeviceMotionEvent，因为只有从这个事件中才能访问到rotationRate（和acceleration等）。原帖作者仅尝试了DeviceOrientationEvent，因此值得一提。

- Dhyey Shah

---

哇！太神奇了... :D 非常感谢！我没想到要检查其他事件。 我在网上找不到任何解决方法。再次感谢。 - Parth

Answer 2

现代解决方案：

if (window.DeviceOrientationEvent) {
  // gyro exist
}

源代码

- Alexandr Tovmach

---

无法运行。在没有任何陀螺仪的桌面浏览器中尝试此操作。你会得到正确的结果。 - Poyoman