Laya实现DeviceOrientationControls

var DeviceOrientationControls = function ( object ) {// 参数是camera

	var scope = this;
	var EPS = 0.000001;

	this.object = object;
	this.enabled = true;

	this.deviceOrientation = {};
	this.screenOrientation = 0;

	this.alphaOffset = 0; // radians

	var onDeviceOrientationChangeEvent = function ( event ) {
		scope.deviceOrientation = event;
	};

	var onScreenOrientationChangeEvent = function () {
		scope.screenOrientation = window.orientation || 0;
	};

	var setObjectQuaternion = function () {
		var zee = new Laya.Vector3( 0, 0, 1 );
		var q0 = new Laya.Quaternion();
		var q1 = new Laya.Quaternion( - Math.sqrt( 0.5 ), 0, 0, Math.sqrt( 0.5 ) ); // - PI/2 around the x-axis

		return function ( quaternion, alpha, beta, gamma, orient ) {
			Laya.Quaternion.createFromYawPitchRoll(beta, alpha, - gamma ,quaternion)
			Laya.Quaternion.multiply(quaternion,q1,quaternion);
			Laya.Quaternion.createFromAxisAngle(zee, - orient, q0);
			Laya.Quaternion.multiply(quaternion,q0,quaternion);
			scope.object.transform.rotation = quaternion;
		};
	}();

	this.connect = function () {
		onScreenOrientationChangeEvent(); // run once on load
		// iOS 13+
		if ( window.DeviceOrientationEvent !== undefined && typeof window.DeviceOrientationEvent.requestPermission === 'function' ) {
			window.DeviceOrientationEvent.requestPermission().then( function ( response ) {
				if ( response == 'granted' ) {
					window.addEventListener( 'orientationchange', onScreenOrientationChangeEvent );
					window.addEventListener( 'deviceorientation', onDeviceOrientationChangeEvent );
				}
			} ).catch( function ( error ) {
				console.error( 'DeviceOrientationControls: Unable to use DeviceOrientation API:', error );
			} );
		} else {
			window.addEventListener( 'orientationchange', onScreenOrientationChangeEvent );
			window.addEventListener( 'deviceorientation', onDeviceOrientationChangeEvent );
		}
		scope.enabled = true;
	};

	this.disconnect = function () {
		window.removeEventListener( 'orientationchange', onScreenOrientationChangeEvent );
		window.removeEventListener( 'deviceorientation', onDeviceOrientationChangeEvent );
		scope.enabled = false;
	};
	
	this.update = ( function () {
		var lastQuaternion = new Laya.Quaternion();
		return function () {
			if ( scope.enabled === false ) return;
			var device = scope.deviceOrientation;

			if ( device ) {
				var alpha = device.alpha ? scope.degToRad( device.alpha ) + scope.alphaOffset : 0; // Z
				var beta = device.beta ? scope.degToRad( device.beta ) : 0; // X'
				var gamma = device.gamma ? scope.degToRad( device.gamma ) : 0; // Y''
				var orient = scope.screenOrientation ? scope.degToRad( scope.screenOrientation ) : 0; // O
				console.log(alpha,beta,gamma)
				setObjectQuaternion( scope.object.transform.rotation, alpha, beta, gamma, orient );
				if ( 8 * ( 1 - Laya.Quaternion.dot(lastQuaternion,scope.object.transform.rotation) ) > EPS ) {
					lastQuaternion.cloneTo( scope.object.transform.rotation );
				}
			}
		};
	} )();

	

	this.degToRad = function(degrees){
		return degrees * (Math.PI / 180);
	}

	this.dispose = function () {
		scope.disconnect();
	};
	this.connect();

};

使用方法:

var deviceControl;
class LoadModel{
	constructor(resource){

	}
	onModelLoad(){
		deviceControl = new DeviceOrientationControls(camera);
		this.animate();
	}

	animate(){
		var _this = this;
		deviceControl.update();
		requestAnimationFrame(_this.animate.bind(_this));
	}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值