天津百度网站快速排名,网站建设岗位能力评估表,西三旗网站建设,平面设计师网上接单接上一篇#xff1a;
three.js如何实现简易3D机房#xff1f;#xff08;三#xff09;显示信息弹框/标签#xff1a;http://t.csdnimg.cn/5W2wA
目录
八、点击事件
1.实现效果
2.获取相交点
3.呼吸灯效果
4.添加点击事件
5.问题解决 八、点击事件
1.实现效果 2.…接上一篇
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);
});
完结撒花
✿✿ヽ(°▽°)ノ✿ ✿✿ヽ(°▽°)ノ✿ ✿✿ヽ(°▽°)ノ✿
