🌌 Particle Lab - 粒子动效实验室
基于 Three.js 的渐进式粒子系统学习项目,从最简单的静态粒子逐步掌握 casberry.in 风格的 GPU 粒子渲染技术。
📚 完成的效果矩阵
| # | 效果 | 粒子数 | 核心技术 | 特色 |
|---|---|---|---|---|
| 01 | Hello Particles | 500 | BufferGeometry | 入门基础 |
| 02 | Moving Dots | 2000 | 正弦波动画 | 独立运动 |
| 03 | Sphere Bloom | 15000 | 斐波那契球面 | 霓虹发光 |
| 04 | CUBE | 8000 | 3D网格坐标 | 波动变形 |
| 05 | HELIX | 6000 | 双螺旋相位 | DNA结构 |
| 06 | TORUS | 8000 | 圆环参数方程 | 彩虹流动 |
| 07 | S7777 | 10000 | 点阵字体 | 霓虹数字 |
| 08 | NAVE | 8000 | 箭头形状 | 飞船尾迹 |
| 09 | LORENZ | 6000 | 微分方程 dx=σ(y-x) |
蝴蝶效应 |
| 10 | GALAXY | 10000 | 对数螺旋 r=ae^(bθ) |
螺旋星系 |
| 11 | FLOW FIELD | 8000 | Perlin Noise | 向量力场 |
| 12 | BLACK HOLE | 8000 | 开普勒轨道 | 吸积盘+喷流 |
| 13 | NEURAL | 6000 | 网络拓扑 | 脉冲传播 |
| 14 | VORTEX | 8000 | 螺旋上升 | 龙卷风 |
| 15 | FIREWORKS | 15000 | 物理模拟 | 中国烟花 |
| 16 | MATRIX RAIN | ∞ | Canvas 2D | 代码雨 |
💻 16 - MATRIX RAIN 特色功能
模式切换
- 混合模式 - 代码+汉字交替出现
- 代码模式 - 编程字符流
- 汉字模式 - 纯中文流动
- 诗词模式 - 古诗词字符
特效
- 故障模式 - RGB分离+粒子爆炸+故障线
- 拖尾效果 - 半透明遮罩实现
- 头部高亮 - 每列首字符白色
- 随机闪烁 - 模拟真实显示器
经典台词
Wake up, Neo...
The Matrix has you...
Follow the white rabbit.
🎆 15 - FIREWORKS 特色功能
中国传统元素
- 颜色: 中国红、金黄、橘黄、紫红、玫红、金色、银白
- 爆炸形状:
- 菊花状 - 多层球面扩散
- 心形 - 参数方程
x=16sin³t, y=13cost-5cos2t-2cos3t-cos4t - 环形 - 水平圆环爆炸
- 垂柳状 - 向下飘落
- 球面 - 经典3D爆炸
物理系统
- 重力: 9.8m/s² 模拟
- 空气阻力: 速度衰减
- 拖尾: 火箭上升尾迹
- 闪烁: 5% 粒子带闪光效果
交互功能
- 🎆 发射单发烟花
- 🧧 祝福模式(8发环绕+祝福语)
- ▶ 自动发射开关
- 🌃 城市夜景背景
🚀 运行方式
系统服务(推荐)
已配置为 systemd 服务,开机自动启动:
# 查看服务状态
sudo systemctl status particle-lab
# 重启服务
sudo systemctl restart particle-lab
# 停止服务
sudo systemctl stop particle-lab
# 查看日志
sudo journalctl -u particle-lab -f
访问地址:http://129.211.173.87:8902/
手动运行
cd /home/ubuntu/nanocode/particle-lab
python3 -m http.server 8902
🎯 核心技术点
| 概念 | 说明 |
|---|---|
| BufferGeometry | GPU 友好的几何数据存储 |
| InstancedMesh | 批量实例渲染 (15K+粒子@60fps) |
| Points | 粒子点云渲染 |
| UnrealBloomPass | 霓虹发光后期处理 |
| Float32Array | JavaScript 与 GPU 之间的数据桥梁 |
| requestAnimationFrame | 流畅的 60fps 动画循环 |