ThreeJs实现发光描边

????????在很多数字孪生场景中会有交互操作，比如选中一个物体，但是为了很好的凸显选中的物体一般会有几种效果，比如将选中的物体向上移动一定的距离，或者是改变选中模型对象的颜色，这两种实现方式都是通过改变模型的属性，一个是改变position的值，另一个是改变material的color属性，今天这里要说的是第三种方式，给物体添加发光描边，也是很多数字孪生场景经常用到的一种方式。发光描边的实现需要引入几个组件，分别是EffectComposer，RenderPass和OutlinePass。

????????EffectComposer是Threejs的一个工具，它允许在场景渲染完毕后再增加一些特效，如让场景在某些情况下变得更加模糊或者更加鲜艳，增加滤镜或者闪烁效果，使扫描线添加老旧电视屏幕上的效果等。EffectComposer可以向其添加多个Pass对象，处理通道以产生最终的视觉效果。每个Pass可以是一些后期处理效果，如添加晕影，模糊，应用绽放，应用胶片颗粒，调整色调，饱和度，对比度等。

? ? ? ? RenderPass是ThreeJs的一个通道，他会在当前场景和摄像机的基础上渲染出一个新场景，这个通道只会渲染场景，但不会把结果输出到场景上。

? ? ? ? OutlinePass是ThreeJs的一个后处理效果，它用于在渲染的场景中添加轮廓线，这种效果通常用于突出显示场景中的特定对象或区域，OutlinePass可以设置轮廓线的颜色，样式，宽度等。

? ? ? ? 使用前先引入三个组件，

import {RenderPass} from 'three/examples/jsm/postprocessing/RenderPass';
import {OutlinePass} from 'three/examples/jsm/postprocessing/OutlinePass';
import {EffectComposer} from 'three/examples/jsm/postprocessing/EffectComposer';

为了更好的展示效果，我们现在场景中添加一个正方体，然后在正方体的轮廓上添加发光描边效果：

 // 立方体
    initCube() {
      const geometry = new THREE.BoxGeometry(2, 2, 2);
      const material = new THREE.MeshBasicMaterial({color: 0x00ffff});
      this.cube = new THREE.Mesh(geometry, material);
      this.scene.add(this.cube);
      this.camera.position.z = 5;
    },
//给正方体添加描边效果
initOutlinePass() {
      let renderScene = new RenderPass(this.scene, this.camera);
      let outlinePass = new OutlinePass(
          new THREE.Vector2(window.innerWidth, window.innerHeight),
          this.scene,
          this.camera,
          [this.cube]
      );
      // 将此通道结果渲染到屏幕
      outlinePass.renderToScreen = true
      outlinePass.edgeGlow = 1 // 发光强度
      outlinePass.usePatternTexture = false // 是否使用纹理图案
      outlinePass.edgeThickness = 10 // 边缘浓度
      outlinePass.edgeStrength = 10 // 边缘的强度，值越高边框范围越大
      outlinePass.pulsePeriod = 2// 闪烁频率，值越大频率越低
      outlinePass.visibleEdgeColor.set('#ffff00') // 呼吸显示的颜色
      outlinePass.hiddenEdgeColor.set('#ff0000') // 不可见边缘的颜色
      // 将通道加入组合器
      this.composer = new EffectComposer(this.renderer);
      this.composer.addPass(renderScene);
      this.composer.addPass(outlinePass);
    },
    //在渲染中添加渲染
    requestAnimationFrame() {
      this.composer.render();
      requestAnimationFrame(this.requestAnimationFrame);
    },

效果如下：