京公网安备11010802038645号京ICP备20022436号-3京EDI证京B2-20220639区块链京网信备 1101082276223860002X号数据描述
# 粒子视界 - 绿色圣诞树
这是一个基于Three.js和MediaPipe的手势交互粒子系统，展示绿色圣诞树形状粒子效果，支持手势控制旋转和扩散。
## 使用方法
### 1. 直接打开文件
启动本地服务器，双击运行start_server.bat，然后用浏览器访问http://127.0.0.1:8000/
### 2. 兼容浏览器
支持的浏览器包括：
- Chrome/Edge 90+：最佳支持
- **注意**：Edge浏览器在授予摄像头权限后，可能需要等待1-2秒让摄像头完全加载
- Firefox 88+：支持
- Safari 14+：支持
### 3. 授予摄像头权限
首次访问时，浏览器会弹出摄像头权限请求，请点击"允许"以启用手势交互功能。
## 手型操作说明
### 1. 扩散与凝聚
- **右手张开手掌**：粒子向外扩散，手掌张开越大，扩散效果越强
- **右手握拳**：粒子向内缩小，握拳越紧，缩小效果越明显
### 2. 旋转控制
- 粒子自动水平旋转，通过控制台调整旋转速度
### 3. 照片交互
- **左手捏合**：提取并展示随机照片
- **左手松开**：关闭照片展示
- **左手左右移动**：选择下一张/上一张照片
- **左手拇指食指开合**：缩放图片
### 4. 状态提示
- 屏幕底部左侧显示摄像头画面和状态
- 红色状态点：等待手势中
- 绿色状态点：正在跟踪手势
- 屏幕中央显示当前扩散强度和旋转速度
## UI控制
### 1. 右上角控制按钮
- **👁️ 隐藏UI**：切换UI的显示/隐藏
- **⛶ 全屏**：切换全屏模式
### 2. 左上角手势说明
- 显示当前可用的手势操作说明
## 控制台功能说明
每个页面右上角都有一个控制台，包含以下功能：
### 1. 视觉参数
- **核心颜色**：点击颜色选择器可以更改粒子的基础颜色
- **粒子大小**：拖动滑块调整粒子的大小（范围：0.5-3）
- **手势敏感度**：调整手势对粒子扩散效果的影响程度（范围：1-5）
- **树的高度**：调整圣诞树的高度（范围：40-100）
- **音乐律动**：调整音乐对粒子效果的影响程度（范围：0.1-3.0）
### 2. 旋转控制
- **旋转灵敏度**：调整粒子旋转速度（范围：0.1-5，默认：0.5）
### 3. 图片管理
- **选择图片文件**：上传本地图片到粒子系统
- **当前图片索引**：选择并显示指定索引的图片
- **下一张/上一张图片**：切换显示图片
- **显示随机图片**：随机显示一张图片
- **图片缩放**：调整图片的缩放比例（范围：0.5-3.0）
- **图片旋转模式**：选择图片的旋转模式（树状或旋转）
### 4. 音频控制
- **选择音乐文件**：上传本地音乐文件（MP3格式）
- **音量**：调整背景音乐的音量
- **播放/暂停**：控制背景音乐的播放状态
## 技术栈
- Three.js：3D图形渲染
- MediaPipe Hands：手势识别
- WebGL：硬件加速渲染
- lil-gui：参数控制面板
## 注意事项
1. 确保在光线充足的环境下使用，以便摄像头清晰识别手势
2. 建议使用带有前置摄像头的设备
3. 保持手部在摄像头视野范围内
4. 首次加载可能需要一些时间下载依赖库
5. 如遇到摄像头无法启动，请检查浏览器权限设置
6. 支持拖放照片到页面中，最多支持30张照片
7. 支持音乐文件上传，格式为MP3
---
## 版权信息
© 2025 深圳典枢科技有限公司
**典枢** - www.dianshudata.com
享受手势交互带来的沉浸式粒子体验吧！✨
看了又看
暂无推荐
验证报告
以下为卖家选择提供的数据验证报告：
圣诞树，可本地运行，无需网络
16.86MB
申请报告