LayaAir 陀螺仪与加速计

目录

前 言

陀螺仪

Gyroscope

加速计

Accelerator


前 言

1、laya.device.motion 包中共有四个类供开发者使用,分别为加速信息 AccelerationInfo、加速计 Accelerator、陀螺仪 Gyroscope、保存旋转信息 RotationInfo。

2、注意事项:硬件设备陀螺仪与加速计 API 在 libs/laya.device.js 文件中,使用时必须先导入 。

//-----libs-begin-----
loadLib("libs/laya.core.js");
loadLib("libs/laya.webgl.js");
loadLib("libs/laya.ui.js");
loadLib("libs/laya.physics3D.js");
loadLib("libs/laya.d3.js");
loadLib("libs/laya.device.js");
//-----libs-end-------
loadLib("js/bundle.js");

陀螺仪

​地球坐标系是一个位于用户位置的“东、北、上”系,其拥有3个轴,地面相切与1984世界测地系统的spheriod的用户所在位置:

东(X)在地面上,垂直于北轴,向东为正。

北(Y)在地面上,向正北为正(指向北极)。

上(Z)垂直于地面,向上为正。

对于一个移动设备,例如电话或平板,设备坐标系的定义于屏幕的标准方向相关,如果在设备旋转或展开滑动键盘时屏幕方向发生变化,这不会影响关于设备的坐标系的方向:

x在屏幕或键盘平面上,屏幕或键盘的右侧为正。

y在屏幕或键盘屏幕上,屏幕或键盘的上方为正。

z垂直于屏幕或键盘屏幕,离开屏幕或键盘为正。

​旋转必须使用右手规则,即正向沿一个轴旋转为从该轴的方向看顺时针旋转:

以设备坐标系z轴为轴,旋转alpha度。alpha的作用域为[0, 360]。

以设备坐标系x轴为轴,旋转beta度。beta的作用域为[-180, 180]。

以设备坐标系y轴为轴,旋转gamma度。gamma的作用域为[-90, 90]。

详细的图案说明可以参考官网:https://ldc.layabox.com/doc/?nav=zh-js-1-7-1

Gyroscope

Package laya.device.motion
public class Gyroscope
Inheritance Gyroscope InheritanceEventDispatcher Inheritance Object

1、使用 Gyroscope.instance 获取唯一的 Gyroscope 引用,请勿调用构造函数

2、Gyroscope(陀螺仪) 通过 change 事件对设备方向改变进行监听,该事件有两个回调参数:

1、absolute —— 如果设备提供的方位是基于设备坐标系统和地球坐标系统间的差距,则是 true;如果设备无法检测到地球坐标系统,absolute 为 false。

2、rotationInfo —— RotationInfo 类型(保存旋转信息),包含 alpha、beta、gamma 三个值

alpha、beta 和 gamma 属性必须指示设备的方向,其表现形式为从固定在地球上的坐标系到固定在设备上的坐标系的转换。

Property(属性)
instance : Gyroscope   [static] [read-only] 获取 Gyroscope 实例
Method(方法)

Gyroscope(singleton:int)

off(type:String, caller:*, listener:Function, onceOnly:Boolean = false):EventDispatcher

[override] 取消指定处理器对陀螺仪的监视。

on(type:String, caller:*, listener:Function, args:Array = null):EventDispatcher

[override] 监视陀螺仪运动。

//初始化引擎
Laya.init(900, 1000,Laya.WebGL);
//创建一个文本对象,用于显示手机旋转时的陀螺仪数据
let info = new Laya.Text();
info.fontSize = 90;//字体大小90px
info.color = "#FFFFFF";//字体颜色白色
info.borderColor = "#f00";//文本组件边框颜色为红色
//设置文本组件的大小等于整个舞台大小
info.size(Laya.stage.width, Laya.stage.height);
Laya.stage.addChild(info);//将文本添加到舞台

//通过Gyroscope的instance属性获取陀螺仪实例,然后监听 change 事件
Laya.Gyroscope.instance.on(Laya.Event.CHANGE,this,onDeviceOrientation);

//Gyroscope(陀螺仪)的监听回调函数有 absolute、rotationInfo 两个参数
//absolute:如果设备可以提供绝对方位数据(指向地球坐标系),或者设备决定的任意坐标系数据,则为true,否则为false。即使为false 也能获取到旋转的数据
//rotationInfo参数是laya.device.motion.RotationInfo对象,用于保存旋转信息
function onDeviceOrientation(absolute, rotationInfo) {
	//alpha:Z轴旋转角度, 其值范围从0至360,若absolute为true或者在IOS中,alpha值是从北方到当前设备方向的角度值
	//beta:X轴旋转角度, 其值范围从-180至180,代表设备从前至后的运动
	//gamma:Y轴旋转角度, 其值范围从-90至90,代表设备从左至右的运动
	info.text =
		"absolute:"+absolute+"-"+rotationInfo.absolute+"\n"+
		"alpha:" + Math.floor(rotationInfo.alpha) + '\n' +
		"beta :" + Math.floor(rotationInfo.beta) + '\n' +
		"gamma:" + Math.floor(rotationInfo.gamma);
}

加速计

1、laya.device.motion.Accelerator 类定期发送设备的运动传感器检测的活动数据,此数据表示设备在三维轴上的运动。当设备移动时,传感器检测此移动并返回设备的加速坐标。即使静止的时候,也可以得到包含重力的加速坐标。

2、与陀螺仪(Gyroscope)做法完全一致,使用 instance 只读属性获取 Accelerator 实例,然后绑定 change 事件,其回调函数拥有以下参数:

1)acceleration —— AccelerationInfo 类型,提供宿主设备相对于地球坐标系的加速信息,单位是m/s^2

2)accelerationIncludingGravity —— AccelerationInfo 类型,包含重力加速度的加速信息,而 acceleration  是排除掉了重力加速度 g 的加速度。这是对无法排除重力影响的加速数据的补充(例如缺少陀螺仪),加速信息的单位是m/s^2

3)rotationRate —— RotationInfo 类型,提供宿主设备在空间中旋转的速率,单位必须是deg/s,而不是角度

4)interval —— 从硬件获得数据的间隔,单位是毫秒

解释一下Accelerator 类用于获取设备在 x、y、z 三个方向上加速度数据,大家学过物理肯定知道垂直方向 z 轴上有一个重力加速度 g = 9.8 m/s^2 ,于是 LayaAir 在回掉函数中提供了 acceleration 与 accelerationIncludingGravity 两个参数,区别是前者将 Z 轴的重力减速度g=9.8 默认减去了,而后者没有。所以当手机平放在桌子上时,即使不去动它,acceleration 在 z 轴的加速度约等于0,而 accelerationIncludingGravity 在z 轴的加速度约等于9.8。

Accelerator

Package laya.device.motion
public class Accelerator
Inheritance Accelerator InheritanceEventDispatcher Inheritance Object

1、Accelerator.instance 获取唯一的 Accelerator 引用,请勿调用构造函数。

2、Accelerator 通过监听 change 事件,其回调处理器接受四个参数:

acceleration: 表示用户给予设备的加速度。(不包含重力加速度)
accelerationIncludingGravity: 设备受到的总加速度(包含重力加速度)。
rotationRate: 设备的旋转速率。
interval: 加速度获取的时间间隔(毫秒)。

//初始化引擎
Laya.init(1280, 1000,Laya.WebGL);
//创建一个文本对象,用于显示手机旋转时的陀螺仪数据
let info = new Laya.Text();
info.fontSize =70;//字体大小90px
info.color = "#FFFFFF";//字体颜色白色
info.borderColor = "#f00";//文本组件边框颜色为红色
//设置文本组件的大小等于整个舞台大小
info.size(Laya.stage.width, Laya.stage.height);
Laya.stage.addChild(info);//将文本添加到舞台

//使用instance属性获取 Accelerator 实例
Laya.Accelerator.instance.on(Laya.Event.CHANGE, this, onAccelerator);

//acceleration、accelerationIncludingGravity 都是 AccelerationInfo 类型,其 x,y,z属性分别表示在X,Y,Z轴上的加速度值
//acceleration的z不含重力加速度g,accelerationIncludingGravity的z包含重力加速度g=9.8
function onAccelerator(acceleration, accelerationIncludingGravity, rotationRate, interval) {
	//x,y,z 返回的是 JavaScript 的 Number 类型,toFixed(x) 表示取x位小数点,同时进行四舍五入
	//亲测 toFixed 方法在 PC 端时会报错 TypeError: Cannot read property 'toFixed' of null,但是移动端却正常
	//只是为了方便观察,才进行小数点截取,实际应用中可以不必进行四舍五入
    info.text =
        'acce:(' + acceleration.x.toFixed(3) + ', ' + acceleration.y.toFixed(3) + ', ' + acceleration.z.toFixed(3) + ')\n' +
        'acInGr:(' + accelerationIncludingGravity.x.toFixed(3) + ', ' + accelerationIncludingGravity.y.toFixed(3) + ', ' + accelerationIncludingGravity.z.toFixed(3) + ')\n' +
        'rotaRate: a:' + Math.floor(rotationRate.alpha) + ' ,b:' + Math.floor(rotationRate.beta) + ' ,g:' + Math.floor(rotationRate.gamma) + '\n' +
        'interval: ' + interval;
}

更多详细内容可以参考官网:https://ldc.layabox.com/doc/?nav=zh-js-1-7-1

猜你喜欢

转载自blog.csdn.net/wangmx1993328/article/details/85204952