threejs多通道组合(GlitchPass和描边)

参考资料：threejs中文网

threejs qq交流群：814702116

多通道组合(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.innerHeight);
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;