Three.js中高效实现发光物体：Unreal Bloom Pass教程

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

// 1. 场景基本设置
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

camera.position.z = 50;

// 2. 创建一个发光的Icosahedron
// 使用MeshStandardMaterial并设置emissive属性，使其自身发出光线，
// 这样UnrealBloomPass更容易识别并对其应用辉光。
const geometry = new THREE.IcosahedronGeometry(10, 0);
const material = new THREE.MeshStandardMaterial({
    color: 0x000000, // 物体本身的颜色可以设置为黑色，让辉光更纯粹
    emissive: 0xffdd00, // 发光颜色，这是Bloom Pass识别亮度的关键
    emissiveIntensity: 1.5, // 发光强度
    metalness: 0.1,
    roughness: 0.3
});
const icosahedron = new THREE.Mesh(geometry, material);
scene.add(icosahedron);

// 添加环境光，确保场景有基础照明
const ambientLight = new THREE.AmbientLight(0x404040); // 柔和的白光
scene.add(ambientLight);

// 3. 设置后期处理 EffectComposer
const composer = new EffectComposer(renderer);
composer.setPixelRatio(window.devicePixelRatio); // 保持与renderer相同的像素比

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

// 添加 UnrealBloomPass: 实现辉光效果
// 参数：resolution, strength, radius, threshold
const bloomPass = new UnrealBloomPass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    1.5, // strength: 辉光强度，越大越亮
    0.5, // radius: 辉光半径，越大越模糊
    0.0 // threshold: 亮度阈值，只有亮度高于此值的像素才会产生辉光。0表示所有像素都可能发光。
);
composer.addPass(bloomPass);

// 添加 OutputPass: 负责最终输出和颜色空间转换
const outputPass = new OutputPass();
composer.addPass(outputPass);

// 4. 动画循环
const animate = () => {
    requestAnimationFrame(animate);

    // 旋转Icosahedron
    icosahedron.rotation.x += 0.005;
    icosahedron.rotation.y += 0.008;

    // 使用 composer.render() 代替 renderer.render()
    composer.render();
};
animate();

// 5. 响应窗口大小变化
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
    composer.setSize(window.innerWidth, window.innerHeight); // Composer也需要更新大小
    bloomPass.resolution.set(window.innerWidth, window.innerHeight); // BloomPass分辨率更新
});