three.js第一人称视角控制+全屏+鼠标锁定处理

最新推荐文章于 2024-07-13 14:30:00 发布

前端小宇586

最新推荐文章于 2024-07-13 14:30:00 发布

阅读量4.2k

点赞数 2

分类专栏： three.js 文章标签： three.js 全屏鼠标锁定第一人称

本文链接：https://blog.csdn.net/dvb1188/article/details/102778723

版权

本文介绍了如何使用three.js实现第一人称视角控制，并结合fullscreen.js实现全屏功能。同时，通过Pointer Lock API监听全屏事件并实现鼠标锁定，提供相关API和资源链接。

摘要由CSDN通过智能技术生成

视角控制改变

以下代码根据FirstPersonControls.js修改，附上源代码github地址:FirstPersonControls.js

//改变为根据鼠标移动的幅度移动视角
this.onMouseMove = function ( event ) {
   
		//新增，判断鼠标移动,初始化为false
		this.mouseMove = true;
		//新增，鼠标位置,初始化内容见下三行注释
		//this.rotateEnd = new THREE.Vector2();
		//this.rotateDelta = new THREE.Vector2();
		//this.rotateStart = new THREE.Vector2();
		this.rotateEnd.set( event.clientX, event.clientY );
		if(this.pointerLock===true){
     
		/*
		 *添加pointerLock属性，处理当全屏并鼠标锁定的鼠标运动视角变化
		 *当鼠标锁定时，移动事件对象的位置相关属性中只有movementX和movementY属性会改变
		 */
			this.rotateDelta.set( event.movementX, event.movementY );
		}else{
   
			this.rotateDelta.subVectors( this.rotateEnd, this.rotateStart );
		}
		this.rotateStart.copy( this.rotateEnd );
};
//新增事件
this.onMouseOver = function( event ){
   
		//设置鼠标初始位置
		this.rotateStart.set( event.clientX, event.clientY );
}
//更改后的this.update方法
this.update = function ( delta ) {
   

		if ( this.enabled === false ) return;

		if