接上一篇：
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, outlinePass
export 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 = selectedObjects
outlinePass.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 = true
composer.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);
});完结，撒花
✿✿ヽ(°▽°)ノ✿ ✿✿ヽ(°▽°)ノ✿ ✿✿ヽ(°▽°)ノ✿
