射击游戏滑动鼠标旋转镜头

当我们做桌面端射击游戏时，只使用鼠标MOVE事件旋转镜头时，这里使用的Laya引擎发布的游戏

这是就会使用的h5 的requestPointerLock方法锁定屏幕，然后使用鼠标移动差值进行计算旋转，如下代码

onEnable(): void { 
	var element = document.body;
	element.requestPointerLock = element.requestPointerLock || element["mozRequestPointerLock"] || element["webkitRequestPointerLock"];
	// element.requestPointerLock();

	document.addEventListener('pointerlockchange', this.pointerlockchange.bind(this), false);
	document.addEventListener('mozpointerlockchange', this.pointerlockchange.bind(this), false);
	document.addEventListener('webkitpointerlockchange', this.pointerlockchange.bind(this), false); 
}

private pointerlockchange(event: any): void {

	Laya.stage.off(Laya.Event.MOUSE_MOVE, this, this.onMouseMove);
	var element = document.body;
	if (document.pointerLockElement === element || document["mozPointerLockElement"] === element || document["webkitPointerLockElement"] === element) {

		// controls.enabled = true;
		this.rotateEnabled = true;
		Laya.stage.on(Laya.Event.MOUSE_MOVE, this, this.onMouseMove);

	} else {
		this.rotateEnabled = false;
	}
}

onDisable(): void { 
	document.removeEventListener('mousemove', this.onMouseMove2.bind(this), false);

	document.removeEventListener('pointerlockchange', this.pointerlockchange.bind(this), false);
	document.removeEventListener('mozpointerlockchange', this.pointerlockchange.bind(this), false);
	document.removeEventListener('webkitpointerlockchange', this.pointerlockchange.bind(this), false);
}

onStageDown(): void { 

	this.rotateEnabled = !this.rotateEnabled;
	var element = document.body;
	if (this.rotateEnabled) {
		Laya.stage.off(Laya.Event.MOUSE_MOVE, this, this.onMouseMove);
		element.requestPointerLock();
		document.addEventListener('mousemove', this.onMouseMove2.bind(this), false);
	} else {
		// element.requestFullscreen();
		document.removeEventListener('mousemove', this.onMouseMove2.bind(this), false);
	}
}

private onMouseMove2(e: any): void {

	if (!this.rotateEnabled) {
		return;
	}

	let movementX = e.movementX || e.mozMovementX || e.webkitMovementX || 0;
	let movementY = e.movementY || e.mozMovementY || e.webkitMovementY || 0;

	console.log("onMouseMove2 ======> " + movementX + "_" + movementY);

	this.mouseMovement(-movementX, movementY);
}

private mouseMovement(movementX: number, movementY): void {

	let lerpx = movementX * 0.002;
	let lerpy = movementY * 0.002;

	this.eyeYawPitchRoll.x -= lerpy;//* Math.PI / 180;
	this.eyeYawPitchRoll.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, this.eyeYawPitchRoll.x));

	if (this.role) {
		this.role.transform.rotate(new Laya.Vector3(0, lerpx, 0), false, true);
		// this.role.transform.localRotationEulerY -= lerpx * 180 / Math.PI;
		this.CameraCont.transform.localRotationEulerX = -this.eyeYawPitchRoll.x * 180 / Math.PI;
	}
}

然后就实现了射击游戏鼠标移动角色旋转的方式