以下为最近网上挺火的Gemini3 Pro生成的圣诞树复刻升级（浪漫版）

🔗 在线体验与源码

🚀 在线演示 (Live Demo):
https://khyron.cn/christmas-tree/
(建议使用 Chrome / Edge / Safari 浏览器，并允许摄像头权限以开启 AI 互动功能)

所有文件读取、摄像头数据读取均在本地执行，没有上传云端，放心使用

💻 开源代码 (GitHub):
https://github.com/Roisten/Romantic-Christmas-Tree

🎞️ 效果演示:

✨ 核心亮点 (Features)

1. 🎨 极致的视觉美学

告别传统的红绿配色，本项目采用了香槟金 + 浪漫粉 + 深玫瑰色的奢华色调。

  • 粒子系统：由 2000+ 个核心粒子组成的动态结构。

  • 后期处理：集成了 Unreal Bloom (辉光) 效果，营造朦胧梦幻的深空氛围。

  • 性能优化：重构了雪花系统与几何体复用，确保在移动端也能流畅运行。

2. 🪄 魔法般的 AI 手势控制

无需鼠标键盘，通过摄像头捕捉手部动作即可与场景交互（基于 MediaPipe）：

  • 🖐 张开手掌：圣诞树瞬间炸裂，化作漫天繁星（散开模式）。

  • ✊ 握紧拳头：触发隐藏剧情，粒子重组为“求婚情侣”剪影 (Flower For You)。

  • 👌 捏合手指：在散开模式下，隔空“抓取”悬浮的照片，将其拉近到眼前。

3. 🖼️ 沉浸式回忆画廊

  • 自定义上传：支持用户上传本地照片文件夹。

  • 3D 相框：照片会自动生成带有玫瑰金边框的 3D 卡片，悬浮在粒子云中。

4. ⚡ 硬核性能优化

为了确保丝滑体验，代码进行了深度优化：

  • 对象池 (Object Pooling)：消除运行时的垃圾回收 (GC) 卡顿。

  • AI 节流 (Throttling)：智能控制识别频率，大幅降低 CPU/GPU 占用。

  • 几何体实例化：即使加载上百张照片，渲染压力依然极低。

📖 操作指南 (User Guide)

界面交互

  1. 上传照片：点击屏幕下方的 选择照片文件夹 / SELECT FOLDER 按钮，选择包含照片的文件夹即可。

  2. 隐藏 UI：双击屏幕（或按键盘 H 键）可隐藏/显示界面按钮，适合全屏录制。

手势指令表

请确保手部出现在画面右下角的预览框中，保持约 0.5 米距离。

手势

图示

功能描述

张开手掌

🖐

进入散开模式 (Scatter)

粒子与照片失去引力，在空中自由漂浮。此时移动手掌可控制视角旋转。

握紧拳头

✊

切换剧情模式

1. 首次握拳：粒子聚合成浪漫剪影。

2. 再次握拳：重组回圣诞树形态。

捏合手指

👌

抓取回忆 (Focus)

在“散开模式”下，捏合拇指与食指，随即抓取一张照片飞到眼前放大展示。

🛠️ 本地开发与部署

如果您想在本地运行或修改源码，请按照以下步骤操作：

1. 克隆仓库

git clone https://github.com/Roisten/Romantic-Christmas-Tree
cd Romantic-Christmas-Tree

2. 启动本地服务器

由于项目使用了 ES6 模块和摄像头权限，直接双击 HTML 文件无法运行。你需要一个本地 Web 服务器。

方式 A (VS Code 推荐):
安装 Live Server 插件，右键 index.html 选择 "Open with Live Server"。

方式 B (Python):

python -m http.server 8000
# 然后并在浏览器访问 http://localhost:8000

3. 注意事项

  • HTTPS: 如果部署到公网服务器，必须使用 HTTPS 协议，否则浏览器会因安全策略阻止摄像头调用（MediaPipe 将无法工作）。

  • 移动端适配: 代码已包含针对手机竖屏的视角适配逻辑。

🤝 贡献与致谢

本项目使用了以下开源库：

如果你喜欢这个项目，欢迎在 GitHub 上点一颗 ⭐ Star！

Merry Christmas & Happy New Year! 🎄✨