vue项目中，Threejs 点击模型，高亮发光模型外轮廓

效果如图，点击哪块，对应显示边框线，带呼吸灯

1、引入依赖

import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer"
import {RenderPass} from "three/examples/jsm/postprocessing/RenderPass"
import {OutlinePass} from "three/examples/jsm/postprocessing/OutlinePass"
import {ShaderPass} from "three/examples/jsm/postprocessing/ShaderPass"
import {FXAAShader} from "three/examples/jsm/shaders/FXAAShader"

2、定义数据

composer:null,
outlinePass:null,
renderPass:null,

3、vue文件中，
监听模型的点击事件this.renderer.domElement.addEventListener('click', this.modelMouseClick, false)，
渲染 this.composer.render()，
并根据点击的模块为模块添加光效this.outlineObj([intersects[0].object])

 // 最后的渲染
    render() {
      let animate = () => {
        //循环调用函数
        this.clearAnim = requestAnimationFrame(animate)
        //更新相机控件
        this.controls && this.controls.update()
        //渲染界面
        this.renderer.render(this.scene, this.camera)
        if(this.composer){
          this.composer.render()
        }
      }
      animate()
      //  为模型绑定点击事件
      this.renderer.domElement.addEventListener('click', this.modelMouseClick, false)
    },

// 模型的点击事件
modelMouseClick( event ) {
      let raycaster = new THREE.Raycaster();
      let mouse = new THREE.Vector2();
      // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
      mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
      mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
      raycaster.setFromCamera(mouse, this.camera);

      const intersects = raycaster.intersectObjects(this.scene.children);
      // 根据它来判断点击的什么，length为0即没有点击到模型
      console.log(intersects.length ? intersects[0].object.name : intersects, 'intersects----->>>')
      if(intersects.length){
        this.outlineObj([intersects[0].object])
      }
},

4、添加高亮发光模型外轮廓效果

//高亮显示模型（呼吸灯）
    outlineObj (selectedObjects) {
      // 创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。
      this.composer = new EffectComposer(this.renderer)
      // 新建一个场景通道  为了覆盖到原理来的场景上
      this.renderPass = new RenderPass(this.scene, this.camera)
      this.composer.addPass(this.renderPass);
      // 物体边缘发光通道
      this.outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), this.scene, this.camera, selectedObjects)
      this.outlinePass.selectedObjects = selectedObjects
      this.outlinePass.edgeStrength = 10.0 // 边框的亮度
      this.outlinePass.edgeGlow = 1// 光晕[0,1]
      this.outlinePass.usePatternTexture = false // 是否使用父级的材质
      this.outlinePass.edgeThickness = 1.0 // 边框宽度
      this.outlinePass.downSampleRatio = 1 // 边框弯曲度
      this.outlinePass.pulsePeriod = 5 // 呼吸闪烁的速度
      this.outlinePass.visibleEdgeColor.set(parseInt(0x00ff00)) // 呼吸显示的颜色
      this.outlinePass.hiddenEdgeColor = new THREE.Color(0, 0, 0) // 呼吸消失的颜色
      this.outlinePass.clear = true
      this.composer.addPass(this.outlinePass)
      // 自定义的着色器通道 作为参数
      let effectFXAA = new ShaderPass(FXAAShader)
      effectFXAA.uniforms.resolution.value.set(1 / window.innerWidth, 1 / window.innerHeight)
      effectFXAA.renderToScreen = true
      this.composer.addPass(effectFXAA)
    },

此文引用于文章gis开发，亲测可用