Threejs实现鼠标点击人物行走/镜头跟随人物移动/鼠标点击动画/游戏第三人称/行走动作_three.js模拟人员进入场景使用键盘和鼠标控制人员在场景内移动

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

1，功能介绍

Threejs获取鼠标点击位置、实现鼠标点击人物行走、人物头顶显示名称标签、镜头跟随人物移动并且镜头围绕人物旋转，类似游戏中第三人称、鼠标点击位置有动画效果，如下效果图

2，功能实现

获取鼠标点击位置 ，使用Threejs射线Raycaster和数学库中Plane平面，官方文档地址： three.js docs ，平面（Plane）是在三维空间中无限延伸的二维平面，原理就是创建一个射线与平面相交，取相交位置的点就是鼠标点击的位置

// 拾取对象
function pickupObjects(event) {
  // 点击屏幕创建光线投射用于进行鼠标拾取
  var raycaster = new THREE.Raycaster();
  // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
  var vector = new THREE.Vector2((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window
						.innerHeight) * 2 + 1);
  var fxl = new THREE.Vector3(0, 1, 0);
  // 创建平面 设置平面法向量Vector3 和 原点到平面距离
  var groundplane = new THREE.Plane(fxl, 1);
  raycaster.setFromCamera(vector, camera);
  var ray = raycaster.ray;
  let intersects = ray.intersectPlane(groundplane);
  console.log(intersects)
document.addEventListener('click', pickupObjects);

这里注意平面法向量Vector3(0, 1, 0) 代表平面的正方向是沿Y轴向上的，距离1代表平面到原点的距离，符号代表和法向量的方向相反，所以这个平面在Y轴正方向。

引入人物模型， 使用模型加载器 THREE.GLTFLoader 加载人物模型，人物头顶显示名称标签并播放人物站立动画，注意播放动画需要 requestAnimationFrame 实时更新动画

// 加载人物模型，模型glb格式
let gloader = new THREE.GLTFLoader()
gloader.load("model/people.glb", result => {
	peopleObj = result.scene;
	peopleAnimations = result.animations;
	// 主人物名字，并设置相对位置
	let spriteText = getTextCanvas("左本博客");
	spriteText.position.set(0, 2, 0);
	peopleObj.add(spriteText);
	// 组合对象添加到场景中
	scene.add(peopleObj);
	// 默认播放人物站立动画
	mixer = new THREE.AnimationMixer(peopleObj);
	mixerArr.push(mixer)
	activeAction = mixer.clipAction(peopleAnimations[0]);
	activeAction.play();
人物名称标签，创建Canvas写入文本，使用THREE.CanvasTexture从Canvas元素中创建纹理贴图作为材质THREE.SpriteMaterial，创建一个物体精灵（Sprite） 
// 创建文字精灵
var getTextCanvas = function(text) {
	let option = {
			fontFamily: 'Arial',
			fontSize: 30,
			fontWeight: 'bold',
			color: '#ffffff',
			actualFontSize: 0.08,
		canvas, context, textWidth, texture, materialObj, spriteObj;
	canvas = document.createElement('canvas');
	context = canvas.getContext('2d');
	// 先设置字体大小后获取文本宽度
	context.font = option.fontWeight + ' ' + option.fontSize + 'px ' + option.fontFamily;
	textWidth = context.measureText(text).width;
	canvas.width = textWidth;
	canvas.height = option.fontSize;
	context.textAlign = "center";
	context.textBaseline = "middle";
	context.fillStyle = option.color;
	context.font = option.fontWeight + ' ' + option.fontSize + 'px ' + option.fontFamily;
	context.fillText(text, textWidth / 2, option.fontSize / 1.8);
	texture = new THREE.CanvasTexture(canvas);
	materialObj = new THREE.SpriteMaterial({
		map: texture
	spriteObj = new THREE.Sprite(materialObj);
	spriteObj.scale.set(textWidth / option.fontSize * option.actualFontSize, option.actualFontSize, option
		.actualFontSize);
	return spriteObj;
鼠标点击位置动画，使用图片加载器THREE.ImageLoader加载如下透明图片，创建canvas作为THREE.MeshBasicMaterial材质贴图并设置透明和两面渲染，设置定时顺序更新材质 
// 鼠标点击位置出现动画效果
function clickEffect() {
	var textures = [];
	var index = 0;
	var clickEffectMesh;
	// 加载图片
	var loader = new THREE.ImageLoader();
	loader.load("img/spotd.png", function(image) {
		let canvas, context, geometry, material, plane;
		let w = image.width;
		let num = image.height / image.width;
		for (let i = 0; i < num; i++) {
			textures[i] = new THREE.Texture();
		for (let i = 0; i < num; i++) {
			canvas = document.createElement('canvas');
			context = canvas.getContext('2d');
			canvas.height = w;
			canvas.width = w;
			context.drawImage(image, 0, w * i, w, w, 0, 0, w, w);
			textures[i].image = canvas;
			textures[i].needsUpdate = true;
		// 创建平面几何体，添加图片材质并设置透明和两面渲染
		geometry = new THREE.PlaneGeometry(1, 1);
		material = new THREE.MeshBasicMaterial({
			map: textures[0],
			transparent: true,
			side: THREE.DoubleSide,
		clickEffectMesh = new THREE.Mesh(geometry, material);
		clickEffectMesh.rotateX(Math.PI / 2);
		clickEffectMesh.visible = false;
		scene.add(clickEffectMesh);
	// 播放动画，设置定时顺序更新材质
	this.effect = function(x, y, z) {
		clickEffectMesh.visible = true;
		clickEffectMesh.position.set(x, y, z);
		let id = setInterval(function() {
			if (index == 10) {
				index = 0;
				clickEffectMesh.visible = false;
				clearInterval(id);
			clickEffectMesh.material.map = textures[index];
			index++;
		}, 20)
 鼠标点击人物行走，使用TWEEN.Tween实现人物行走并播放人物行走动画，设置人物朝向行走方向，更新控制器目标中心位置及相机与人物保持相对距离 
// 人物当前位置
let originPositon = new THREE.Vector3(peopleObj.position.x, 0, peopleObj.position.z);
// 任务目标位置
let targetPositon = new THREE.Vector3(intersects.x, 0, intersects.z);
clickEffectObj.effect(intersects.x, 0, intersects.z);
// 移动距离
let distance = originPositon.distanceTo(targetPositon);
peopleObj.lookAt(intersects.x, 0, intersects.z);
// 在传入的时间间隔内，逐渐将此动作的权重（weight）由1降至0
// 判断当前人物是否空闲状态，如果空前则改成步行状态
if (activeAction.getClip() != peopleAnimations[1]) {
	activeAction.fadeOut(0.2);
	activeAction = mixer.clipAction(peopleAnimations[1]);
	activeAction
		.reset()
		.setEffectiveTimeScale(1)
		.setEffectiveWeight(2)
		.fadeIn(0.2)
		.play();
if (tween) {
	TWEEN.remove(tween);
tween = new TWEEN.Tween(originPositon)
	.to(targetPositon, distance * 800)
	.easing(TWEEN.Easing.Linear.None)
	.onComplete(function() {
		activeAction.fadeOut(0.2);
		activeAction = mixer.clipAction(peopleAnimations[0]);
		activeAction
			.reset()
			.setEffectiveTimeScale(1)
			.setEffectiveWeight(2)
			.fadeIn(0.2)
			.play();
	.onUpdate(function() {
		peopleObj.position.set(this.x, 0.04, this.z);
		let pos = peopleObj.position.clone();
		pos.y = 1;
		controls.target = pos;
		controls.update();
	.start();
更多在线案例：左本的博客
                                    当我们使用鼠标操作three.js渲染出的对象时，不仅仅只是仅限用鼠标对场景的放大、缩小、旋转而已，还有鼠标左键、右键的点击以及键盘各种按键等等的事件。我们需要捕获这些事件，并在这些事件的方法里进行相关的操作。
接下来是干货
在【three.js第六课】的基础上，对代码进行整理后。得到本次试验的源码。下面的代码是在原来的第六课的基础上将对应的代码写成方法再进行调用的。
<!DOCTY...
                                    Threejs实现键盘控制人物行走和跳动、使用八叉树Octree和胶囊体Capsule进行碰撞检测、人物头顶显示名称标签、镜头跟随人物移动并且镜头围绕人物旋转，类似游戏中第三人称。如下效果图。
                                    在Three.js中如何创建一个人物行走动画以及如何优化人物行走效果，以实现更加自然流畅的动画效果。通过上面的介绍，我们了解了如何实现Three.js中的人物行走效果，并探讨了如何优化这个效果。在实际开发中，我们需要根据具体的需求和场景选择合适的技术和优化方式，以实现更加高效、自然流畅的人物行走效果。
                                    当然，glb里面直接集成了位移的动画也不是不可以，但这样的轨迹控制就不方便。gltf是可以集成动画的，像行人行走的动画，一般是通过骨骼动画实现的。一个gltf里面可以有多组动画，加载到three.js引擎里面之后，可以选择所需要的动画进行播放。在这段代码里面，model1和model2的position属性被不停地更改，所以在场景刷新的时候，人物就走动起来了。第二个参数是一个回调函数，当加载完毕之后，我们就开始调用骨骼动画了。右下角可以切换不同的动画，这个例程里面有4个动画，奔跑、慢走、站立、伸展。
<div class="modelsBox">
  <div class="modelsBox_wrapper" v-if="f"></div>
  <div :id="`sign${idx + 1}`" style="position: absolute;" v-for="(v, idx) in labels" :key="idx">
    <div class="sign" :uuid="v.uuid"...
                                    首先我们需要两个模型，一个是场景模型，另一个是人物模型。
人物模型我这里用的Threejs官网中的给的模型，名称是。
当然人物模型也可以自己去这个网站下载sketchfab，下载后给模型添加动画mixamo
下载模型动画这里注意一下用Blander软件给模型添加动画的两种方式，具体写法的区别后面会说到方式一：把每个单独的动画拆分出来
方式二：将所用到的动画统一放在一个时间戳中
场景加载完后再放入人物模型：
这里需要将控制器给取消，并且将初始镜头删除，把镜头给到人物模型
到这里模型就全部引入完成
注意：视频无