这篇文章主要介绍了Three.js中如何实现Bloom效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Three.js中如何实现Bloom效果文章都会有所收获，下面我们一起来看看吧。
在 Three.js 中实现 Bloom 效果
Bloom 是一种常用于游戏和电影场景中的后期特效，用于模拟相机透镜光晕的效果。它可以使图像看起来更加真实、生动，并且增强视觉体验。在 Three.js 中，我们可以使用
UnrealBloomPass和
ShaderPass来实现这个效果。
准备工作
首先，我们需要引入 Three.js 库：
<script src="./build/three.min.js"></script>
然后，我们需要在画布中添加一个渲染器，以便能够看到 Three.js 场景：
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);接下来，我们需要创建一个场景和一个相机：
const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5;
然后，我们需要在场景中添加几何体和材质：
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);实现 Bloom 效果
接下来，我们需要添加
UnrealBloomPass和
ShaderPass来实现 Bloom 效果。这两个 pass 都是从
EffectComposer类中派生的。
EffectComposer是 Three.js 中用于渲染后期特效的类。
首先，我们需要引入 UnrealBloomPass 和 ShaderPass：
<script src="./examples/jsm/postprocessing/UnrealBloomPass.js"></script> <script src="./examples/jsm/postprocessing/ShaderPass.js"></script>
然后，在渲染循环中创建一个
EffectComposer对象：
const composer = new THREE.EffectComposer(renderer);
const renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
composer.addPass(bloomPass);
const finalPass = new THREE.ShaderPass(
new THREE.ShaderMaterial({
uniforms: {
baseTexture: { value: null },
bloomTexture: { value: composer.renderTarget2.texture },
},
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform sampler2D baseTexture;
uniform sampler2D bloomTexture;
varying vec2 vUv;
void main() {
gl_FragColor = texture2D(baseTexture, vUv) + texture2D(bloomTexture, vUv);
}
`,
defines: {},
}),
"baseTexture"
);
finalPass.needsSwap = true;
composer.addPass(finalPass);在上述代码中，我们首先创建了一个
RenderPass对象，并将其添加到
composer中。然后，我们创建了一个
UnrealBloomPass对象，并将其添加到
composer中。
UnrealBloomPass用于生成 Bloom 纹理。参数
new THREE.Vector2(window.innerWidth, window.innerHeight)是指 Bloom 纹理的分辨率大小，
1.5是 Bloom 效果的强度，
0.4是阈值，
0.85是模糊程度。
接着，我们创建了一个
ShaderPass对象，并将其添加到
composer中。它用于将 Bloom 纹理和场景纹理相加，以生成最终的图像。
ShaderMaterial是用于渲染
ShaderPass的材质。在这里，我们定义了两个 uniform 变量：
baseTexture和
bloomTexture分别表示场景纹理和 Bloom 纹理。然后，在顶点着色器中，我们将
vUv声明为一个 varying 类型的变量，并将其赋值为当前顶点的纹理坐标。在片段着色器中，我们使用
texture2D()函数获取
baseTexture和
bloomTexture的颜色值，并相加起来。最后，我们将
finalPass添加到
composer中，并指定需要将结果渲染到屏幕上。
完整代码
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const composer = new THREE.EffectComposer(renderer);
const renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
composer.addPass(bloomPass);
const finalPass = new THREE.ShaderPass(
new THREE.ShaderMaterial({
uniforms: {
baseTexture: { value: null },
bloomTexture: { value: composer.renderTarget2.texture },
},
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform sampler2D baseTexture;
uniform sampler2D bloomTexture;
varying vec2 vUv;
void main() {
gl_FragColor = texture2D(baseTexture, vUv) + texture2D(bloomTexture, vUv);
}
`,
defines: {},
}),
"baseTexture"
);
finalPass.needsSwap = true;
composer.addPass(finalPass);
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
composer.render();
}
animate();