✨ 交互式手势粒子系统

一个基于 Three.js 和 MediaPipe 的 Web 3D 实时交互式粒子系统。

通过摄像头捕捉手部动作，将 25000+ 发光粒子组合成爱心、土星、花朵等 3D 形态，实现手势驱动的粒子扩散与聚拢效果。

---

🌟 核心功能

🖐 手势实时交互

• 利用 MediaPipe Hands 实时追踪手部 21 个关键点
• 通过计算拇指到小指的距离判断手掌张开程度
• 张开手掌 → 粒子向外爆炸扩散
• 握拳 → 粒子收缩回聚集形态

💠 3D 粒子变形（Morphing）

支持 6 种炫彩几何形态的平滑切换动画：

形状	描述	数学模型
❤ 爱心	浪漫的 3D 爱心曲面	参数方程采样
🪐 土星	球体 + 轨道环	40% 球体 + 60% 环
❀ 花朵	玫瑰线曲线	Rhodonea curve (k=3/4)
🎆 烟花	螺旋爆炸效果	向外辐射采样
🧘 莲花座	禅意复杂几何	Torus Knot (p=2, q=3)
⚪ 球体	经典球面	均匀球面采样

✨ 赛博朋克视觉效果

• 自定义 Shader（GLSL）：高性能粒子运动计算
• Bloom 发光：UnrealBloomPass 后期处理
• 粒子呼吸：实时动态的律动感
• 景深感：距离远的粒子更大

🎨 现代化交互 UI

• 实时形状切换按钮（带动画反馈）
• 颜色选择器（HSL 拾色器）
• 摄像头实时预览（左下角）
• 手势强度显示
• 全屏沉浸模式

---

🛠️ 技术栈

技术	版本	用途
Three.js	0.154.0	3D 渲染引擎
MediaPipe	Latest	手势识别
WebGL	2.0	GPU 加速
GLSL	ES 3.0	自定义着色器
Vanilla JS	ES6+	核心逻辑

---

使用教程

⚙️ 系统需求

• ✅ 浏览器（Chrome/Edge/Firefox）
• ✅ 电脑摄像头可用
• ✅ 网络连接

📥 建议使用方式一：Live Server（推荐 VS Code）

# 1. 安装 VS Code Live Server 插件
# 2. 右键 index.html
# 3. 选择 "Open with Live Server"

📥 方式二：Python 本地服务

# Python 3.x
python -m http.server 8000

# 然后访问 http://localhost:8000

📥 方式三：Node.js Http Server

npx http-server .
# 访问显示的本地地址

✅ 首次使用

1. 打开 index.html
2. 允许浏览器访问摄像头权限
3. 等待 MediaPipe 模型加载（~30 秒）
4. 面向摄像头，开始交互！

---

🎮 操作指南

👋 手势控制

操作	效果
张开五指	粒子根据张开幅度向外扩散爆炸
握拳	粒子立即收缩回原形态
举起手臂	粒子随手势高度变化

🖱️ 鼠标/触屏交互

操作	效果
左键拖拽	旋转 3D 视角
滚轮	缩放视图（放大/缩小）
双指拖拽	触屏旋转

🎛️ UI 面板控制（右上角）

按钮	功能
6 个形状按钮	切换粒子形态，带平滑变形动画
颜色选择器	实时改变粒子发光颜色
⛶ 全屏按钮	进入/退出全屏沉浸模式

📊 状态面板

• 实时显示手势检测状态
• 显示手势强度百分比
• 当前形状名称

---

📂 项目结构

手势识别/
├── index.html              # 单文件入口（包含所有 HTML/CSS/JS）            
└── readme.md              # 说明文档

---

⚙️ 配置参数调优

在 index.html 的 <script> 段中修改这些参数以调整效果：

粒子相关

particleCount = 25000        // 粒子数量 (1000-100000)
uSize = 4.0                  // 单个粒子大小 (0-10)

视觉效果

bloomPass.strength = 1.2     // 发光强度 (0-3)
bloomPass.radius = 0.5       // 发光范围 (0-1)
bloomPass.threshold = 0      // 发光阈值 (0-1)

交互灵敏度

let factor = (distance - 0.1) * 3.0;  // 手势扩散灵敏度

---

🐛 常见问题解决

Q: 页面打开时卡顿或白屏？

A: 首次加载需要下载 Three.js 和 MediaPipe 库（~50MB），请等待 30-60 秒。

Q: 摄像头无法访问？

A:

1. 检查浏览器权限：设置 → 隐私 → 摄像头
2. 某些浏览器需要 HTTPS 协议才允许摄像头
3. 尝试使用 Chrome/Edge 浏览器

Q: 手势识别不准或检测不到？

A:

1. 确保光线充足、手部完整可见
2. 调整识别灵敏度参数

Q: 性能卡顿（帧数低）？

A:

1. 降低粒子数：particleCount = 10000
2. 减弱发光效果：bloomPass.strength = 0.5
3. 关闭其他高耗能程序

---

📱 浏览器兼容性

浏览器	版本	状态
Chrome	90+	✅ 完美支持
Edge	90+	✅ 完美支持
Firefox	88+	✅ 支持
Safari	15+	⚠️ 部分支持
IE 11	-	❌ 不支持

---

🌐 在线部署（GitHub Pages）

git init
git add .
git commit -m "feat: Three.js gesture particle system"
git branch -M main
git remote add origin https://github.com/你的用户名/你的仓库名.git
git push -u origin main

进入仓库 → Settings → Pages，选择 "main" 分支即可在线访问。

---

📄 许可证

MIT License - 可自由使用、修改和分发

---

🎉 致谢

感谢开源社区：

• Three.js - 3D 渲染引擎
• MediaPipe - 手势识别库

---

最后更新：2025 年 11 月 29 日
版本：1.0.0
许可：MIT License

⭐ 如果觉得有帮助，请给个 Star 支持一下！