我目前正在构建一个小型全景照片查看器,可以选择使用陀螺仪导航场景.我从deviceOrientation事件中获取数据并将euler角度转换为旋转矩阵,然后将其放入一些变换并最终移动带有3dMatrix变换的css立方体.
我的问题是我在不同设备上的不同浏览器上从deviceOrientation事件中获得了非常不同的数据,我不明白为什么.
在我尝试的几乎所有iPhone上,使用safari mobile和Chrome,一切都很棒.价值观进入并且有意义,整个体验非常无缝.
在三星Galaxy S3上,在Chrome中,我的数据完全不稳定. alpha值实际上似乎并不代表围绕z轴的旋转,并且值有巨大的飞跃,例如beta跳跃从50-130度只有一个小的运动.
在Chrome中的Galaxy Tab S 8.4“中,我仍然会得到一些不稳定的值,有些来回抽搐,但我至少得到了一些近似于所需行为的东西.
在Chrome上的Nexus 7 2nd gen上,体验是连贯的,也是有意义的.与iPhone相比,它的渲染速度不稳定,但它正在正确地旋转所有内容,并且这些值很有意义.
有谁知道我怎么能解决这些问题,或者我应该如何解决这些问题?它们可能是Android的三星端口的问题,或者在最新版本的操作系统中的Android本身.
思考?想法?建议?我此时真的很失落.
谢谢!
http://dorukeker.com/know-thy-gyroscope-and-js-part-i/
以下是哪些设备的值不同:http://dorukeker.com/know-thy-gyroscope-and-js-part-ii/
这是我准备处理这些差异的JS文件:https://github.com/dorukeker/gyronorm.js
更新:我刚刚在GitHub上更新了gyronorm.js.现在有一些函数可以告诉您设备/浏览器组合上是否有某个变量可用.检查GitHub页面以下载和使用方法.
我希望这些帮助.
请享用!