关于陀螺仪 deviceorientation

fasss 发布于2019-08-22 12:46 / 2840人阅读

摘要：检测支持写在这里对不起，您的浏览器还不支持使用以设备坐标系轴为轴，旋转度。的作用域为以设备坐标系轴为轴，旋转度。的作用域为设备沿轴逆时针旋转，值增加设备沿轴顺时针旋转，值增加设备沿轴逆时针旋转，值增加注意手机轴和电脑轴方向相反

检测

if (window.DeviceOrientationEvent) {
    //  支持DeviceOrientation API写在这里
} else {
    console.log("对不起，您的浏览器还不支持Device Orientation!!!");
}

使用

window.addEventListener("deviceorientation", function(event) {
  // 以设备坐标系z轴为轴，旋转alpha度。alpha的作用域为(0, 360)
  // 以设备坐标系x轴为轴，旋转beta度。beta的作用域为(-180, 180)
  // 已设备坐标系y轴为轴，旋转gamma度。gamma的作用域为(-90, 90)
  console.log(event.alpha + " : " + event.beta + " : " + event.gamma);
});

设备沿Z轴逆时针旋转，Alpha(α)值增加

设备沿X轴顺时针旋转，Beta(β)值增加

设备沿Y轴逆时针旋转，Gamma(γ)值增加

注意

手机Y轴和电脑Y轴方向相反

GPU云服务器云服务器 deviceorientation 陀螺仪陀螺仪开发 mes陀螺

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92355.html

HTML5摇一摇（上）—如何判断设备摇动

摘要：刚刚过去的一年里基于微信的营销可谓是十分火爆，通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧，刚好最近农历新年将至，我就拿一个摇签的小例子来谈一谈中如何调用手机重力感应的接口演示摇一摇，万福签什么是重力感应说到重力感应有一个东西不得刚刚过去的一年里基于微信的H5营销可谓是十分火爆，通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧，刚好最近农历新年将至，我就拿一个摇签的小...

curried 2019-08-19 17:24 评论0 收藏0
HTML5摇一摇（上）—如何判断设备摇动

摘要：刚刚过去的一年里基于微信的营销可谓是十分火爆，通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧，刚好最近农历新年将至，我就拿一个摇签的小例子来谈一谈中如何调用手机重力感应的接口演示摇一摇，万福签什么是重力感应说到重力感应有一个东西不得刚刚过去的一年里基于微信的H5营销可谓是十分火爆，通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧，刚好最近农历新年将至，我就拿一个摇签的小...

WilsonLiu95 2019-08-01 15:01 评论0 收藏0
「移动设备陀螺仪」与「preserve-3d」碰撞的火花

摘要：它描述的是设备由前向后旋转的情况。表示设备沿轴上的旋转角度，范围为度。完整的代码大概是这样庆祝时刻现在我们已经完成了，一个利用移动设备陀螺仪与实现的交互效果。原文链接：航洋 blog 「移动设备陀螺仪」与「preserve-3d」碰撞的火花涉及知识「CSS：transform、JS：deviceorientation」废话不多，先上 DEMO「请使用移动设备查看」如何搭建一个简...

jsyzchen 2019-08-22 13:53 评论0 收藏0