three 使用 EffectComposer实现模型发光，并处理模型锯齿问题

在使用 EffectComposer 和 RenderPass 实现模型发光后发现原来给render添加的抗锯齿无效了。

1. 实现模型发光。

依赖引入
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
　　import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
　　import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js'
　　import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'
　　import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js'

data定义
    composer:null,
    outlinePass:null
 
 
初始化方法，dom 表示three定义的div
  this.initPass(dom)
 
 
方法定义
initPass: (dom) {
  var domData = document.getElementById(dom)
 
  this.composer = new EffectComposer(this.renderer)
 
  const renderPass = new RenderPass(this.scene, this.camera)
  this.composer.addPass(renderPass)
 
  this.outlinePass = new OutlinePass(new THREE.Vector2(domData.clientWidth, domData.clientHeight), this.scene, this.camera)
  this.composer.addPass(this.outlinePass)
 
  this.outlinePass.renderToScreen = true
  this.outlinePass.edgeStrength = 5 // 粗
  this.outlinePass.edgeGlow = 0 // 发光
  this.outlinePass.edgeThickness = 2 // 光晕粗
  this.outlinePass.pulsePeriod = 0 // 闪烁
  this.outlinePass.visibleEdgeColor.set('green') // 设置显示的颜色
  this.outlinePass.selectedObjects = []
<br>　　  // 锯齿处理代码放置位置。} 
 
调用实现高亮 model表示需要高亮的模型
  this.outlinePass.selectedObjects =[model]
 
关闭高亮
  this.outlinePass.selectedObjects =[]

　　实现效果

2.抗锯齿

实现后，在场景中稍微旋转即发现模型存在锯齿，注释上面的发光代码后锯齿又恢复正常

抗锯齿代码，放置位置参考 initPass 方法内的注释

// 锯齿处理
  let fxaaPass = new ShaderPass(FXAAShader)
  const pixelRatio = this.renderer.getPixelRatio()
  fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / (domData.offsetWidth * pixelRatio)
  fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / (domData.offsetHeight * pixelRatio)
  this.composer.addPass(fxaaPass)