// 引入后期處理基本的對象
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
...
//  因為是介紹后期渲染，省略場景初始化等代碼

// 初始化效果組合器
this.EffectComposer = new EffectComposer(this.renderer)
// 添加基本的渲染通道
this.RenderPass = new RenderPass(this.scene, this.camera)
// 把通道加入到組合器
this.EffectComposer.addPass(this.RenderPass)

// 渲染方法，不斷調(diào)用render()
_animate() {
  requestAnimationFrame(this._animate.bind(this))
  // 組合器執(zhí)行渲染
 this.EffectComposer.render()
}

// 引入
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'

this.EffectComposer = new EffectComposer(渲染器)

this.EffectComposer.addPass(通道)

this.EffectComposer.render()

this.RenderPass = new RenderPass(this.scene, this.camera)

const effectCopyPass = new ShaderPass(著色器代碼)

// 引入
import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js'
// 初始化通道
const Pass = new GlitchPass()
// 將此通道結(jié)果渲染到屏幕
Pass.renderToScreen = true
// 把通道加入到組合器
this.EffectComposer.addPass(Pass)

// 傳入長寬、場景、相機
const Pass = new OutlinePass(new THREE.Vector2(this.width, this.height), this.scene, this.camera)
// 將此通道結(jié)果渲染到屏幕
Pass.renderToScreen = true
// OutlinePass相關(guān)屬性設(shè)置
Pass.visibleEdgeColor = new THREE.Color(76, 148, 156) // 可見邊緣的顏色
Pass.hiddenEdgeColor = new THREE.Color(0, 1, 0) // 不可見邊緣的顏色
Pass.edgeGlow = 1.0 // 發(fā)光強度
Pass.usePatternTexture = false // 是否使用紋理圖案
Pass.edgeThickness = 2.0 // 邊緣濃度
Pass.edgeStrength = 2.0  // 邊緣的強度，值越高邊框范圍越大
Pass.pulsePeriod = 0 // 閃爍頻率，值越大頻率越低

// 一般生產(chǎn)環(huán)境中會配合鼠標(biāo)事件，來改變selectedObjects，使選中的物體描邊
Pass.selectedObjects = [需要添加外邊框的網(wǎng)格模型]
// 將通道加入組合器
this.EffectComposer.addPass(Pass)

// 引入
import { BloomPass } from 'three/examples/jsm/postprocessing/BloomPass.js'
import { CopyShader } from 'three/examples/jsm/shaders/CopyShader.js'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'

// 參數(shù)默認(rèn)值strength = 1, kernelSize = 25, sigma = 4, resolution = 256
const Pass = new BloomPass(2.5, 25, 0.1, this.width)
// 加入到組合器
this.EffectComposer.addPass(Pass)

// BloomPass通道不能通過renderToScreen=true將結(jié)果渲染到屏幕上，
// 所以需要再加一個通道effectCopyPass來完成輸出結(jié)果這一步
// effectCopyPass通道沒有任何特殊效果, 只是輸出結(jié)果
const effectCopyPass = new ShaderPass(CopyShader)
effectCopyPass.renderToScreen = true
// 加入到組合器
this.EffectComposer.addPass(effectCopyPass)