three.js如何实现简易3D机房？（四）点击事件+呼吸灯效果

Her...

已于 2024-05-09 17:17:14 修改

阅读量891

点赞数 15

分类专栏： three.js 文章标签： 3d 前端 javascript vue.js

于 2024-03-06 15:47:54 首次发布

本文链接：https://blog.csdn.net/weixin_48082900/article/details/136505525

版权

three.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

接上一篇：

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

完整源码地址:computerRoom-demo: 3d机房源码

不完美的地方还有很多，多多包涵~

八、点击事件

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);
});

完结，撒花

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