1，前言
在除夕夜，璀璨的烟花点亮夜空，为节日增添了浓厚的喜庆氛围。在 Web 端，我们可以使用 Three.js 来模拟这种美轮美奂的烟花特效，让网页也能展现绚丽的节日气息。本文将介绍如何利用 Three.js 及其着色器技术，创建一个动态的烟花爆炸效果。
2，技术原理解析
为了模拟真实的烟花，我们需要解决以下几个关键问题：
- 烟花的轨迹：在爆炸前，烟花需要沿着一定的路径上升。
- 爆炸模拟：在特定高度，烟花粒子会向各个方向散开，形成美丽的爆炸效果。
- 粒子系统：使用 THREE.Points 来管理大量的烟花粒子，控制其颜色、大小、速度等参数。
- 后期处理（Bloom）：使用 UnrealBloomPass 增强烟花的发光效果，使其更加亮眼。
实现效果：
除夕夜的璀璨烟花秀：三维视觉盛宴，感受震撼瞬间
代码实现
3.1，初始化 Three.js 场景
首先，我们需要创建一个基本的 Three.js 场景，包括 Scene（场景）、Camera（相机）和 WebGLRenderer（渲染器）。
javascript
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);
camera.position.z = 50;3.2，添加后期处理（Bloom 效果）
为了让烟花更加炫目，我们使用 UnrealBloomPass 进行光晕处理。
javascript
const composer = new THREE.EffectComposer(renderer);
const renderPass = new THREE.RenderPass(scene, camera);
const bloomPass = new THREE.UnrealBloomPass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
1.5, // 泛光强度
0.5, // 泛光半径
0.85 // 泛光阈值
);
bloomPass.threshold = 0.1;
bloomPass.strength = 0.5;
bloomPass.radius = 0.5;
composer.addPass(renderPass);
composer.addPass(bloomPass);3.3，创建烟花粒子系统
我们使用 THREE.Points 来管理烟花粒子，并利用着色器 (ShaderMaterial) 实现更细腻的视觉效果。
javascript
const fireworkMaterial = new THREE.ShaderMaterial({
uniforms: {
color: { value: new THREE.Color(0xffffff) },
pointTexture: { value: new THREE.TextureLoader().load('https://threejs.org/examples/textures/sprites/disc.png') }
},
vertexShader: `
attribute float size;
attribute vec3 customColor;
varying vec3 vColor;
void main() {
vColor = customColor;
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
gl_PointSize = size * (300.0 / -mvPosition.z);
gl_Position = projectionMatrix * mvPosition;
}
`,
fragmentShader: `
uniform vec3 color;
uniform sampler2D pointTexture;
varying vec3 vColor;
void main() {
gl_FragColor = vec4(color * vColor, 1.0);
gl_FragColor = gl_FragColor * texture2D(pointTexture, gl_PointCoord);
if (gl_FragColor.a < 0.1) discard;
}
`,
blending: THREE.AdditiveBlending,
depthTest: false,
transparent: true
});3.4，创建 Firework 类
Firework 类用于模拟单个烟花的运动轨迹和爆炸效果。
javascript
class Firework {
constructor() {
this.particles = new THREE.Points(geometry, fireworkMaterial);
this.particles.position.set(Math.random() * 40 - 20, -30, Math.random() * 40 - 20);
this.velocity = new THREE.Vector3(0, Math.random() * 3 + 2, 0);
scene.add(this.particles);
}
update() {
this.particles.position.add(this.velocity);
this.velocity.y -= 0.02; // 重力作用
if (this.velocity.y < 0) this.explode();
}
explode() {
// 让粒子向四周扩散
for (let i = 0; i < this.particles.geometry.attributes.position.array.length; i += 3) {
this.particles.geometry.attributes.position.array[i] += (Math.random() - 0.5) * 10;
this.particles.geometry.attributes.position.array[i + 1] += (Math.random() - 0.5) * 10;
this.particles.geometry.attributes.position.array[i + 2] += (Math.random() - 0.5) * 10;
}
this.particles.geometry.attributes.position.needsUpdate = true;
}
}3.5，动画更新
在 animate 函数中不断更新烟花的状态，并渲染场景。
javascript
const fireworks = [];
function animate() {
requestAnimationFrame(animate);
if (Math.random() < 0.05) fireworks.push(new Firework());
fireworks.forEach((firework, index) => {
firework.update();
if (firework.dead) {
scene.remove(firework.particles);
fireworks.splice(index, 1);
}
});
composer.render();
}
animate();4，功能总结
本文介绍了一个基于Three.js的3D烟花特效演示，主要功能包括：动态生成带有随机轨迹的上升烟花弹头、多阶段爆炸效果（包含二次爆炸）、粒子拖尾轨迹、颜色渐变系统，以及使用后期处理实现的泛光特效。烟花在到达预定高度后根据多种模式（球形、柱状等）爆炸，粒子受重力、空气阻力影响自然下落，并自动优化性能管理粒子生命周期，同时支持窗口自适应和不同设备的性能调节。
5，结语
本文介绍了如何使用 Three.js 创建炫目的烟花特效，主要涉及粒子系统、着色器处理以及后期效果优化。你可以根据自己的需求调整烟花的颜色、速度、爆炸范围等参数，甚至结合 Web Audio API 让烟花与音乐同步。任何问题欢迎在评论区交流！🎆🎇