推荐：将NSDT场景编辑器加入你的3D工具链

3D工具集：NSDT简石数字孪生

gltf工厂模型设置发光描边

本节课算是一个发光描边OutlinePass后处理的练习题，通过按钮点击选择gltf工厂的某个设备模型，添加发光描边效果。

课件演示文件提供了加载gltf工厂模型的源码，你可以在此基础上，利用13.1和13.2节讲解过的OutlinePass知识给工厂设备添加发光描边效果。

1.引入扩展库

具体参考13.1节讲解

// 引入后处理扩展库EffectComposer.js
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
// 引入渲染器通道RenderPass
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
// 引入OutlinePass通道
import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';

2.设置后期处理通道

具体参考13.1和13.2节讲解

注意outlinePass.selectedObjects先不用设置，后面通过UI按钮鼠标事件触发的的函数设置。

// 创建后处理对象EffectComposer，WebGL渲染器作为参数
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

// 创建OutlinePass通道
const v2 = new THREE.Vector2(window.innerWidth, window.innerWidth);
const outlinePass = new OutlinePass(v2, scene, camera);
// outlinePass.selectedObjects = [mesh];
outlinePass.visibleEdgeColor.set(0x00ffff);
outlinePass.edgeThickness = 4;
outlinePass.edgeStrength = 6;
composer.addPass(outlinePass);

3.渲染循环执行EffectComposer.render()

// 渲染循环
function render() {
    composer.render();
    // renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

4. UI界面控制outlinePass.selectedObjects

用于和3D场景交互的UI按钮，具体参考课件中index.html文件中HTML和CSS代码。

<div id="A" class="bu">设备A</div>
<div id="B" class="bu" style="margin-left: 10px;">设备B</div>

通过UI按钮控制，哪个模型添加发光描边效果

document.getElementById('A').addEventListener('click',function(){
    const A = model.getObjectByName ('设备A');
    outlinePass.selectedObjects = [A];
})
document.getElementById('B').addEventListener('click',function(){
    const B = model.getObjectByName ('设备B');
    outlinePass.selectedObjects = [B];
})

上一篇：ThreeJS教程：多通道组合(GlitchPass和描边) (mvrlink.com)

下一篇：ThreeJS教程：gltf后处理颜色异常(伽马校正) (mvrlink.com)