装饰圣诞树几乎成了每个家庭迎接节日时不可或缺的一环，彩灯一圈圈绕上树枝，挂件、照片慢慢填满空隙，灯亮起的那一刻，节日的氛围也随之到位。
随着圣诞节临近，小贝也为大家置办了一棵「赛博圣诞树」。3D Christmas Tree 是由 moleculemmeng020425 开源的一个基于 React, Three.js（R3F）和 AI 手势识别 Web 应用。
基于 AI 手势识别，用户可以轻松用手势控制圣诞树的形态变化（聚合与散开）以及视角的自由旋转。 更有意思的是，这不仅是一棵普通的圣诞树，通过上传个性化、有意义的图片，用户还能将其装扮为一个充满回忆的交互式艺术画廊。
数千个精美的粒子效果、绚烂的灯光秀以及悬浮的珍贵拍立得照片交相辉映，共同构成了一棵奢华而富有生命力的虚拟圣诞树。目前，「基于手势识别的 3D 圣诞树」已上线 OpenBayes 的公共教程板块，本文以 OpenBayes 的标志性 logo 为例，欢迎感兴趣的读者通过一键部署教程定制专属圣诞树。
教程示例如下图所示：
教程链接：
Demo 运行
01 Demo 运行阶段
1.登录 OpenBayes.com，在「公共教程」页面，选择「基于手势识别的 3D 圣诞树」教程。
2.页面跳转后，点击右上角「克隆」，将该教程克隆至自己的容器中。
3.选择「CPU」以及「PyTorch」镜像，按照需求选择「按量付费」或「包日/周/月」，点击「继续执行」。新用户使用下方邀请链接注册，可获得 4 小时 RTX 5090 + 5 小时 CPU 的免费时长！
小贝总专属邀请链接（直接复制到浏览器打开）：
4.等待分配资源，首次克隆需等待 3 分钟左右的时间。当状态变为「运行中」后，点击「API 地址」旁边的跳转箭头，即可跳转至 Demo 页面。请注意，用户需在实名认证后才能使用 API 地址访问功能。
02 效果演示
1.准备照片
找到项目目录下的 /openbayes/home/christmas-tree/public/photos/ 文件夹。顶端大图/封面图：命名为 top.jpg（将显示在树顶的立体五角星上）。树身照片：命名为 1.jpg，2.jpg，3.jpg … 依次类推。建议：使用正方形或 4:3 比例的图片，文件大小不宜过大（建议单张 500kb 以内以保证流畅度）
2.替换照片
直接将你自己的照片复制到 /openbayes/home/christmas-tree/public/photos 文件夹中，覆盖原有的图片即可。请保持文件名格式不变（1.jpg，2.jpg 等）。
3.修改照片数量（增加或减少）
如果放入了更多照片（例如从默认的 31 张增加到 100 张），需要打开文件：dependencies.sh，将看到：export VITE_TOTAL_PHOTOS=31，修改数字「31」为实际图片数量，然后关闭容器再次启动即可。
4.手势控制说明
本项目内置了 AI 手势识别系统，请站在摄像头前进行操作（屏幕右下角有 DEBUG 按钮可查看摄像头画面）：
🖐 张开手 → 圣诞树炸成漫天粒子与照片
✊ 握紧拳 → 照片瞬间合回完美圣诞树
👋 左右挥手 → 实时旋转视角：手向左移，图片向左转；手向右移，图片向右转 。
以下为效果展示：
教程链接：
