Three.js + WebGL 深空星波粒子动画特效制作详解

1，引言

在当今的前端开发中，3D特效已经成为提升用户体验的重要手段。本文将详细介绍如何使用Three.js和WebGL技术制作一个震撼的深空星波粒子动画特效。该特效包含4000个动态粒子、15000颗星星背景，以及实时参数控制面板，不仅视觉效果出色，技术实现也颇具挑战性。

实现效果：

【前端特效】Three.js 深空星波粒子特效

2，技术架构概述

2.1，核心技术栈

• Three.js: 3D渲染引擎，提供场景、相机、渲染器等基础功能
• WebGL: 底层图形API，通过着色器实现GPU加速渲染
• GLSL: 着色器语言，实现复杂的视觉效果算法

2.2 特效组成模块

1. 粒子波浪系统: 4000个粒子组成的动态波浪
2. 星空背景: 15000颗星星的深空环境
3. 反射效果: 水面反射模拟
4. 控制面板: 15种参数的实时调节

3，核心算法原理

3.1，Simplex噪声算法

Simplex噪声是Perlin噪声的改进版本，具有更好的性能和更少的伪影。在我们的特效中，用于生成自然的波形变化：

float snoise(vec2 v) {const vec4 C = vec4(0.211324865405187, 0.366025403784439,-0.577350269189626, 0.024390243902439);vec2 i = floor(v + dot(v, C.yy));vec2 x0 = v - i + dot(i, C.xx);vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);vec4 x12 = x0.xyxy + C.xxzz;x12.xy -= i1;i = mod289(i);vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))+ i.x + vec3(0.0, i1.x, 1.0));vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);m = m * m;m = m * m;vec3 x = 2.0 * fract(p * C.www) - 1.0;vec3 h = abs(x) - 0.5;vec3 ox = floor(x + 0.5);vec3 a0 = x - ox;m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);vec3 g;g.x = a0.x * x0.x + h.x * x0.y;g.yz = a0.yz * x12.xz + h.yz * x12.yw;return 130.0 * dot(m, g);
}

3.2，分形布朗运动(FBM)

通过叠加多个频率的噪声创建复杂的波形，模拟真实的水波效果：

float fbm(vec2 v) {float total = 0.0;float amplitude = 1.0;float frequency = 1.0;for (int i = 0; i < 5; i++) {total += snoise(v * frequency) * amplitude;frequency *= 2.0;   // 频率翻倍amplitude *= 0.5;   // 振幅减半}return total;
}

4，着色器实现详解

4.1，顶点着色器

顶点着色器负责处理每个粒子的位置和波形变形：

uniform float uTime;        // 动画时间
uniform float uAmplitude;   // 波形振幅
uniform float uFrequency;   // 波形频率
uniform float uWaveSpeed;   // 波浪速度varying float vDisplacement;    // 传递给片段着色器的位移值void main() {vec3 pos = position;// 生成波形位移float noise = fbm(vec2(pos.x * uFrequency, pos.z * uFrequency - uTime * uWaveSpeed));vDisplacement = noise;// 应用Y方向位移pos.y += noise * uAmplitude;// 标准3D变换vec4 modelPosition = modelMatrix * vec4(pos, 1.0);vec4 viewPosition = viewMatrix * modelPosition;vec4 projectedPosition = projectionMatrix * viewPosition;gl_Position = projectedPosition;// 粒子大小随距离调整gl_PointSize = uParticleSize * (1.0 / -viewPosition.z);
}

4.2，片段着色器

片段着色器处理颜色和透明度，实现渐变和闪烁效果：

uniform float uTime;
uniform float uDeepColorIntensity;
unifo