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();
更多在线案例：左本的博客
