先來個效果圖

之前寫的那個稍微有點問題，幀率只有30，參照官方代碼修改后，幀率可以達(dá)到50了，在不全屏的狀態(tài)下，幀率60

---

1.首先需要導(dǎo)入庫

// 用于模型邊緣高亮
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"
import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass.js"
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js"

然后需要注意，我這里使用的是vue的框架，但是對于變量的定義我用的是全局的定義。

// 模型邊緣高光
let composer;
let outlinePass;
let renderPass;
let effectFXAA;

2.添加EffectComposer效果組合器

add_composer() {// 創(chuàng)建一個EffectComposer（效果組合器）對象，然后在該對象上添加后期處理通道。composer = new EffectComposer(renderer)// 新建一個場景通道  為了覆蓋到原來的場景上renderPass = new RenderPass(scene, camera)composer.addPass(renderPass);// 物體邊緣發(fā)光通道outlinePass = new OutlinePass(mouse, scene, camera)outlinePass.visibleEdgeColor.set(parseInt(0x00ff00)) // 呼吸顯示的顏色outlinePass.hiddenEdgeColor = new THREE.Color(0, 0, 0) // 呼吸消失的顏色composer.addPass(outlinePass)// 解決高亮后環(huán)境變暗的問題const outputPass = new OutputPass();composer.addPass( outputPass );// 自定義的著色器通道 作為參數(shù)effectFXAA = new ShaderPass(FXAAShader)effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );composer.addPass(effectFXAA)},

• outlinePass = new OutlinePass(mouse, scene, camera)中的mouse就是 new THREE.Vector2( window.innerWidth, window.innerHeight )，可以直接用這個

把上面這個函數(shù)，在mounted的時候調(diào)用一下，初始化一次，后面想讓哪個模型高亮，就傳哪個模型進(jìn)去

3.點擊模型邊緣高亮

現(xiàn)在就需要在點擊模型的事件中去調(diào)用這個函數(shù)

// 點擊模型事件
pick(event) {const found = self.cast(event)[0];if (found) {// [transformer]是給變壓器加，[transformer,car]是給變壓器和房子加，子模型要.objectoutlinePass.selectedObjects = [found.object]; }
},

我的self就是this。

我想要實現(xiàn)的是子模型的高亮，所以我要取子模型的object，其次需要注意的就是傳入的參數(shù)是個數(shù)組，你傳入哪些模型，點擊的時候，那些模型就會一起高亮，我這里傳入的是一個，是選中的子模型。

如果你不想讓這個模型邊緣高亮了，那么outlinePass.selectedObjects = []; 這個數(shù)組里放哪個模型哪個模型邊緣高亮，通過修改 outlinePass.selectedObjects 實現(xiàn)。

4.移除模型邊緣高亮

當(dāng)不想要高亮的時候，把composer賦值為空就可以了。

doubel_pick(event) {outlinePass.selectedObjects = [];
},

5.監(jiān)聽窗口變化

當(dāng)窗口大小改變時，需要對應(yīng)著改變渲染的大小

// 隨著窗體的變化修改場景
function onResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);composer.setSize(window.innerWidth, window.innerHeight);effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
}
// 監(jiān)聽窗體調(diào)整大小事件
window.addEventListener('resize', onResize, false);

6.循環(huán)渲染

const animate = () => {stats.update();controls.update();//renderer.render(scene, camera);  不在需要renderer.render了composer.render(scene, camera)self.render_animation = requestAnimationFrame(animate);
};
animate()

這里需要注意的就是不要再添加renderer.render了，因為前面new EffectComposer的時候已經(jīng)把renderer添加進(jìn)去了，后面就是組合效果，只需要循環(huán)render后面這個composer就可以了，這是我的理解。

當(dāng)然這也是造成之前幀率低的主要原因，循環(huán)渲染了，所以，刪掉他，直接composer.render(scene, camera)，幀率50，在不全屏的情況下，幀率60，基本滿足需求。

---

附官方案例

案例：https://threejs.org/examples/?q=outlin#webgl_postprocessing_outline

源碼：https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing_outline.html

前面被其他博客誤導(dǎo)了。