Ubuntu
111 lines
3.4 KiB
Markdown
111 lines
3.4 KiB
Markdown
# 🌌 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 服务，开机自动启动：
|
||
|
||
```bash
|
||
# 查看服务状态
|
||
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/
|
||
|
||
### 手动运行
|
||
```bash
|
||
cd /home/ubuntu/nanocode/particle-lab
|
||
python3 -m http.server 8902
|
||
```
|
||
|
||
## 🎯 核心技术点
|
||
|
||
| 概念 | 说明 |
|
||
|------|------|
|
||
| **BufferGeometry** | GPU 友好的几何数据存储 |
|
||
| **InstancedMesh** | 批量实例渲染 (15K+粒子@60fps) |
|
||
| **Points** | 粒子点云渲染 |
|
||
| **UnrealBloomPass** | 霓虹发光后期处理 |
|
||
| **Float32Array** | JavaScript 与 GPU 之间的数据桥梁 |
|
||
| **requestAnimationFrame** | 流畅的 60fps 动画循环 |
|
||
|
||
## 📖 参考资料
|
||
|
||
- [Three.js Particles 文档](https://threejs.org/docs/#api/en/objects/Points)
|
||
- [casberry.in AI Particle Simulator](https://particles.casberry.in/)
|
||
- [The Book of Shaders](https://thebookofshaders.com/)
|