在Three.js中创建高性能辉光效果：UnrealBloomPass实现指南

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

// 基本场景设置
const container = document.body;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(35, container.clientWidth / container.clientHeight, 0.1, 10000);
camera.position.set(0, 0, 100);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.toneMapping = THREE.ACESFilmicToneMapping; // 推荐的色调映射
renderer.toneMappingExposure = 1.2; // 调整曝光度
container.append(renderer.domElement);

// 添加环境光，确保场景有基础照明
const ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
scene.add(ambientLight);

// 性能计时器
const tp = performance.now();

// 创建一个发光的二十面体
const icosahedronGeometry = new THREE.IcosahedronGeometry(10, 0);
const glowingMaterial = new THREE.MeshStandardMaterial({
    color: new THREE.Color("red"), // 基础颜色
    emissive: new THREE.Color("red"), // 自发光颜色，这部分会产生辉光
    emissiveIntensity: 5, // 自发光强度，值越大辉光越亮
    opacity: 0.8, // 可以保持一定的透明度
    transparent: true,
    roughness: 0.2,
    metalness: 0.8
});
const glowingIcosahedron = new THREE.Mesh(icosahedronGeometry, glowingMaterial);
glowingIcosahedron.position.set(0, 0, 0);
scene.add(glowingIcosahedron);

// 可以添加一个地面或背景，以便更好地观察辉光效果
const planeGeometry = new THREE.PlaneGeometry(200, 200);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x222222 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
plane.position.y = -20;
scene.add(plane);

// 初始化EffectComposer
const composer = new EffectComposer(renderer);
composer.setPixelRatio(window.devicePixelRatio); // 确保与renderer的像素比一致

// 1. 添加RenderPass：将场景渲染到Composer的内部缓冲区
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

// 2. 添加UnrealBloomPass：实现辉光效果
const bloomPass = new UnrealBloomPass(
    new THREE.Vector2(container.clientWidth, container.clientHeight), // 辉光渲染尺寸
    1.5, // strength (辉光强度)
    0.5, // radius (辉光半径)
    0.0 // threshold (辉光阈值，0表示所有像素都参与，1表示只有最亮的像素参与)
);
// 调整threshold以控制哪些亮度级别的像素会发光
// 例如，如果threshold为0.5，只有亮度大于0.5的像素才会有辉光
// 对于自发光物体，通常可以设置较低的threshold来确保其发光
bloomPass.threshold = 0.5; // 根据实际效果调整
bloomPass.strength = 3.0; // 调整强度
bloomPass.radius = 0.8; // 调整半径
composer.addPass(bloomPass);

// 3. 添加OutputPass：处理最终输出，包括色调映射和颜色空间转换
const outputPass = new OutputPass();
composer.addPass(outputPass);

requestAnimationFrame(function animate() {
    requestAnimationFrame(animate);

    // 旋转二十面体
    glowingIcosahedron.rotation.y = (performance.now() - tp) * 0.0001;
    glowingIcosahedron.rotation.x = (performance.now() - tp) * 0.00005;

    // 使用composer进行渲染
    composer.render();
});

// 窗口大小调整事件
addEventListener("resize", () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
    composer.setSize(window.innerWidth, window.innerHeight); // 更新composer的尺寸

    // 不需要再次调用render，animate循环会自动处理
});