当前位置：首页 > JavaScript

js实现烟雾

2026-04-05 19:36:15JavaScript

烟雾效果实现方法

在JavaScript中实现烟雾效果通常涉及Canvas绘图或WebGL技术。以下是两种常见的实现方式：

js实现烟雾

Canvas 2D烟雾效果

使用HTML5 Canvas的2D上下文创建动态烟雾效果：

js实现烟雾

const canvas = document.getElementById('smokeCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const particles = [];
const particleCount = 100;

class Particle {
  constructor() {
    this.x = canvas.width / 2;
    this.y = canvas.height;
    this.size = Math.random() * 15 + 5;
    this.speedX = Math.random() * 3 - 1.5;
    this.speedY = Math.random() * -3 - 1;
    this.color = `rgba(200, 200, 200, ${Math.random() * 0.5})`;
  }

  update() {
    this.x += this.speedX;
    this.y += this.speedY;
    if (this.size > 0.2) this.size -= 0.1;
  }

  draw() {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
  }
}

function init() {
  for (let i = 0; i < particleCount; i++) {
    particles.push(new Particle());
  }
}

function animate() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < particles.length; i++) {
    particles[i].update();
    particles[i].draw();

    if (particles[i].size <= 0.2) {
      particles.splice(i, 1);
      particles.push(new Particle());
    }
  }

  requestAnimationFrame(animate);
}

init();
animate();

WebGL/Three.js烟雾效果

使用Three.js库创建更逼真的3D烟雾：

import * as THREE from 'three';
import { GPUComputationRenderer } from 'three/examples/jsm/misc/GPUComputationRenderer';

// 初始化场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建烟雾纹理
const smokeTexture = new THREE.TextureLoader().load('smoke.png');

// 创建粒子系统
const particleCount = 1000;
const particles = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
const scales = new Float32Array(particleCount);

for (let i = 0; i < particleCount; i++) {
  positions[i * 3] = (Math.random() - 0.5) * 200;
  positions[i * 3 + 1] = (Math.random() - 0.5) * 200;
  positions[i * 3 + 2] = (Math.random() - 0.5) * 200;
  scales[i] = Math.random() * 5 + 1;
}

particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));
particles.setAttribute('scale', new THREE.BufferAttribute(scales, 1));

const particleMaterial = new THREE.PointsMaterial({
  size: 4,
  map: smokeTexture,
  transparent: true,
  opacity: 0.6,
  blending: THREE.AdditiveBlending
});

const particleSystem = new THREE.Points(particles, particleMaterial);
scene.add(particleSystem);

// 动画循环
function animate() {
  requestAnimationFrame(animate);

  const positions = particles.attributes.position.array;
  for (let i = 0; i < particleCount; i++) {
    positions[i * 3 + 1] += 0.1;
    if (positions[i * 3 + 1] > 100) {
      positions[i * 3 + 1] = -100;
    }
  }
  particles.attributes.position.needsUpdate = true;

  renderer.render(scene, camera);
}

animate();