# christmas-tree

**Repository Path**: uidoer/christmas-tree

## Basic Information

- **Project Name**: christmas-tree
- **Description**: 手势圣诞树
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-12-24
- **Last Updated**: 2025-12-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎄 Christmas Tree - 互动圣诞树

一个炫酷的3D互动圣诞树应用，支持手势控制、照片展示和多种视觉特效。

![Preview](https://img.shields.io/badge/Vue-3.4-green) ![Preview](https://img.shields.io/badge/Three.js-0.160-blue) ![Preview](https://img.shields.io/badge/MediaPipe-0.10-orange)

## ✨ 功能特点

- 🎄 **3D圣诞树** - 2000+发光粒子组成的华丽圣诞树
- 🌨️ **飘雪效果** - 800个3D雪花飘落
- ⭐ **树顶星星** - 金色闪烁的3D星星
- 🌈 **彩虹光带** - 环绕树的动态光带
- 📷 **照片展示** - 上传照片挂在树上
- 🤏 **手势控制** - 通过摄像头识别手势
- 💾 **照片记忆** - 自动保存上传的照片
- 📱 **移动端支持** - 手机浏览器可访问

## 🚀 快速开始

### 安装依赖

```bash
cd christmas-tree
npm install
```

### 启动开发服务器

```bash
npm run dev
```

启动后会显示：
```
  ➜  Local:   http://localhost:3000/
  ➜  Network: http://192.168.x.x:3000/
```

### 📱 手机访问

1. 确保手机和电脑在**同一WiFi网络**下
2. 在手机浏览器输入 `Network` 地址（如 `http://192.168.1.100:3000/`）
3. 允许摄像头权限以使用手势功能

## 🎮 操作指南

### ⌨️ 键盘控制

| 按键 | 功能 |
|------|------|
| `1` | 圣诞树模式 - 粒子聚合成树形 |
| `2` | 散开模式 - 粒子散开到星空 |
| `3` | 聚焦模式 - 展示照片（每次按切换下一张） |
| `N` | 切换到下一张照片 |
| `H` | 隐藏/显示UI界面 |
| `+` / `-` | 放大/缩小照片 |
| `↑` / `↓` | 放大/缩小照片 |

### 🖱️ 鼠标控制

| 操作 | 功能 |
|------|------|
| 移动鼠标 | 旋转视角 |
| 滚轮 | 聚焦模式下缩放照片 |

### 📱 触摸控制（手机端）

| 操作 | 功能 |
|------|------|
| 👆 **双击** | 切换模式（树→散开→照片→树） |
| 👆 **滑动** | 旋转视角 |

### 🤏 手势控制（需要摄像头）

| 手势 | 功能 |
|------|------|
| ✋ **张开手** | 散开模式 - 粒子飞散到星空 |
| ✊ **握拳** | 圣诞树模式 - 粒子聚合成树 |
| 🤏 **捏合** | 聚焦模式 - 展示照片 |

**手势识别技巧：**
- 将手放在摄像头前约30-50cm处
- 确保光线充足
- 手势保持稳定1秒以上

## 📸 照片功能

### 添加照片
1. 点击底部 **"🎁 添加照片"** 按钮
2. 选择一张或多张图片
3. 照片会自动挂在圣诞树上

### 查看照片
1. 按 `3` 键或使用捏合手势
2. 照片会以炫酷动画飞入屏幕中央
3. 再次按 `3` 或 `N` 切换下一张

### 管理照片
1. 点击 **"📷 管理"** 按钮打开管理面板
2. 可以删除单张照片或清空所有
3. 照片自动保存，刷新页面后仍在

## 🎬 照片动画效果

展示照片时随机使用以下6种动画：

1. **飞入** - 从原位置3D飞入
2. **螺旋** - 旋转720°进入
3. **翻转** - 3D翻转效果
4. **弹跳** - 从上方弹跳落下
5. **缩放模糊** - 从大到小渐变
6. **滑动旋转** - 从侧边滑入

## 🛠️ 技术栈

- **Vue 3** - 前端框架
- **Three.js** - 3D渲染引擎
- **MediaPipe** - 手势识别
- **Vite** - 构建工具

## 📁 项目结构

```
christmas-tree/
├── src/
│   ├── App.vue      # 主应用组件
│   └── main.js      # 入口文件
├── package.json     # 依赖配置
├── vite.config.js   # Vite配置
└── README.md        # 说明文档
```

## 🔧 配置说明

### 修改端口

编辑 `vite.config.js`:
```javascript
server: {
  port: 3000,  // 修改为其他端口
  host: true,  // 允许网络访问
}
```

### 构建生产版本

```bash
npm run build
```

构建结果在 `dist/` 目录，可部署到任意静态服务器。

## ❓ 常见问题

### 手势不工作？
- 检查是否允许了摄像头权限
- 确保光线充足
- 手不要离摄像头太近或太远

### IP访问时摄像头不可用？
这是浏览器安全策略限制，摄像头只能在以下情况使用：
- `localhost` 或 `127.0.0.1` 访问
- HTTPS 安全连接

**解决方案：**

**方案1：使用localhost访问（推荐）**
在本机浏览器使用 `http://localhost:3000`

**方案2：Chrome添加白名单**
1. 打开 `chrome://flags/#unsafely-treat-insecure-origin-as-secure`
2. 输入你的IP地址，如 `http://192.168.0.23:3000`
3. 设置为 `Enabled`
4. 重启Chrome

**方案3：使用HTTPS（高级）**
```bash
# 安装mkcert
brew install mkcert  # macOS
mkcert -install
mkcert localhost 192.168.0.23

# 修改vite.config.js使用HTTPS
```

**方案4：手机端替代操作**
即使没有摄像头，仍可使用触摸/键盘控制：
- 点击屏幕控制（开发中）
- 按 1/2/3 切换模式
- 按 N 切换照片

### 照片显示不了？
- 检查图片格式（支持jpg/png/gif/webp）
- 图片文件不要太大（建议<5MB）

### 手机访问不了？
- 确保手机和电脑在同一WiFi
- 检查防火墙是否阻止了3000端口
- 尝试关闭电脑防火墙

### 性能问题？
- 减少浏览器其他标签页
- 关闭其他占用GPU的应用
- 使用Chrome/Edge获得最佳性能

## 📄 许可证

MIT License

---

🎅 **Merry Christmas!** 祝你圣诞快乐！