# 3d-ordering

**Repository Path**: yunstabc/3d-ordering

## Basic Information

- **Project Name**: 3d-ordering
- **Description**: 是一个基于Web的3D手势点餐系统，用户可以通过手势控制光标，实现无接触式点餐。应用采用了科幻风格的UI设计，结合了实时手势识别、3D模型渲染和流畅的动画效果，为用户提供沉浸式的点餐体验。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-27
- **Last Updated**: 2025-11-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Future Eats - 3D Gesture Ordering

一个未来感十足的3D手势点餐应用，利用AI手势识别技术实现无接触式点餐体验。

## 项目简介

Future Eats 是一个基于Web的3D手势点餐系统，用户可以通过手势控制光标，实现无接触式点餐。应用采用了科幻风格的UI设计，结合了实时手势识别、3D模型渲染和流畅的动画效果，为用户提供沉浸式的点餐体验。

![项目运行效果图](./screenshot.png)

*图：Future Eats 3D手势点餐系统界面*
    
## 技术栈

- **前端框架**: 原生HTML5 + CSS3 + JavaScript (ES Module)
- **3D渲染**: Three.js (v0.160.0)
- **手势识别**: MediaPipe Hands
- **后处理效果**: UnrealBloomPass (Three.js addon)
- **动画库**: 自定义TWEEN动画系统

## 功能特点

### 1. AI手势识别
- 实时手部检测和跟踪
- 食指控制光标移动
- 捏合手势实现点击操作
- 手部关键点可视化

### 2. 3D交互界面
- 科幻风格的3D场景设计
- 动态网格地面和星空背景
- 六边形柱状体城市背景
- 发光效果和后处理bloom

### 3. 真实感3D食物模型
- 能量汉堡 (50 CR)
- 星际甜甜圈 (35 CR)
- 反重力披萨 (80 CR)
- 每个食物都有精细的3D模型和材质

### 4. 流畅的交互体验
- 悬停效果：食物模型放大并上浮
- 点击反馈：爆炸粒子效果
- 购物车实时更新
- 浮动文字提示

### 5. 响应式设计
- 自适应不同屏幕尺寸
- 流畅的窗口调整动画

## 项目结构

```
3d-ordering/
├── index.html          # 主HTML文件
├── app.js              # 核心JavaScript逻辑
├── style.css           # 样式文件
└── README.md           # 项目说明文档
```

## 核心功能实现

### 1. 手势识别系统

使用MediaPipe Hands库实现实时手部检测和跟踪，通过分析手部关键点坐标：
- 食指指尖位置控制光标移动
- 食指与拇指距离判断捏合手势
- 平滑的光标移动算法

### 2. 3D场景构建

- **场景设置**: 深色背景配合雾效和后处理bloom
- **灯光系统**: 环境光、聚光灯和彩色点光源
- **动态元素**: 移动的网格地面、星空和旋转的食物模型

### 3. 交互逻辑

- **射线检测**: 使用Three.js Raycaster检测3D物体交互
- **动画系统**: 自定义TWEEN库实现平滑动画
- **状态管理**: 购物车状态、手势状态和时间状态

### 4. UI界面

- **科幻风格**: 赛博朋克风格的UI设计
- **扫描线效果**: 模拟老式显示器的扫描线
- **渐晕效果**: 边缘渐暗增强沉浸感
- **实时购物车**: 显示已选商品和总价

## 使用说明

1. **启动应用**: 在浏览器中打开 `index.html` 文件
2. **允许权限**: 允许摄像头访问权限
3. **手势控制**:
   - 举起手，摄像头会检测到你的手部
   - 移动食指控制屏幕上的光标
   - 捏合食指和拇指实现点击操作
4. **点餐流程**:
   - 将光标移到食物模型上
   - 悬停时食物会放大并上浮
   - 捏合手指将食物加入购物车
   - 底部显示购物车摘要和总价

## 安装和运行

### 本地运行

1. 克隆或下载项目文件
2. 使用本地服务器运行（避免跨域问题）:
   
   ```bash
   # 使用Python 3
   python -m http.server 8000
   
   # 或使用Node.js (需要安装http-server)
   npx http-server -p 8000
   ```

3. 在浏览器中访问 `http://localhost:8000`

### 直接运行

也可以直接在浏览器中打开 `index.html` 文件，但可能会遇到跨域问题，导致Three.js模块无法加载。

## 浏览器兼容性

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

## 性能优化

- 使用WebGL 2.0渲染
- 优化3D模型复杂度
- 高效的动画循环
- 合理的光照设置
- 自适应像素比

## 未来改进方向

- [ ] 添加更多食物模型
- [ ] 实现完整的点餐流程
- [ ] 添加支付系统模拟
- [ ] 支持多手势识别
- [ ] 优化移动端体验
- [ ] 添加音效和背景音乐

## 许可证

MIT License

## 贡献

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

---

**Future Eats** - 让未来点餐触手可及！🚀