看到别人收费几十块,于是我找到一个类似的,然后二改了,增加更多动作,支持自己调教,免费分享给大家并开源

二改:https://github.com/echoezy9527
开源地址:https://github.com/xiaojieyahuhu/christmas-tree-generated-by-gemini-3

✨ 功能特性

🎮 手势控制

• 捏合缩放: 切换到下一张照片聚焦模式
• 张开散开: 展开/收拢圣诞树粒子
• 水平滑动: 左右旋转圣诞树
• 垂直滑动: 上下俯仰视角
• 握拳收拢: 收缩圣诞树到树形状态

🎨 视觉效果

• 3D粒子系统: 动态的圣诞树粒子效果
• 照片集成: 支持用户上传个人照片作为树上的装饰
• 雪花动画: 实时雪花飘落效果
• 光影渲染: 专业的Bloom后期处理效果

🎵 多媒体支持

• 背景音乐: 支持自定义背景音乐上传
• 交互音效: 丰富的交互反馈音效

🔧 调试工具

• 实时调试面板: 显示当前模式、速度、手势匹配状态
• 手势录制器: 可以录制自定义手势序列
• 模拟测试: 支持鼠标模拟各种手势进行测试

🚀 快速开始

环境要求

• Node.js 14+
• 现代浏览器（支持WebRTC）
• 摄像头权限

安装运行

1. 克隆项目

   git clone <repository-url>
   cd 圣诞树项目

2. 启动服务器

   node server.js

3. 访问应用
   打开浏览器访问: http://localhost:8080

🎯 使用指南

首次使用

1. 页面加载后会显示系统预加载界面
2. 点击"初始化并允许摄像头"按钮
3. 允许摄像头访问权限
4. 在设置页面上传照片和背景音乐
5. 点击"开始魔法"进入主界面

手势操作

• 准备姿势: 将手放在摄像头前，等待"手势：已追踪"提示
• 展开树: 张开手掌（avgDist > 0.28）
• 收缩树: 握拳收拢（avgDist < 0.20）
• 旋转视角: 水平滑动手掌
• 俯仰视角: 垂直移动手掌
• 查看照片: 捏合手指切换到照片聚焦模式

调试模式

• 按 D 键显示/隐藏调试面板

• 调试面板显示：

  • 当前模式（TREE/SCATTER/FOCUS）
  • 旋转速度
  • 手势匹配ID
  • 当前手势状态

手势录制

1. 在调试面板选择动作类型
2. 点击"开始录制"进行3秒录制
3. 点击"保存序列"存储到数据库
4. 系统会自动学习新的手势模式

📁 项目结构

圣诞树项目/
├── server.js              # Node.js HTTP服务器
├── index.html             # 主前端页面
├── gesture_samples.json   # 手势样本数据库
└── README.md             # 项目文档

🛠 技术栈

前端技术

• Three.js: 3D渲染引擎
• MediaPipe: 手势识别库
• WebRTC: 摄像头访问
• ES6 Modules: 现代JavaScript模块化

后端技术

• Node.js: 服务器运行环境
• HTTP模块: 基础Web服务器
• 文件系统: 本地数据持久化

关键算法

• 欧几里得距离: 手势特征匹配
• 动态时间规整: 手势序列比较
• 粒子系统: 3D视觉效果
• 四元数插值: 平滑动画过渡

🔍 核心实现

手势识别流程

1. 摄像头捕获: WebRTC获取视频流
2. 特征提取: MediaPipe提取21个手部关键点

3. 实时计算:

   • 手掌开合程度 (avgDist)
   • 捏合距离 (pinchDist)
   • 移动速度和方向 (dx, dy)
   • 手掌角度 (angle)
4. 模式匹配: 与录制的手势序列进行匹配
5. 状态更新: 根据手势触发相应的3D动画

3D渲染优化

• 实例化渲染: 高效的粒子批量渲染
• LOD系统: 距离-based细节层次
• 对象池: 复用3D对象减少GC压力
• 后期处理: Bloom和环境光遮蔽

⚠️ 注意事项

摄像头使用

• 确保在HTTPS环境下或localhost使用
• 首次使用需要允许摄像头权限
• 建议在良好光照环境下使用

性能优化

• 在低性能设备上可降低粒子数量
• 建议使用现代GPU加速的浏览器
• 长时间使用注意设备发热

数据存储

• 手势数据存储在本地 gesture_samples.json
• 照片和音乐文件存储在内存中
• 刷新页面会重置上传的内容

🎨 自定义扩展

添加新手势

1. 在调试面板选择"其他动作"
2. 录制新的手势序列
3. 系统自动学习并识别

修改视觉效果

• 调整 CONFIG 对象中的参数
• 修改材质属性和光照设置
• 自定义粒子系统的行为

扩展功能

• 添加更多3D模型和动画
• 集成语音识别功能
• 支持多人协作模式

🤝 贡献指南

欢迎提交Issue和Pull Request来改进这个项目！

开发环境设置

# 安装依赖（如果有的话）
npm install

# 启动开发服务器
npm start
# 或
node server.js

📄 许可证

本项目采用 MIT 许可证 - 详见 LICENSE 文件

🎄 祝您度过一个充满魔力的圣诞节！ ✨

如果您喜欢这个项目，请给它一个⭐星标！