本教程旨在解决three.js中创建明亮发光物体时的性能瓶颈。通过对比传统多光源方案的低效，引入并详细讲解了使用effectcomposer结合unrealbloompass进行后处理，以实现高性能且逼真的辉光效果。文章将涵盖核心组件的配置与使用，并提供示例代码，帮助开发者优化three.js应用中的视觉表现。
引言：发光效果的挑战与传统方法的局限性
在Three.js中模拟物体发光效果，是提升场景视觉吸引力的常见需求。然而，传统的做法，例如通过在物体周围放置大量PointLight光源来试图营造“发光”感，往往会带来严重的性能问题。正如在尝试创建一个明亮发光的二十面体时所遇到的，即使是27个光源，也可能导致动画帧率急剧下降至每秒1帧以下，尤其是在需要物体旋转或场景复杂时。
这种方法不仅效率低下，而且所产生的效果也并非真正的“辉光”（Bloom）或“泛光”（Glow）。光源的作用是照亮周围环境和物体表面，而不是使物体本身散发出光晕。要实现物体仿佛自身在发光并影响周围区域的视觉效果，需要借助更高级的渲染技术——后处理（Post-processing）。
Three.js后处理核心：EffectComposer与UnrealBloomPass
Three.js提供了强大的后处理能力，允许开发者在场景渲染到屏幕之前，对渲染结果进行一系列图像处理操作。实现逼真发光效果的关键在于使用EffectComposer管理一系列后处理通道（Pass），其中UnrealBloomPass是实现辉光效果的核心组件。
一个典型的辉光后处理链通常包含以下几个关键通道：
RenderPass: 这是后处理链的起点，负责将场景（Scene）从指定视角（Camera）渲染到一个内部的渲染目标（Render Target）。这个渲染目标包含了场景的原始图像信息，后续的后处理通道将基于此图像进行操作。
-
UnrealBloomPass: 这是实现辉光效果的核心。它模拟了强光区域的光线散射现象，使得场景中亮度超过特定阈值的像素产生光晕。UnrealBloomPass的关键参数包括：
- strength（强度）：控制辉光效果的整体亮度。
- radius（半径）：控制辉光扩散的范围。
- threshold（阈值）：只有亮度高于此值的像素才会产生辉光。通过调整阈值，可以精确控制哪些物体或区域会发光。
OutputPass: 在Three.js r152及更高版本中，OutputPass用于处理最终的色调映射（Tone Mapping）和颜色空间转换（Color Space Conversion），确保渲染结果在不同显示设备上呈现出一致且正确的色彩。它通常是后处理链的最后一个通道。
通过这种方式，我们不是通过增加光源来“制造”辉光，而是通过对已渲染的图像进行分析和处理，模拟光线在空气中散射的视觉现象，从而获得既美观又高效的发光效果。
实现步骤与示例代码
下面我们将通过一个具体的示例，演示如何在Three.js中利用EffectComposer和UnrealBloomPass为二十面体添加辉光效果。
1. 初始化Three.js环境
首先，我们需要设置基本的Three.js场景、相机、渲染器，并将渲染器的DOM元素添加到页面中。同时，为了确保OutputPass能正确进行色调映射，需要配置渲染器的toneMapping属性。
import * as THREE from 'three';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js'; // 适用于 r152+
const container = document.body;
const scene = new THREE.Scene();
const fov = 35;
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1;
const far = 10000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 100);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
// 启用色调映射，以便OutputPass正确处理颜色
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1; // 曝光度，可根据需要调整
container.append(renderer.domElement);2. 创建发光对象
为了让物体产生辉光，其自身必须足够“亮”。对于辉光效果而言，通常使用MeshBasicMaterial配合亮色，或MeshStandardMaterial的emissive（自发光）属性。这里我们使用MeshBasicMaterial创建一个明亮的二十面体。
// 创建二十面体几何体
const geometry = new THREE.IcosahedronGeometry(10, 0);
// 使用MeshBasicMaterial，并赋予明亮的颜色，这将是辉光的来源
const material = new THREE.MeshBasicMaterial({ color: 0xffdd00 }); // 明亮的黄色
const icosahedron = new THREE.Mesh(geometry, material);
scene.add(icosahedron);
// 添加环境光，确保场景中的其他非发光物体也能被看到（如果存在的话）
const ambientLight = new THREE.AmbientLight(0x404040); // 柔和的白光
scene.add(ambientLight);3. 配置EffectComposer
现在，我们初始化EffectComposer并按顺序添加RenderPass、UnrealBloomPass和OutputPass。
// 初始化EffectComposer const composer = new EffectComposer(renderer); composer.setPixelRatio(window.devicePixelRatio); // 确保Composer使用正确的像素比 // 添加RenderPass：将场景渲染到Composer的内部渲染目标 const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // 添加UnrealBloomPass：应用辉光效果 // 参数：resolution (Vector2), strength (float), radius (float), threshold (float) const bloomPass = new UnrealBloomPass( new THREE.Vector2(container.clientWidth, container.clientHeight), 1.5, // strength: 辉光强度，越大越亮 0.4, // radius: 辉光半径，越大扩散范围越广 0.85 // threshold: 辉光阈值，只有亮度高于此值的像素才会发光 ); composer.addPass(bloomPass); // 添加OutputPass：处理最终的色调映射和颜色空间转换 const outputPass = new OutputPass(); composer.addPass(outputPass);
4. 调整渲染循环与响应式设计
最后，在动画循环中，我们不再直接调用renderer.render()，而是调用composer.render()来执行整个后处理链。同时，确保在窗口大小改变时，更新相机、渲染器和EffectComposer的尺寸。
// 动画设置
const tp = performance.now();
// 动画循环
function animate() {
requestAnimationFrame(animate);
// 旋转二十面体
icosahedron.rotation.y = (performance.now() - tp) * 0.0001 * 10; // 适当加快旋转速度
// 使用composer进行渲染，它会依次执行所有pass
composer.render();
}
animate();
// 处理窗口大小改变事件
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
composer.setSize(window.innerWidth, window.innerHeight); // 同时更新Composer的尺寸
});参数调优与性能考量
-
UnrealBloomPass参数调优：
- strength、radius、threshold这三个参数是实现理想辉光效果的关键。
- threshold值越高，只有越亮的区域才会发光，可以用来精细控制发光区域。
- strength和radius则控制辉光的视觉表现。建议从小到大逐步调整，观察效果。
- 性能优势： 与使用大量光源相比，后处理的辉光效果在性能上具有显著优势。它通过对渲染完成的2D图像进行处理，而不是增加3D场景中的计算量（如光照计算）。
- 潜在瓶颈： 尽管后处理更高效，但过高的分辨率、过多的后处理通道或UnrealBloomPass参数设置过于激进（如过大的radius）仍可能消耗GPU资源。在实际项目中，应根据目标设备的性能进行适当的优化和权衡。
总结
通过本教程，我们学习了如何利用Three.js的EffectComposer和UnrealBloomPass高效地实现物体发光效果。这种方法不仅解决了传统多光源方案带来的性能问题，而且能够生成更具艺术感和真实感的辉光视觉效果。掌握后处理技术，将为您的Three.js应用开启更多视觉表现的可能性。
