# tree

**Repository Path**: tanelei/tree

## Basic Information

- **Project Name**: tree
- **Description**: 圣诞树
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-25
- **Last Updated**: 2025-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: HTML, Vue, CSS

## README

# 🎄 我不是男同👨‍❤️‍👨

> 一个基于 **vue3**, **Three.js** 和 **AI 手势识别** 的超假 3D 圣诞树 Web 应用。

这个项目不仅仅是一棵树，它是一个承载记忆的交互式画廊。成百上千个粒子、璀璨的彩灯和悬浮的拍立得照片共同组成了一棵奢华的圣诞树。用户可以通过手势控制树的形态（聚合/散开）和视角旋转，体验电影级的视觉盛宴。



## ✨ 核心特性

* **极致视觉体验**：由 45,000+ 个发光粒子组成的树身，配合动态光晕 (Bloom) 和辉光效果，营造梦幻氛围。
* **记忆画廊**：照片以“拍立得”风格悬浮在树上，每一张都是一个独立的发光体，支持双面渲染。
* **AI 手势控制**：无需鼠标，通过摄像头捕捉手势即可控制树的形态（聚合/散开）和视角旋转。
* **丰富细节**：包含动态闪烁的彩灯、飘落的金银雪花、以及随机分布的圣诞礼物和糖果装饰。
* **高度可定制**：**支持用户轻松替换为自己的照片，并自由调整照片数量。**

## 🛠️ 技术栈

* **框架**: vue3, Vite
* **3D 引擎**: Three.js
* **AI 视觉**: MediaPipe Tasks Vision (Google)

## 🚀 快速开始

### 1. 环境准备
确保你的电脑已安装 [Node.js](https://nodejs.org/) (建议 v20 或更高版本)。

### 2. 安装依赖
在项目根目录下打开终端，运行：```bash
npm install
### 3. 启动项目
npm run dev
### 🖼️ 自定义照片
### 1. 准备照片
找到项目目录下的 public/photos/ 文件夹。

顶端大图/封面图：命名为 top.jpg（将显示在树顶的立体五角星上）。

树身照片：命名为 1.jpg, 2.jpg, 3.jpg ... 依次类推。

建议：使用正方形或 4:3 比例的图片，文件大小不宜过大
### 2. 替换照片
直接将你自己的照片复制到 public/photos/ 文件夹中，覆盖原有的图片即可。请保持文件名格式不变（1.jpg, 2.jpg 等）。
### 3. 修改照片数量 (增加或减少)
如果你放入了更多照片（例如从默认的 31 张增加到 100 张），需要修改代码以通知程序加载它们。
const TOTAL_NUMBERED_PHOTOS = 31; // <--- 修改这个数字！
### 🖐️ 手势控制说明
* **本项目内置了 AI 手势识别系统，请站在摄像头前进行操作（屏幕右下角有 DEBUG 按钮可查看摄像头画面）**：
🖐 张开手掌 	圣诞树炸裂成漫天飞舞的粒子和照片
✊ 握紧拳头 	所有元素瞬间聚合成一棵完美的圣诞树
👋 手掌左右移动	旋转视角	手向左移，树向左转；手向右移，树向右转
👋 手掌上下移动	俯仰视角	手向上移，视角抬高；手向下移，视角降低
✌ 切换季节
### 📄 License
MIT License. Feel free to use and modify for your own holiday celebrations!
### Merry Christmas! 🎄✨