效果图

代码

1. 引入资源文件，在初始化时创建后处理对象

    // 用于边缘高亮的插件// 引入后处理扩展库EffectComposer.jsimport { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";// 引入渲染器通道RenderPassimport { RenderPass } from "three/addons/postprocessing/RenderPass.js";// 引入OutlinePass通道import { OutlinePass } from "three/addons/postprocessing/OutlinePass.js";// 伽马校正后处理Shaderimport { GammaCorrectionShader } from "three/addons/shaders/GammaCorrectionShader.js";// ShaderPass功能：使用后处理Shader创建后处理通道import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";// SMAA抗锯齿通道import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js';// 引入3D渲染器import { CSS3DRenderer, CSS3DObject,CSS3DSprite } from 'three/addons/renderers/CSS3DRenderer.js';// 创建后处理对象-用于选中高亮function createComposer(){//创建后处理对象EffectComposer,webGL渲染器作为参数composer=new EffectComposer(renderer);//创建一个渲染器通道，场景和相机作为参数const renderPass=new RenderPass(scene,camera);//设置renderPass通道composer.addPass(renderPass);//创建OutlinePass通道const v2=new THREE.Vector2(window.innerWidth,window.innerHeight);outlinePass=new OutlinePass(v2,scene,camera);//颜色outlinePass.visibleEdgeColor.set(0x00ffff);//厚度outlinePass.edgeThickness = 4;//亮度outlinePass.edgeStrength = 6;// 闪烁次数outlinePass.pulsePeriod  = 2;// 光晕[0,1]  边缘微光强度outlinePass.edgeGlow = 1; //添加到后处理对象中composer.addPass(outlinePass);//获取.setPixelRatio()设置的设备像素比const pixelRatio = renderer.getPixelRatio();// 抗锯齿const smaaPass = new SMAAPass(window.innerWidth * pixelRatio, window.innerHeight * pixelRatio);composer.addPass(smaaPass);// 创建伽马校正通道-用于模型颜色修正const gammaPass = new ShaderPass(GammaCorrectionShader);composer.addPass(gammaPass);}

2. 配合点击事件，实现点击模型后高亮该模型

    // 点击事件document.addEventListener('mouseup', function (event) {const intersects = calcIntersects(event)let x2 = (event.clientX / window.innerWidth) * 2 - 1let y2 = -(event.clientY / window.innerHeight) * 2 + 1if(x == x2&&y==y2){// 判断是否有交点if (intersects.length > 0) {const pos = intersects[0].point;// 如果是我们要点击的模型let containsModelName = needClickModelList.some(item =>intersects[0].object.name.indexOf(item)!=-1);if(containsModelName){// 高亮被选中的模型outlinePass.selectedObjects = [intersects[0].object];var coords = intersects[0].point;coords.y = coords.y + 50clearDialog()createDialogHtml(coords,intersects[0].object.name) // 创建弹框}}}})

3. 循环渲染

    // 循环渲染function animate() {requestAnimationFrame(animate)  // 重新更新性能composer.render() //修改渲染器函数渲染方法为后渲染函数controls.update()}