当前位置：首页 > news >正文

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

news 2025/9/17 13:15:23

1，前言

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

2，技术原理解析

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

烟花的轨迹：在爆炸前，烟花需要沿着一定的路径上升。
爆炸模拟：在特定高度，烟花粒子会向各个方向散开，形成美丽的爆炸效果。
粒子系统：使用 THREE.Points 来管理大量的烟花粒子，控制其颜色、大小、速度等参数。
后期处理（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 让烟花与音乐同步。任何问题欢迎在评论区交流！🎆🎇