KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #claude-code #codex #typescript #ai-agents #dsh #dsh-plugin #deepseek-harness #ai-agent #mcp #agent-skills #macos

gesture-Christmas_tree-3d_with_photo

★ 39 Open GitHub ↗

A 3D particle Christmas tree controlled by hand gestures. Built with Three.js & MediaPipe. 🎄✨ (一个由手势控制的 3D 粒子圣诞树。基于 Three.js 和 MediaPipe 构建。)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🎄 Grand Luxury Tree

哈喽！这是一个为了庆祝圣诞节写的小项目。✨

原本只是想画一棵普通的 3D 圣诞树，但觉得不够酷，于是加上了 **手势识别** 和 **粒子特效**。现在你可以通过摄像头“隔空”控制这棵树，还能把自己喜欢的照片挂上去。

虽然只有几百行代码，但视觉效果拉满了（特别是在大屏幕上）。

## 🤔 这是啥？(Intro)

这不是那种静态的网页贺卡。这是一棵由 **几千个粒子** 组成的动态树。
我接入了 Google 的 MediaPipe，所以它能看懂你的手势。

* **粒子特效**：树会呼吸、旋转，还能炸裂成满天星。
* **隔空控物**：不需要鼠标，对着摄像头挥挥手就能控制它（感觉像奇异博士）。
* **挂载回忆**：点右上角的按钮上传照片，它们会变成带金框的拍立得，飘在树周围。
* **极简审美**：只有黑金配色，没有花里胡哨的装饰，主打一个“高级感”。
<img width="2557" height="1291" alt="image" src="https://github.com/user-attachments/assets/d7d31b4c-bf4d-49b2-b922-79813bbddba5" />

## 🛠️ 用了什么 (Tech)

纯纯的前端魔法，没用复杂的框架：
* **Three.js** - 搞定 3D 渲染和粒子系统。
* **MediaPipe** - 搞定手势识别（这东西太强了）。
* **原生 JS (ES Modules)** - 手搓核心逻辑。

## 🎮 怎么玩？(Controls)

第一次玩建议把音响打开（虽然还没加背景音乐，但你可以自己放首 Jingle Bells 🎵）。

### 🖐️ 手势模式 (重点！)
确保浏览器允许使用摄像头，然后：
1.  **张开手掌 (🖐️)**：这就是“炸裂模式”！树会散开变成星云，你可以转动视角。
2.  **握紧拳头 (✊)**：收！粒子会重新聚合成圣诞树。
3.  **捏合手指 (🤏)**：就像在捏东西一样，它会随机抓取一张照片放大给你看。

### 🖱️ 鼠标党
* 左键拖拽旋转，滚轮缩放。
* **H 键**：按下可以隐藏所有 UI，用来截图或录屏当壁纸很棒。

## 🚀 跑起来 (How to Run)

⚠️ **注意：** 因为用到了 ES Modules 和摄像头权限，**千万不要直接双击 `index.html` 打开**，浏览器会报错（CORS 策略限制）。你得起一个本地服务器。

**如果你有 VS Code (推荐):**
装个 `Live Server` 插件，右键 `index.html` -> "Open with Live Server"。搞定。

**如果你是 Python 大佬:**
在目录下打开终端：
```bash
python -m http.server 8000
````

然后浏览器访问 `localhost:8000`。

**如果你习惯 Node.js:**

```bash
npx http-server .
```

**Merry Christmas\! 🎅**
如果你觉得这项目有点意思，欢迎 Star，或者 Fork 改成你喜欢的颜色！

```

gesture-Christmas_tree-3d_with_photo

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README