当前位置：首页 > JavaScript

js实现3D烟花特效

2026-01-31 11:12:54JavaScript

使用Three.js实现3D烟花特效

Three.js是一个强大的JavaScript 3D库，适合创建烟花特效。以下是一个基础实现示例：

安装Three.js：

npm install three

核心代码结构：

import * as THREE from 'three';

// 初始化场景、相机和渲染器
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);

// 创建烟花粒子系统
function createFirework(position) {
  const particles = 1000;
  const geometry = new THREE.BufferGeometry();
  const positions = new Float32Array(particles * 3);

  for (let i = 0; i < particles; i++) {
    const i3 = i * 3;
    positions[i3] = position.x;
    positions[i3 + 1] = position.y;
    positions[i3 + 2] = position.z;
  }

  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
  const material = new THREE.PointsMaterial({
    color: new THREE.Color(Math.random(), Math.random(), Math.random()),
    size: 0.1
  });

  const firework = new THREE.Points(geometry, material);
  scene.add(firework);

  // 动画逻辑
  const speed = 0.05;
  const directions = [];
  for (let i = 0; i < particles; i++) {
    directions.push({
      x: (Math.random() - 0.5) * speed,
      y: (Math.random() - 0.5) * speed,
      z: (Math.random() - 0.5) * speed
    });
  }

  return { firework, directions };
}

使用Canvas 2D实现简化版3D效果

对于不需要真正3D渲染的场景，可以用2D Canvas模拟3D效果：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

class Particle {
  constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.vx = (Math.random() - 0.5) * 2;
    this.vy = (Math.random() - 0.5) * 2;
    this.vz = Math.random() * 2;
    this.alpha = 1;
    this.decay = Math.random() * 0.015 + 0.01;
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.z += this.vz;
    this.alpha -= this.decay;
    return this.alpha > 0;
  }

  draw() {
    const scale = 200 / (200 + this.z);
    ctx.globalAlpha = this.alpha;
    ctx.fillRect(
      this.x * scale + canvas.width/2,
      this.y * scale + canvas.height/2,
      2 * scale, 2 * scale
    );
  }
}

性能优化技巧

粒子系统优化对烟花特效至关重要：

使用对象池管理粒子对象，避免频繁创建销毁

const particlePool = [];
function getParticle(x, y, z) {
  return particlePool.length ? 
    particlePool.pop().reset(x, y, z) : 
    new Particle(x, y, z);
}

实现GPU加速的粒子系统：

// 使用Three.js的ShaderMaterial
const shaderMaterial = new THREE.ShaderMaterial({
  uniforms: {
    color: { value: new THREE.Color(0xffffff) }
  },
  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: `
    varying vec3 vColor;
    void main() {
      gl_FragColor = vec4(vColor, 1.0);
    }
  `,
  blending: THREE.AdditiveBlending,
  depthTest: false,
  transparent: true
});

交互式触发实现

添加鼠标点击或触摸事件触发烟花：

window.addEventListener('click', (event) => {
  const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
  const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
  const position = new THREE.Vector3(mouseX * 10, mouseY * 10, 0);
  createFirework(position);
});

视觉效果增强

添加拖尾效果和颜色渐变：

// 在渲染循环中添加
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 粒子颜色设置
const hue = Math.floor(Math.random() * 360);
ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;

以上方法提供了从基础到进阶的3D烟花实现方案，可根据项目需求选择适合的技术路径。Three.js方案适合需要真实3D效果的场景，而Canvas方案在性能要求较高的移动端可能更合适。

js实现3D烟花特效