每年圣诞节都会给老婆准备一个特别的惊喜，安排在专门为她准备的域名上。前几年有过一个小博客网站、一个小菜谱网站、也想尝试过相册网站，但都不够惊喜。今年 AI 技术已经非常成熟，短短几行代码就能让 Gemini 生成一个可交互的网站，听说有人尝试了圣诞树效果，决定在前人的基础上小小修改。

首先特别感谢这个项目的原作者，没有这个项目我也不可能完成这个惊喜：

图片隐私关系，我个人修改的库就不公开了。

下面贴上原项目介绍：

🎄 Grand Luxury Tree

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

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

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

点击下面的链接可以直接访问： https://electronicminer.github.io/gesture-Christmas_tree-3d_with_photo/christmas_tree_touch&gesture.html

🤔 这是啥？(Intro)

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

• 粒子特效：树会呼吸、旋转，还能炸裂成满天星。
• 隔空控物：不需要鼠标，对着摄像头挥挥手就能控制它（感觉像奇异博士）。
• 挂载回忆：点右上角的按钮上传照片，它们会变成带金框的拍立得，飘在树周围。
• 极简审美：只有黑金配色，没有花里胡哨的装饰，主打一个“高级感”。

🛠️ 用了什么 (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 大佬: 在目录下打开终端：

python -m http.server 8000

然后浏览器访问 localhost:8000。

如果你习惯 Node.js:

npx http-server .

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

新增移动端网页支持

Contributors ✨

感谢所有为本项目做出贡献的开发者：

📊 Star History