Three.js 實現材質邊緣通道發光效果

相關API的使用：

1. EffectComposer（渲染后處理的通用框架，用于將多個渲染通道（pass）組合在一起創建特定的視覺效果）

2. RenderPass(是用于渲染場景的通道。它將場景和相機作為輸入，使用Three.js默認的渲染器（renderer）來進行場景渲染，并將結果輸出給下一個渲染通道)

3. OutlinePass(是一個用于創建邊緣線（輪廓）效果的通道。它基于深度信息以及法線信息，將與邊緣相接觸的物體進行描邊，以突出顯示物體的輪廓)

4. ShaderPass（是一個自定義著色器的通道。它允許你指定自定義的著色器代碼，并將其應用于場景的渲染結果。這樣你可以創建各種各樣的圖形效果，如高斯模糊、后處理效果等）

在上一篇 Three.js加載外部glb,fbx,gltf,obj 模型文件 的文章基礎上加入createEffectComposer（創建效果合成器）的方法和onChangeModelMeaterial（選擇材質）的方法

首先引入相關的api

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'

創建效果合成器方法

	// 創建效果合成器createEffectComposer() {const { clientHeight, clientWidth } = this.containerthis.effectComposer = new EffectComposer(this.renderer)const renderPass = new RenderPass(this.scene, this.camera)this.effectComposer.addPass(renderPass)this.outlinePass = new OutlinePass(new THREE.Vector2(clientWidth, clientHeight), this.scene, this.camera)this.outlinePass.visibleEdgeColor = new THREE.Color('#4d57fd') // 可見邊緣的顏色this.outlinePass.hiddenEdgeColor = new THREE.Color('#8a90f3') // 不可見邊緣的顏色this.outlinePass.edgeGlow = 2.0 // 發光強度this.outlinePass.edgeThickness = 1 // 邊緣濃度this.outlinePass.edgeStrength = 4 // 邊緣的強度，值越高邊框范圍越大this.outlinePass.pulsePeriod = 100 // 閃爍頻率，值越大頻率越低this.effectComposer.addPass(this.outlinePass)// 抗鋸齒let effectFXAA = new ShaderPass(FXAAShader)effectFXAA.uniforms.resolution.value.set(1 / clientWidth, 1 / clientHeight)this.effectComposer.addPass(effectFXAA)}

選擇材質方法，通過getObjectByName傳入材質名稱獲取到需要設置發光效果的材質，在通過設置效果合成器的 selectedObjects參數來實現材質發光效果·

  onChangeModelMeaterial(name) {const mesh = this.model.getObjectByName(name)this.outlinePass.selectedObjects = [mesh]	}

將原sceneAnimation（場景動畫幀渲染的方法）中的 renderer.render() 改為 controls.update()

	sceneAnimation() {this.renderAnimation = requestAnimationFrame(() => this.sceneAnimation())this.effectComposer.render()this.controls.update()//this.renderer.render(this.scene, this.camera)}