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

时间:2015-11-20 18:21:01

标签: javascript mobile 3d accelerometer gyroscope

我正在使用THREE.js并创建一个网络应用程序,用户可以旋转设备,场景将相应移动。与this类似的东西。

我在区分具有陀螺仪和没有陀螺仪的设备时遇到了问题。

检测没有方向传感器的设备很容易。 DeviceOrientationEvent的所有alpha,beta,gamma值均为null。但是,如果移动设备没有陀螺仪,它仍会在 DeviceOrientationEvent中提供 alpha beta gamma 即可。问题是这些值非常嘈杂,并且在场景中引起很多抖动。所以,我想禁用这些设备的设备方向。但是,到目前为止,我还没有找到如何确定数据是来自陀螺仪还是加速度计(这是我对数据来源​​的猜测)。

我不知道它是否有帮助,但可以看到如何处理这个问题的一个很好的例子here。 (按下底部的轴图标;您必须在没有陀螺仪和陀螺仪的设备上看到它,以查看差异)。他们为没有陀螺仪的设备所做的只是更新 音高 roll 。使用手机旋转时, 偏航 不会更新。

所以,这绝对是可能的,但我还没有发现经过大量搜索后的情况。如果有人能帮忙的话会很棒。

非常感谢。

编辑:

在只有加速度计的设备上,例如 MOTO E ,所有值都为空 - DeviceOrientationEvent rotationRate - 唯一的例外是的 accelerationIncludingGravity 即可。但是,我之前测试的设备,没有陀螺仪,但仍然给出 DeviceOrientationEvent 的alpha,beta,gamma值,似乎有 2 加速度计到the "sensors" details on GSM Arena。这就是我怀疑它能够提供DeviceOrientationEvent数据的方式,尽管嘈杂。看起来2个加速度计不足以提供旋转速率;)

2 个答案:

答案 0 :(得分:13)

如果要检查是否存在陀螺仪,请检查只有陀螺仪可以测量的参数。例如,旋转速率只是陀螺仪测量的东西。

查看一个示例代码,说明是否存在陀螺仪:

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

希望这有帮助!

编辑:

只是一个小注释:这里使用了 DeviceMotionEvent ,因为只能从此事件访问rotationRate(和加速度等)。 OP只尝试过DeviceOrientationEvent,所以值得一提。

答案 1 :(得分:0)

现代解决方案:

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

source