Three.js实现炫酷图片粒子化效果：从聚合到扩散的动态演变

news2025/2/7 15:13:28

一、效果展示

本特效实现了一个基于图片像素的智能粒子系统，通过Three.js引擎驱动，呈现出以下惊艳效果：

图片粒子化：将任意图片转化为动态粒子系统
智能聚合扩散：粒子在聚合状态与随机扩散状态间自然过渡
物理运动模拟：包含空气阻力、速度继承等真实物理特性
动态光影效果：基于Z轴位置的色彩渐变与边缘发光

【Three.js粒子特效】用代码编织星光银河致敬永远的偶像大S

二、技术原理

2.1 系统架构

// 核心架构示意
初始化Three.js场景 -> 加载图片资源 -> 生成粒子坐标 -> 配置着色器材质 -> 建立动画循环 -> 实现物理运动模型

2.2 关键技术点

粒子坐标映射：通过Canvas解析图片像素数据，按步长采样生成粒子坐标
双状态位置存储：同时维护初始随机位置和最终聚合位置
噪声扰动算法：使用Simplex Noise生成自然运动轨迹
物理运动模型：包含速度继承、空气阻力等参数
自定义着色器：实现动态光影与颜色渐变效果

三、核心代码解析

3.1 粒子坐标生成（关键创新点）

原理解析：

坐标映射策略
图片坐标系：原始图片左上角为(0,0)，右下角为(width,height)
世界坐标系：通过canvas.width/2和canvas.height/2计算，将图片中心设为三维空间原点(0,0,0)
Y轴反转：canvas.height/2 - y将图片顶部映射为正Y方向，符合Three.js坐标系标准
随机初始位置设计
空间扩展倍数：
3倍于原图尺寸的随机范围，确保粒子有充足运动空间
三维分布：
```
X_{rand} ∈ [-1.5W, +1.5W]  
Y_{rand} ∈ [-1.5H, +1.5H]  
Z_{rand} ∈ [-750, +750]
```
运动轨迹：初始位置与目标位置的距离差决定粒子动画幅度
性能与效果平衡
步长控制：step参数值越大，采样间隔越大，粒子数量越少
| step值 | 粒子数量估算公式 | 示例（1000x1000图片）|
|--------|------------------|---------------------|
| 2 | (W/2)(H/2) | 250,000 |
| 6 | (W/6)(H/6) | ~27,777 |
Z轴随机：(Math.random() - 0.5) * 1500在深度方向创造立体分布效果
视觉增强技巧
扩大倍数选择：3倍扩展在保证粒子可见性的同时，创造戏剧性的聚合/扩散效果
深度维度：Z轴随机值使粒子在三维空间呈现自然分布，避免二维平面化
gamma修正：后续的颜色采样代码通过Math.pow(r/255, 1/2.2)校正颜色线性值

参数调整指南：
1，扩大倍数（当前3x）：值越大→初始扩散范围越大→运动幅度更明显；
2，Z轴范围（当前±750）：值越大→深度方向分布越广→透视效果更强烈；
3，step值（当前6）：值越小→粒子密度越高→细节保留更好但性能要求更高；

关键代码：

// 从图片生成粒子坐标
for (let y = 0; y < canvas.height; y += step) {
  for (let x = 0; x < canvas.width; x += step) {
    // 坐标中心化处理
    finalPositions[index] = x - canvas.width / 2;
    finalPositions[index + 1] = canvas.height / 2 - y;
    
    // 随机初始位置（扩大3倍范围）
    startPositions[index] = (Math.random() - 0.5) * canvas.width * 3;
    startPositions[index + 1] = (Math.random() - 0.5) * canvas.height * 3;
    startPositions[index + 2] = (Math.random() - 0.5) * 1500;
  }
}

3.2 自定义着色器（视觉亮点）

// 顶点着色器
attribute float size;
void main() {
  gl_PointSize = size * (300.0 / -mvPosition.z); // 透视尺寸变化
}

// 片元着色器
vec3 color = mix(vColor, vec3(1.0), abs(vZ) * 0.001); // Z轴颜色混合
float brightness = pow(1.0 - length(gl_PointCoord - 0.5)*2.0, 3.0); // 边缘发光

3.3 动画控制引擎（核心逻辑）

原理详解：

三态循环机制（状态机模式）
聚合阶段：通过线性插值（Lerp）实现平滑过渡，progress参数控制过渡进度
暂停阶段：冻结粒子位置，applyJitter=false关闭噪声扰动
扩散阶段：反向插值运算，1 - progress实现镜像运动轨迹
改进型物理模型（简化牛顿力学）
速度继承：velocityInheritance=0.95保留95%速度，模拟物体惯性
加速度计算：dx * 0.1将位置差值的10%转化为加速度，系数控制运动刚度
空气阻力：dragCoefficient=0.02每帧损失2%速度，避免无限加速
噪声扰动条件（程序化动画）
仅在聚合/扩散阶段启用：applyJitter控制噪声函数执行
噪声作用：通过Simplex Noise生成自然随机运动，避免机械式线性运动

关键代码：

function animate(timestamp) {
  // 阶段控制逻辑
  if (tCycle < transitDuration) {        // 聚合阶段
    progress = tCycle / transitDuration;
  } else if (tCycle < transitDuration + pauseDuration) { // 暂停阶段
    applyJitter = false;
  } else {                               // 扩散阶段
    progress = 1 - (tCycle - transitDuration - pauseDuration)/transitDuration;
  }

  // 物理运动模型
  velocities.x *= velocityInheritance;  // 速度继承
  velocities.x += dx * 0.1;             // 目标方向加速度
  velocities.x *= (1 - dragCoefficient);// 空气阻力
}