检测

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轴方向相反

关于陀螺仪 deviceorientation相关推荐

基于HTML5陀螺仪实现ofo首页眼睛移动效果
最近用ofo小黄车App的时候,发现以前下方扫一扫变成了一个眼睛动的小黄人,觉得蛮有意思的,这里用HTML5仿一下效果. ofo眼睛效果效果分析从效果中不难看出,是使用陀螺仪事件实现的. 这里先来 ...
Unity使用陀螺仪检测屏幕方向
using UnityEngine;/// <summary>检测设备方向</summary> public class CheckDeviceOrientation : Mo ...
移动端二三事【五】：陀螺仪（重力感应器）实现手机位置、加速度感应以及常见应用。
首先说明一下:陀螺仪感应需在真机环境下进行调试,PC端无效果. 1.获取感应器需在window上监听devicemotion事件,再通过事件对象获取accelerationIncludingGrav ...
android陀螺仪实现背景移动demo,基于HTML5陀螺仪实现移动动画效果
这次给大家带来基于HTML5陀螺仪实现移动动画效果,基于HTML5陀螺仪实现移动动画效果的注意事项有哪些,下面就是实战案例,一起来看一下. 最近用ofo小黄车App的时候,发现以前下方扫一扫变成了一个 ...
krpano 陀螺仪相关问题
首先陀螺仪的使用要求地址必须是 https 本地测试时可以通过更改vue.config.js (如果没有vue.config.js那就新建一个) // vue.config.js module.ex ...
android陀螺仪判断手机旋转方向,unity 陀螺仪判断手机方向
首先说一下为什么用陀螺仪,很多时候当ios设备系统级别锁定方向后,我们使用ios系统的设备方向方法将不能其作用. ios系统代码中为一下代码: //下面代码只有在设备系统不锁定屏幕旋转是Natific ...
html5怎么调用手机陀螺仪,html5 获取陀螺仪，重力感应(转发)
DeviceOrientationEvent是获取方向,得到device静止时的绝对值: DeviceMotionEvent是获取移动速度,得到device移动时相对之前某个时间的差值比设备定位AP ...
Cocos Creator 获得手机陀螺仪(Gyrometer)数据
接触 Cocos Creator 已经一年多, 体验是酸甜苦辣俱全, 不过仍然要夸一下这东西确实神作, 可以让我这种网页小白靠着Unity开发经验直接上手. 到目前为止的 Cocos Creator ...
html调用手机陀螺仪,前端基于THREE.js的3D全景，支持鼠标控制和手机陀螺仪的切换...
/p> 'use strict' ;(function(_window) { var navigatorUserAgent = navigator.userAgent var iPhone = ...

关于陀螺仪 deviceorientation

检测

使用

关于陀螺仪 deviceorientation相关推荐

最新文章

热门文章