接上一篇：

three.js如何实现简易3D机房？（三）显示信息弹框/标签：http://t.csdnimg.cn/5W2wA

目录

八、点击事件

1.实现效果

2.获取相交点

3.呼吸灯效果

4.添加点击事件

5.问题解决

---

八、点击事件

1.实现效果

2.获取相交点

官方射线拾取的原理：由相机位置为射线起点，鼠标点击位置为射线方向发射射线，所有被射线穿过的所有几何体都会被捕捉到，距离越近捕捉到的几何体越靠前

在threeD/init.js中

// 获取鼠标和射线的相交点
export function getIntersectPoint (event) {// 鼠标控制对象const mouse = new THREE.Vector2();// 初始化射线辅助器const raycaster = new THREE.Raycaster();// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)let rect = renderer.domElement.getBoundingClientRect()mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;//通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置raycaster.setFromCamera(mouse, camera);// 获取与射线相交的对象数组，其中的元素按照距离排序，越近的越靠前return raycaster.intersectObjects(scene.children, true);
}

3.呼吸灯效果

在threeD/init.js中

import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from "three/addons/postprocessing/RenderPass"
import { OutlinePass } from "three/addons/postprocessing/OutlinePass"
import { ShaderPass } from "three/addons/postprocessing/ShaderPass"
// SMAA抗锯齿通道
import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js';
// 颜色修正
import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';export let composer, renderPass, outlinePassexport function addOutlineEffect (selectedObjects, color) {composer = new EffectComposer(renderer);renderPass = new RenderPass(scene, camera);composer.addPass(renderPass);outlinePass = new OutlinePass(new THREE.Vector2(width, height), scene, camera);outlinePass.selectedObjects = selectedObjectsoutlinePass.edgeStrength = 8; // 发光的强度outlinePass.edgeGlow = 1; // 光晕outlinePass.usePatternTexture = false // 是否使用父级的材质outlinePass.edgeThickness = 8; // 边框的宽度outlinePass.downSampleRatio = 1 // 边框弯曲度outlinePass.pulsePeriod = 3; // 呼吸灯闪烁的速度outlinePass.visibleEdgeColor.set(color); // 呼吸显示的颜色outlinePass.hiddenEdgeColor.set(color); // 呼吸消失的颜色outlinePass.clear = truecomposer.addPass(outlinePass);//获取.setPixelRatio()设置的设备像素比const pixelRatio = renderer.getPixelRatio();// 抗锯齿const smaaPass = new SMAAPass(width * pixelRatio, height * pixelRatio);composer.addPass(smaaPass);// 模型颜色修正const gammaCorrectionShader = new ShaderPass(GammaCorrectionShader);composer.addPass(gammaCorrectionShader);
}

4.添加点击事件

业务逻辑：

（1）获取鼠标和射线的交点

（2）判断点击的几何体是否为设备，是则停止当前随机信息展示，清除前一个信息弹框；不是则清除呼吸灯和弹框，并继续开启随机显示正常设备信息的定时任务；

（3）在点击的几何体是设备的情况下，再次判断是否为报警设备，是只添加呼吸灯效果，否添加呼吸灯和信息弹框

在index.vue中

import {scene,composer,outlinePass,getDomInfo,init,createControls,initLight,createCSS3DRenderer,getIntersectPoint,addOutlineEffect,watchDom,renderResize,renderLoop,
} from './component/threeD/init.js';onMounted(async () => {init(threeDemoRef.value);importModel();createControls();initLight();createCSS3DRenderer(threeDemoRef.value);watchDom(threeDemoRef.value);renderResize(threeDemoRef.value);renderLoop();
});// 重置(清除呼吸灯和弹框,并继续随机显示正常设备的信息)
const resetRandomDialog = () => {if (outlinePass) {composer.removePass(outlinePass);clearDialog();createNormalDialog();}
};window.addEventListener('click', onClick, false);const onClick = (event: any) => {event.preventDefault();const intersects = getIntersectPoint(event);if (intersects.length) {const selectedDevice = intersects[0].object.parent;if (selectedDevice.name && selectedDevice.name.includes('AU')) {// 1.停止当前随机信息展示state.intervalId ? clearInterval(state.intervalId) : '';// 2.清除前一个弹框clearDialog();// 3.报警设备只添加呼吸灯效果,正常设备添加呼吸灯+弹框state.selectedDevice = { ...selectedDevice };const alarmName = state.alarmInfo.map((item: any) => item.name);if (alarmName.includes(selectedDevice.name)) {addOutlineEffect([selectedDevice], 0x8b1616);} else {addOutlineEffect([selectedDevice], 0x21793b);model.traverse((obj: any) => {if (obj.name.includes('AU') && obj.name == selectedDevice.name) {state.normalInfo.forEach((item: any) => {if (item.name == selectedDevice.name) {state.randomObject = { ...selectedDevice };insertDialogHtml(obj, item);}});}});}} else {resetRandomDialog();}} else {resetRandomDialog();}
};

到这儿差不多功能就已经全部实现了，但是问题来了，因为随机事件还在继续，切换到其他页面的时候会报错，最后就是一些小问题的解决了

5.问题解决

onUnmounted(() => {// 停止定时器clearInterval(state.intervalId);// 从场景中移除模型scene.remove(model.value);// 释放模型资源model.traverse((child: any) => {if (child instanceof THREE.Mesh) {child.geometry.dispose();child.material.dispose();}});// 停止点击事件window.removeEventListener('click', onClick);
});

完结，撒花

✿✿ヽ(°▽°)ノ✿                                        ✿✿ヽ(°▽°)ノ✿                                          ✿✿ヽ(°▽°)ノ✿