11.5 使用 EffectComposer 实现后期效果

Three.js 提供了 EffectComposer 来方便地实现后期处理效果。

11.5.1 安装后期处理库

首先，通过 npm 安装 three 的后期处理库：

npm install three

11.5.2 基本设置

接下来，我们需要在项目中引入 EffectComposer 并设置基本的后期处理流程。

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';// 创建渲染通道
const renderPass = new RenderPass(scene, camera);// 创建 EffectComposer
const composer = new EffectComposer(renderer);
composer.addPass(renderPass);// 添加 GlitchPass 效果
const glitchPass = new GlitchPass();
composer.addPass(glitchPass);

11.5.3 渲染带有后期处理的场景

我们需要在动画循环中使用 composer 来渲染场景，而不是直接使用 renderer。

function animate() {requestAnimationFrame(animate);// 更新物理世界world.step(1 / 60);// 同步物体scene.traverse(function(object) {if (object.isMesh && object.body) {object.position.copy(object.body.position);object.quaternion.copy(object.body.quaternion);}});// 使用 EffectComposer 渲染场景composer.render();
}animate();

示例：添加抗锯齿效果

我们可以通过添加 FXAA（快速近似抗锯齿）通道来实现抗锯齿效果。

import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';// 创建 FXAA 通道
const fxaaPass = new ShaderPass(FXAAShader);
fxaaPass.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
composer.addPass(fxaaPass);

示例：添加镜头光晕效果

镜头光晕是常见的后期处理效果，可以通过 Lensflare 来实现。

import { Lensflare, LensflareElement } from 'three/examples/jsm/objects/Lensflare.js';// 创建镜头光晕纹理
const textureLoader = new THREE.TextureLoader();
const textureFlare = textureLoader.load('path/to/lensflare0.png');// 创建镜头光晕
const lensflare = new Lensflare();
lensflare.addElement(new LensflareElement(textureFlare, 512, 0));
scene.add(lensflare);

通过以上代码，我们可以创建一个简单的粒子系统并实现后期处理效果。粒子系统可以用于模拟各种自然现象，而后期处理可以显著增强视觉效果。这些技术为我们创造更为真实和引人入胜的 3D 场景提供了强大的工具。