Files
Ubuntu 32b43f85bd a
2026-07-03 16:58:28 +08:00

3.4 KiB
Raw Permalink Blame History

🌌 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 动画循环

📖 参考资料