three.js点击建模高亮EffectComposer

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

/** 鼠标点击事件, */
      clickGet(event) {
        let that = this
        let intersects = that.getMouse(event)
        //为什么 点击只需要获取0，因为点击有贯穿效果，有时候一个模型背后还有很多模型，这个时候获取的数组是按近到远排序，所以说只需要获取第一个
        if (intersects.length > 0 && intersects[0].object.name != '机柜' && intersects[0].object.userData.name != '地板' &&
          intersects[0].object.type != 'GridHelper') {
          this.outlineObj([intersects[0].object])
          if (intersects[0].object.name == 'JX_2') {
            this.nums = 2
          } else if (intersects[0].object.name == 'JX_3') {
            this.nums = 3
          } else if (intersects[0].object.name == 'JX_4') {
            this.nums = 4
          }
          this.dialogVisible = true

          // let initPosition = {
          //         x: camera.position.x,
          //         y: camera.position.y,
          //         z: camera.position.z,
          //       };
          // let tween = new TWEEN.Tween(initPosition)
          //     .to({ x: intersects[0].object.position.x, y: intersects[0].object.position.y, z: intersects[0].object.position.z }, 2000)
          //     .easing(TWEEN.Easing.Sinusoidal.InOut);
          //   let onUpdate = (pos) => {
          //     let x = pos.x;
          //     let y = pos.y;
          //     let z = pos.z;
          //     if (pos.z < 0) {
          //       camera.position.set(x, y, z - 12);
          //     } else {
          //       camera.position.set(x, y, z + 12);
          //     }
          //   };
          //   tween.onUpdate(onUpdate);
          //   tween.start();

        }
      },

将this.outlineObj()放入点击事件即可高亮！！