使用 Three.js 实现炫酷的除夕烟花特效

1，前言

在除夕夜，璀璨的烟花点亮夜空，为节日增添了浓厚的喜庆氛围。在 Web 端，我们可以使用 Three.js 来模拟这种美轮美奂的烟花特效，让网页也能展现绚丽的节日气息。本文将介绍如何利用 Three.js 及其着色器技术，创建一个动态的烟花爆炸效果。

2，技术原理解析

为了模拟真实的烟花，我们需要解决以下几个关键问题：

1. 烟花的轨迹：在爆炸前，烟花需要沿着一定的路径上升。
2. 爆炸模拟：在特定高度，烟花粒子会向各个方向散开，形成美丽的爆炸效果。
3. 粒子系统：使用 THREE.Points 来管理大量的烟花粒子，控制其颜色、大小、速度等参数。
4. 后期处理（Bloom）：使用 UnrealBloomPass 增强烟花的发光效果，使其更加亮眼。

实现效果：

除夕夜的璀璨烟花秀：三维视觉盛宴，感受震撼瞬间

代码实现

3.1，初始化 Three.js 场景

首先，我们需要创建一个基本的 Three.js 场景，包括 Scene（场景）、Camera（相机）和 WebGLRenderer（渲染器）。

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 进行光晕处理。

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) 实现更细腻的视觉效果。

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 类用于模拟单个烟花的运动轨迹和爆炸效果。

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 函数中不断更新烟花的状态，并渲染场景。

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 让烟花与音乐同步。任何问题欢迎在评论区交流！🎆🎇