探索Three.js中的Bloom发光效果
Bloom效果简介
Bloom效果是一种流行的视觉效果，它模拟了亮光源在图像中的过曝现象，使得光源看起来更加耀眼和逼真。
使用UnrealBloomPass实现Bloom效果
UnrealBloomPass是Three.js提供的后处理通道之一，专门用于实现Bloom效果。
示例代码：引入UnrealBloomPass
javascript
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';创建UnrealBloomPass实例
创建一个UnrealBloomPass实例，并将其与渲染器的尺寸关联。
javascript
const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight));调整Bloom效果的强度
通过.strength属性，可以调整Bloom效果的强度。
示例代码：调整Bloom强度
javascript
bloomPass.strength = 2.0; // 增强Bloom效果使用EffectComposer进行后处理
EffectComposer是Three.js中用于后处理的核心类。通过它，可以链式调用多个后处理效果。
示例代码：引入EffectComposer
javascript
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';示例代码：创建EffectComposer实例
javascript
const composer = new EffectComposer(renderer);添加RenderPass和BloomPass
创建一个RenderPass实例，用于指定后处理的初始渲染，然后将UnrealBloomPass添加到EffectComposer中。
示例代码：引入RenderPass
javascript
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';示例代码：创建RenderPass实例并添加到EffectComposer
javascript
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
composer.addPass(bloomPass);渲染循环
在渲染循环中，调用EffectComposer的render方法进行后处理。
示例代码：渲染循环
javascript
function render() {
composer.render();
requestAnimationFrame(render);
}
render();完整示例代码
以下是一个完整的示例，展示如何在Three.js中使用UnrealBloomPass为场景添加Bloom发光效果。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js Bloom Effect Example</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://threejs.org/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight));
bloomPass.strength = 2.0;
composer.addPass(bloomPass);
const light = new THREE.PointLight(0xffffff, 1);
scene.add(light);
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshStandardMaterial({ color: 0x000000 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
light.position.set(5, 5, 5);
function render() {
composer.render();
requestAnimationFrame(render);
}
render();
</script>
</body>
</html>