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 = []

　　

  // 锯齿处理代码放置位置。

} 

调用实现高亮 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)

　效果

 

 。。。。。。