three.js添加人物实现第一人称视角控制，类似于cf或绝地求生游戏控制人物

最新推荐文章于 2024-05-12 17:33:01 发布
最新推荐文章于 2024-05-12 17:33:01 发布
阅读量1.7k 收藏 4
点赞数
CC 4.0 BY-SA版权
分类专栏： three.js 文章标签： javascript 游戏 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37750030/article/details/125253647
本文通过three.js的PointerLockControls介绍如何创建类似CF或绝地求生的游戏人物控制。首先参照官方例子，然后加载模型并同步更新位置和观察方向。最终展示实现的第一人称视角效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

three.js实现第一人称视角控制

思路

查看官方例子，使用PointerLockControls可以实现该功能，官方参考地址。
然后可以将模型加载进来同步修改位置和观察方向就可以了

具体代码如下

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js - pointerlock controls</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
		<style>
			#blocker {
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.5);
			}

			#instructions {
				width: 100%;
				height: 100%;

				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				text-align: center;
				font-size: 14px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="blocker">
			<div id="instructions">
				<p style="font-size:36px">
					Click to play
				</p>
				<p>
					Move: WASD<br/>
					Jump: SPACE<br/>
					Look: MOUSE
				</p>
			</div>
		</div>

		<script type="module">

			import * as THREE from '../build/three.module.js';

			import { PointerLockControls } from './jsm/controls/PointerLockControls.js';
			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';

			let camera, scene, renderer, controls;

			const objects = [];

			let raycaster;

			let moveForward = false;
			let moveBackward = false;
			let moveLeft = false;
			let moveRight = false;
			let canJump = false;
			//根据navigation属性，开始计算毫秒数，通过两次时间相减可以计算某个操作的间隔时间
			let prevTime = performance.now();
			const velocity = new THREE.Vector3();
			const direction = new THREE.Vector3();
			const vertex = new THREE.Vector3();
			const color = new THREE.Color();
			let person=null,mixer,stateList={},currentAction,previousAction,lastkey
			let clock = new THREE.Clock();
			init();
			animate();

			function init() {

				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.set(1,200,1);

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xffffff );
				scene.fog = new THREE.Fog( 0xffffff, 0, 750 );

				const light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
				light.position.set( 0.5, 1, 0.75 );
				scene.add( light );

				controls = new PointerLockControls( camera, document.body );

				const blocker = document.getElementById( 'blocker' );
				const instructions = document.getElementById( 'instructions' );

				instructions.addEventListener( 'click', function () {
					camera.position.set(1,10,1);
					camera.lookAt(new THREE.Vector3(1,1,1));
					controls.lock();

				} );

				controls.addEventListener( 'lock', function () {
					//camera.position.y = 1;
					instructions.style.display = 'none';
					blocker.style.display = 'none';

				} );

				controls.addEventListener( 'unlock', function () {

					blocker.style.display = 'block';
					instructions.style.display = '';

				} );
				controls.addEventListener( 'change', function (evt) {

					//console.log('change',evt)
					let dir1=new THREE.Vector3()
					controls.getDirection(dir1)
					console.log('change getDirection',dir1)
					console.log('change position',controls.getObject().position)

				} );
				scene.add( controls.getObject() );

				const onKeyDown = function ( event ) {
					if (lastkey !== event.code) {
						lastkey = event.code;
						fadeToAction('Walking', 0.2);
					}
					switch ( event.code ) {

						case 'ArrowUp':
						case 'KeyW':
							moveForward = true;
							break;

						case 'ArrowLeft':
						case 'KeyA':
							moveLeft = true;
							break;

						case 'ArrowDown':
						case 'KeyS':
							moveBackward = true;
							break;

						case 'ArrowRight':
						case 'KeyD':
							moveRight = true;
							break;

						case 'Space':
							if ( canJump === true ) velocity.y += 350;
							canJump = false;
							break;

					}

				};

				const onKeyUp = function ( event ) {
					lastkey = null;
					fadeToAction('Standing', 0.2);

					switch ( event.code ) {

						case 'ArrowUp':
						case 'KeyW':
							moveForward = false;
							break;

						case 'ArrowLeft':
						case 'KeyA':
							moveLeft = false;
							break;

						case 'ArrowDown':
						case 'KeyS':
							moveBackward = false;
							break;

						case 'ArrowRight':
						case 'KeyD':
							moveRight = false;
							break;

					}

				};

				document.addEventListener( 'keydown', onKeyDown );
				document.addEventListener( 'keyup', onKeyUp );

				raycaster = new THREE.Raycaster( new THREE.Vector3(), new THREE.Vector3( 0, - 1, 0 ), 0, 10 );

				// floor

				let floorGeometry = new THREE.PlaneGeometry( 2000, 2000, 100, 100 );
				floorGeometry.rotateX( - Math.PI / 2 );

				// vertex displacement

				let position = floorGeometry.attributes.position;

				for ( let i = 0, l = position.count; i < l; i ++ ) {

					vertex.fromBufferAttribute( position, i );

					vertex.x += Math.random() * 20 - 10;
					vertex.y += Math.random() * 2;
					vertex.z += Math.random() * 20 - 10;

					position.setXYZ( i, vertex.x, vertex.y, vertex.z );

				}

				floorGeometry = floorGeometry.toNonIndexed(); // ensure each face has unique vertices

				position = floorGeometry.attributes.position;
				const colorsFloor = [];
				for ( let i = 0, l = position.count; i < l; i ++ ) {

					color.setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
					colorsFloor.push( color.r, color.g, color.b );

				}

				floorGeometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colorsFloor, 3 ) );

				const floorMaterial = new THREE.MeshBasicMaterial( { vertexColors: true } );

				const floor = new THREE.Mesh( floorGeometry, floorMaterial );
				scene.add( floor );

				// objects

				const boxGeometry = new THREE.BoxGeometry( 20, 20, 20 ).toNonIndexed();

				position = boxGeometry.attributes.position;
				const colorsBox = [];

				for ( let i = 0, l = position.count; i < l; i ++ ) {

					color.setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
					colorsBox.push( color.r, color.g, color.b );

				}

				boxGeometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colorsBox, 3 ) );

				for ( let i = 0; i < 500; i ++ ) {

					const boxMaterial = new THREE.MeshPhongMaterial( { specular: 0xffffff, flatShading: true, vertexColors: true } );
					boxMaterial.color.setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );

					const box = new THREE.Mesh( boxGeometry, boxMaterial );
					box.position.x = Math.floor( Math.random() * 20 - 10 ) * 20;
					box.position.y = Math.floor( Math.random() * 20 ) * 20 + 10;
					box.position.z = Math.floor( Math.random() * 20 - 10 ) * 20;

					scene.add( box );
					objects.push( box );

				}
				// 添加辅助
				var axesHelper = new THREE.AxesHelper(30);
				scene.add(axesHelper);


				// 添加人物
				const gltfloader=new GLTFLoader()
				let modelConfig={
					url:'models/gltf/RobotExpressive/RobotExpressive.glb',
					scale:1,
					position:[0,0,0],
					openAnimate:true,
				}
				gltfloader.load( modelConfig.url,  ( gltf )=> {
					person=gltf.scene
					if(modelConfig.position){
						gltf.scene.position.set(modelConfig.position[0], modelConfig.position[1], modelConfig.position[2])
					}
					if(modelConfig.scale){
						gltf.scene.scale.set(modelConfig.scale, modelConfig.scale, modelConfig.scale)
					}
					if(modelConfig.rotateX){
						gltf.scene.rotateX(modelConfig.rotateX)
					}
					if(modelConfig.rotateY){
						gltf.scene.rotateX(modelConfig.rotateY)
					}
					if(modelConfig.rotateZ){
						gltf.scene.rotateX(modelConfig.rotateZ)
					}
					mixer = new THREE.AnimationMixer(person);
					stateList.Walking = mixer.clipAction(gltf.animations[10]);
					stateList.Standing = mixer.clipAction(gltf.animations[7]);
					// 设置下面两项主要是站着的时候，别抖了
					stateList.Standing.clampWhenFinished = true;
					stateList.Standing.loop = THREE.LoopOnce;

					currentAction = stateList.Standing;
					currentAction.play();
					scene.add( gltf.scene );
					//person=gltf.scene
				},null,(error)=>{
					console.error(error)
				} );

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );

				//

				window.addEventListener( 'resize', onWindowResize );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {

				requestAnimationFrame( animate );

				const time = performance.now();

				if ( controls.isLocked === true ) {

					raycaster.ray.origin.copy( controls.getObject().position );
					raycaster.ray.origin.y -= 10;

					const intersections = raycaster.intersectObjects( objects, false );

					const onObject = intersections.length > 0;

					const delta = ( time - prevTime ) / 1000;

					velocity.x -= velocity.x * 10.0 * delta;
					velocity.z -= velocity.z * 10.0 * delta;

					velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass

					direction.z = Number( moveForward ) - Number( moveBackward );
					direction.x = Number( moveRight ) - Number( moveLeft );
					direction.normalize(); // this ensures consistent movements in all directions

					if ( moveForward || moveBackward ) velocity.z -= direction.z * 400.0 * delta;
					if ( moveLeft || moveRight ) velocity.x -= direction.x * 400.0 * delta;

					if ( onObject === true ) {

						velocity.y = Math.max( 0, velocity.y );
						canJump = true;

					}

					controls.moveRight( - velocity.x * delta );
					controls.moveForward( - velocity.z * delta );

					controls.getObject().position.y += ( velocity.y * delta ); // new behavior

					if ( controls.getObject().position.y < 10 ) {

						velocity.y = 0;
						controls.getObject().position.y = 10;

						canJump = true;

					}
					if(person){

						// 同步移动人物位置
						let personPosition =camera.position
						person.position.set(personPosition.x,personPosition.y-8,personPosition.z-2)

						// 同步修改人物方向
						let dir1=new THREE.Vector3()
						// todo 注意此处获得的是方向向量,需要添加该处的position才能获得目标位置
						controls.getDirection(dir1)
						let targetPt=person.position.clone()
						// 获取目标位置
						targetPt.add(dir1)
						person.lookAt(targetPt);
					}

				}

				prevTime = time;
				roleAction()
				renderer.render( scene, camera );

			}
			function roleAction() {
				let dt = clock.getDelta();
				if (mixer) mixer.update(dt);
				//handleRoleAction();
			}
			function fadeToAction(name, duration) {
				previousAction = currentAction;
				currentAction = stateList[name];
				if (previousAction !== currentAction) {
					previousAction.fadeOut(duration);
				}
				if (currentAction) {
					currentAction
							.reset()
							.setEffectiveTimeScale(1)
							.setEffectiveWeight(1)
							.fadeIn(duration)
							.play();
				}
			}

		</script>
	</body>
</html>

最终效果

效果

如有不足之处欢迎来指正，交流QQ 1826356125

Three.js引擎开发：Three.js控制器开发_（14）.Three.js控制器的实际项目应用案例
chenlz2007的博客
06-06 660
通过本节的学习，我们了解了如何在虚拟现实游戏中使用Three.js控制器来实现复杂的交互和控制功能。具体包括角色控制（移动、旋转、跳跃）、相机控制（第一人称、第三人称）和物体交互（拾取、放置、碰撞检测、拖拽、跟随）等。这些功能不仅提升了游戏的互动性，还增强了玩家的沉浸感。在实际项目中，根据游戏的需求和设计，可以灵活组合这些控制器和交互方式，实现更加丰富和复杂的游戏体验。希望这些示例能帮助你更好地理解和应用Three.js控制器。
ThreeJs控制模型骨骼实现数字人
最新发布
Baker的博客
08-05 1673
加载完成后就可以得到一个静止的卡通女孩模型，因为没有加载动作文件，所以任务是不会动的，接下来就要使用js修改骨骼模型位置让她动起来，首先我们需要把加载的人物模型骨骼打印出来看下，刚才加载的方法中已经添加了打印骨骼的方法，可以看到一共140个骨骼，每个骨骼的name标示了这个骨骼属于哪部分，这样就更方便我们等会操作指定的骨骼了。首先我们还是需要搭建出场景，这部分可以按照之前的章节提供的方法搭建，然后在场景中添加pmd模型，我们还拿之前的初音人物模型演示。threejs控制嘴巴和头发动。
Three.js漫游相机控制器/three.js第三人称视角漫游/three.js第一人称视角漫游
hlfkyo的专栏
09-25 2215
Three.js漫游相机控制器/three.js第三人称视角漫游/three.js第一人称视角漫游
Threejs中使用JoyStick库实现游戏手柄来控制人物的移动和朝向
左本Web3D
05-04 2362
首先，我们需要为Three.js创建一个基本的场景，一个相机和一个人物模型。然后，我们需要创建一个游戏手柄控制器，这里我们使用了已经封装好的JoyStick类库。拖动手柄控制器人物进行移动并且朝向移动方向。
three.js实现第三视角人物漫游
weixin_50379372的博客
07-28 2738
three.js实现第三视角人物漫游 three.js实现第三视角人物漫游 three.js实现第三视角人物漫游 three.js实现第三视角人物漫游
Three.js系列: 写一个第一/三人称视角小游戏
程序员秋风的博客
03-02 5241
大家好，我是秋风，在上一篇 中说到了 Three.js 系列的目标以及宝可梦游戏，那么今天就来通过 Three.js 来谈谈关于游戏中的视角跟随问题。相信我的读者都或多或少玩一些游戏，例如王者荣耀、绝地求生、宝可梦、塞尔达、原神之类的游戏。那么你知道他们分别是什么视角的游戏么？你知道第一人称视角和第三人称视角的差异么？通过代码我们怎么能实现这样的效果呢？如果你对以上问题好奇，并且不能完全回答。那么请跟随着我一起往下看吧。 视角讲解 首先我们先来看看第一人称视角、第三人称视角的概念。其实对于我们而言 第一人称
83 Three.js 使用PointerLockControls控制相机实现射击游戏视角
现在学习也不晚
04-02 1万+
简历 指针锁定API允许您在游戏界面中锁定鼠标或其他指针设备，以便您不用绝对定位光标就可以获得坐标变化值，从而准确地判断用户正在做什么，并且还可以防止用户意外地进入另一块屏幕或别的什么地方，从而导致误操作。 这一篇是我从官网上获得的相关控制器的，然后通过官网的案例进行一下修改扩展了一下功能。将案例实现了简单的碰撞检测。 案例实现 案例查看地址：http://www.wjceo.com/...
three.js 第一人称漫游
m0_60648668的博客
02-09 3971
three.js 第一人称移动跳跃及碰撞检测
vue+threejs通过OrbitControls控制模型
YanGo的博客
05-06 4318
最近在学习threejs，因为都是在html写的，所以自己想结合vue去实现threejs的3D模型，然后遇到了许多坑[说多了都是泪] 其他的坑就不多说了 下面实现一下引入OrbitControls控制模型 参考了Beam007博主的方法 安装imports-loader and exports-loader(用于向一个模块的作用域内注入变量、从模块中导出变量)npm install impor...
threejs以第一人称进行人物漫游，以wasd来控制人的模型，不使用PointerLockControls，需要碰撞检测。可以使用插件
书读百遍，其义自见
03-22 2522
threejs以第一人称进行人物漫游，以wasd来控制人的模型，不使用PointerLockControls，需要碰撞检测。可以使用插件
使用three.js实现跟随模型的第一人称、第三人称相机控制
热门推荐
凡事有果必有因
06-08 1万+
最近在我原有的“室内场景demo”的基础上做了一个跟随模型的第三人称相机控制，以键盘wasd控制模型的行走，以鼠标控制模型的朝向。 在线地址 一、加载带动画的FBX模型 这里使用了three.js中的FBXLoader来加载模型，模型加载完成之后创建动画不播放，等键盘按下之后再播放动画。 二、监听键盘事件 键盘的按下和抬起都可以通过事件捕捉，当鼠标按下时，我们播放FBX模型的动画，鼠标抬起时，结束动画。 window.addEventListener('keydown', fun...
three.js自定义第一人称键盘控制
12-27
居于three.js，实现键盘控制前进后退，上升下降的第一人称控制。
js键盘事件实现人物的行走
10-15
主要为大家详细介绍了js键盘事件实现人物的行走，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
three.js仿人行走的动画效果
04-08
利用three导入json模型 饼渲染 加上three自带的动画效果 模拟像人一样走路的动画。
threejs-camera-controller-first-person-desktop
05-09
threejs相机控制器第一人称桌面 用于通过Web浏览器友好的FPS的摄像机控制器，使用键盘和鼠标进行控制。 用法 执照 麻省理工学院，有关详细信息，请参阅 。
three.js室内场景+模型第三人称行走demo
05-21
three.js室内场景+模型第三人称行走demo 跟随模型的第三人称相机控制，以键盘wasd控制模型的行走，以鼠标控制模型的朝向。 具体效果参见：https://blog.csdn.net/u014529917/article/details/106610955
three.js应用篇（五）模型内第一视角漫游
weixin_44137047的博客
05-12 1064
three.js实现第一视角漫游
如何使用threejs实现第一人称视角的移动
weixin_38166686的博客
09-22 4881
在数据可视化领域利用webgl来创建三维场景或VR已经越来越普遍，各种开发框架也应运而生。今天我们就通过最基本的threejs来完成第一人称视角的场景巡检功能。如果你是一位threejs的初学者或正打算入门，我强烈推荐你仔细阅读本文并在我的代码基础之上继续深入学习。因为它将是你能够在网上找到的最好的免费中文教程，通过本文你可以学习到一些基本的三维理论，threejs的api接口以及你应该...
three.js第一人称视角控制+全屏+鼠标锁定处理
dvb1188的博客
10-28 4422
three.js第一人称视角控制+全屏+鼠标锁定处理视角控制改变全屏监听全屏事件并锁定鼠标 视角控制改变 以下代码根据FirstPersonControls.js修改，github地址:FirstPersonControls.js //改变为根据鼠标移动的幅度移动视角 this.onMouseMove = function ( event ) { //新增，判断鼠标移动 this.mous...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值