在Three.js中高效实现物体发光效果：Unreal Bloom后处理教程

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);

// 创建二十面体几何体
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);

// 初始化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);

// 动画设置
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的尺寸
});