ThreeJS教程：多通道组合(GlitchPass和描边)
推荐：将NSDT场景编辑器加入你的3D工具链
3D工具集：NSDT简石数字孪生
多通道组合(GlitchPass和描边)
threejs可以多个后处理效果组合使用，比如模型先通过OutlinePass设置描边，再设置其它的后处理通道。
GlitchPass通道
// 引入GlitchPass通道
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
GlitchPass通道会产生闪屏效果。
const glitchPass = new GlitchPass();
// 设置glitchPass通道
composer.addPass(glitchPass);
多通道组合(OutlinePass+GlitchPass)
OutlinePass和GlitchPass通道组合使用,一个通道就像流水线上的一个工位一样，负责完成一个后处理功能，然后交给下一个通道，完成新的后处理功能。
// 引入后处理扩展库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';
// 引入GlitchPass通道
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
// 创建后处理对象EffectComposer，WebGL渲染器作为参数
const composer = new EffectComposer(renderer);
// 1. 创建一个渲染器通道，场景和相机作为参数
const renderPass = new RenderPass(scene, camera);
// 设置renderPass通道
composer.addPass(renderPass);
// 2. 创建OutlinePass通道
const v2 = new THREE.Vector2(window.innerWidth, window.innerWidth);
const outlinePass = new OutlinePass(v2, scene, camera);
outlinePass.selectedObjects = [mesh];
outlinePass.edgeThickness = 4;
outlinePass.edgeStrength = 6;
composer.addPass(outlinePass);
// 3. 设置glitchPass通道
const glitchPass = new GlitchPass();
composer.addPass(glitchPass);
OutlinePass高亮发光描边样式
继续上节课关于OutlinePass的讲解，给大家演示如何修改OutlinePass默认高亮发光描边样式。
OutlinePass有很多控制高亮外边框样式的属性，下面介绍几个比较常用的属性。
//模型描边颜色，默认白色
outlinePass.visibleEdgeColor.set(0xffff00);
//高亮发光描边厚度
outlinePass.edgeThickness = 4;
//高亮描边发光强度
outlinePass.edgeStrength = 6;
//模型闪烁频率控制，默认0不闪烁
outlinePass.pulsePeriod = 2;
描边颜色.visibleEdgeColor
修改OutlinePass默认边框效果
.visibleEdgeColor可以设置模型边缘高亮描边颜色
//模型边缘高亮边框颜色，默认白色
outlinePass.visibleEdgeColor.set(0xffff00);
描边厚度.edgeThickness
outlinePass.edgeThickness表示高亮发光描边的厚度，默认值1
console.log('描边厚度',outlinePass.edgeThickness);
轮廓边缘描边厚度设置
outlinePass.edgeThickness = 4.0;
描边亮度.edgeStrength
outlinePass.edgeThickness表示高亮描边的发光强度，默认值3
console.log('描边亮度',outlinePass.edgeStrength);
高亮描边发光强度设置
outlinePass.edgeStrength = 6;
描边闪烁.pulsePeriod
outlinePass.pulsePeriod的功能是控制描边的闪烁频率，默认0不闪烁。
outlinePass.pulsePeriod = 2;