当前位置：首页 > JavaScript

js实现流体

2026-02-01 18:20:35JavaScript

流体动画实现方法

使用JavaScript实现流体效果通常涉及Canvas或WebGL技术，以下是两种常见方法：

Canvas 2D方法 创建基于Canvas的流体模拟需要借助物理算法和粒子系统：

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

const particles = [];
for (let i = 0; i < 100; i++) {
  particles.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    size: Math.random() * 5 + 2,
    speedX: Math.random() * 3 - 1.5,
    speedY: Math.random() * 3 - 1.5
  });
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  particles.forEach(particle => {
    particle.x += particle.speedX;
    particle.y += particle.speedY;

    if(particle.x < 0 || particle.x > canvas.width) {
      particle.speedX *= -1;
    }
    if(particle.y < 0 || particle.y > canvas.height) {
      particle.speedY *= -1;
    }

    ctx.beginPath();
    ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
    ctx.fillStyle = 'rgba(0, 150, 255, 0.5)';
    ctx.fill();
  });

  requestAnimationFrame(animate);
}
animate();

WebGL方法 使用WebGL实现更高效的流体效果需要着色器编程：

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);

const geometry = new THREE.PlaneGeometry(10, 10, 128, 128);
const material = new THREE.ShaderMaterial({
  uniforms: {
    time: { value: 0 }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform float time;
    varying vec2 vUv;
    void main() {
      vec2 p = vUv * 10.0;
      float intensity = sin(p.x - time) * cos(p.y + time);
      gl_FragColor = vec4(0.0, intensity * 0.5, 1.0, 1.0);
    }
  `
});

const plane = new THREE.Mesh(geometry, material);
scene.add(plane);
camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  material.uniforms.time.value += 0.05;
  renderer.render(scene, camera);
}
animate();