后期处理

threejs中有EffectComposer.js扩展库，可以实现一些后期处理效果，所谓的后期处理效果也就是对threejs对渲染结果进行后期处理，例如添加发光特效等。

发光描边

// 引入EffectComposer
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";

// 修改render
const render = () => {
	window.requestAnimationFrame(render);
	// renderer.render(scene, camera);  // 使用后处理后，改用composer.render();
	composer.render();
};

// 添加三个盒子
const points = [
	new THREE.Vector3(0, 0, 0),
	new THREE.Vector3(0, 50, 0),
	new THREE.Vector3(50, 0, 0),
];

const boxGroup = new THREE.Group();
const boxGeometry = new THREE.BoxGeometry(10, 10, 10);
const boxMaterial = new THREE.MeshBasicMaterial({
	color: "#2890ff",
});
points.map((el, index) => {
	const box = new THREE.Mesh(boxGeometry, boxMaterial);
	box.position.copy(el);
	box.name = `盒子${index}`;
	boxGroup.add(box);
});

scene.add(boxGroup);

// 创建渲染器通道
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass); // 给composer添加渲染器通道
// 创建outline通道
const outlinePass = new OutlinePass(
	new THREE.Vector2(window.innerWidth, window.innerHeight), // 尺寸与canvas尺寸一致
	scene,
	camera
);
// 设置描边颜色
outlinePass.visibleEdgeColor.set(0xffff00); // 默认白色
// 设置描边厚度
outlinePass.edgeThickness = 4;
// 设置描边亮度
outlinePass.edgeStrength = 5;
// 描边闪烁,默认0不闪烁
outlinePass.pulsePeriod = 2;
// 选择模型进行高亮描边
const mesh = scene.getObjectByName("盒子1");
outlinePass.selectedObjects = [mesh];
composer.addPass(outlinePass); // 给composer添加outline通道

Bloom发光通道

// 引入EffectComposer
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
// 引入渲染器通道RenderPass
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
// 引入UnrealBloomPass：发光通道
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
// 多通道组合(GlitchPass通道)：会产生闪屏效果
import { GlitchPass } from "three/addons/postprocessing/GlitchPass.js";

// Bloom发光通道
const unrealBloomPass = new UnrealBloomPass(
	new THREE.Vector2(window.innerWidth, window.innerHeight)
);
composer.addPass(unrealBloomPass); // 给composer添加Bloom通道


// GlitchPass通道：闪屏效果
const glitchPass = new GlitchPass();
composer.addPass(glitchPass);

后处理颜色修正

引入GammaCorrectionShader修正颜色

// 引入GammaCorrectionPass： 伽马校正，让颜色更亮
import { GammaCorrectionShader } from "three/addons/shaders/GammaCorrectionShader.js";
// 引入ShaderPass：将shader转为通道
import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";

// 创建伽马矫正颜色
const gammaPass = new ShaderPass(GammaCorrectionShader)
composer.addPass(gammaPass);

后处理抗锯齿优化

// FXAA抗锯齿通道：削弱锯齿，但还是会存在
import { FXAAShader } from 'three/addons/shaders/FXAAShader.js'
// SMAAPass抗锯齿
import { SMAAPass } from "three/addons/postprocessing/SMAAPass.js";

// 设置分辨率
renderer.setPixelRatio(window.devicePixelRatio);

// 抗锯齿通道
const fxaaShader = new ShaderPass(FXAAShader);
const pixcelRatio = window.devicePixelRatio;
fxaaShader.uniforms.resolution.value.x = 1 / (window.innerWidth * pixcelRatio);
fxaaShader.uniforms.resolution.value.y = 1 / (window.innerHeight * pixcelRatio);
composer.addPass(fxaaShader);

const smaaPass = new SMAAPass(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio);
composer.addPass(smaaPass);