Bloom发光通道

前面两节课，通过OutlinePass给大家演示过后处理的整个流程，本节课给大演示一个Bloom发光通道案例。

• OutlinePass.js：高亮发光描边
• UnrealBloomPass.js：Bloom发光

Bloom发光通道UnrealBloomPass

UnrealBloomPass.js扩展库目录：examples/jsm/postprocessing/

// 引入UnrealBloomPass通道
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';

UnrealBloomPass参数1是一个二维向量Vector2，二维向量尺x、y分量要和Canvas画布的宽、高度尺寸保持一致。

// canvas画布宽高度尺寸是800, 600
const bloomPass = new UnrealBloomPass(new THREE.Vector2(800, 600));

// canvas画布宽高度window.innerWidth, window.innerHeight
new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight));

发光强度.strength

Bloom发光强度bloomPass.strength，默认1.0。

console.log('发光强度',bloomPass.strength);

//bloom发光强度
bloomPass.strength = 2.0;

全文检索关键词EffectComposer

threejs文件包examples文件目录，全文检索关键词EffectComposer，可以找到后处理的很多案例。

threejs后期处理有很多相关的通道，大家学习的时候，也不可能都记住，平时用到那个通道，可以去examples文件搜索对应关键词。

全文检索关键词UnrealBloomPass，可以找到Bloom发光通道的相关3D案例，你可以参考学习。