一、教程简介

3D Christmas Tree 是由 moleculemmeng020425 于 2025 年 11 月发布的创新项目。带来沉浸式的电影级视觉体验。该项目基于 React 和 Three.js（R3F）构建，通过先进的 AI 手势识别技术，用户可以轻松用手势控制圣诞树的形态变化（聚合与散开）以及视角的自由旋转。它不仅是一棵普通的圣诞树，更是一个充满回忆的交互式数字艺术画廊。数千个精美的粒子效果、绚烂的灯光秀以及悬浮的珍贵拍立得照片交相辉映，共同构成了一棵奢华而富有生命力的虚拟圣诞树，为用户带来前所未有的感官享受。

本教程采用资源为 CPU 。

二、项目示例

三、运行步骤

1. 启动容器后点击 API 地址即可进入 Web 界面

2. 使用步骤

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 按钮可查看摄像头画面）：

🖐 张开手掌（Open Palm）Disperse（散开）圣诞树炸裂成漫天飞舞的粒子和照片 。

✊ 握紧拳头（Closed Fist）Assemble（聚合）所有元素瞬间聚合成一棵完美的圣诞树 。

👋 手掌左右移动 旋转视角 手向左移，树向左转；手向右移，树向右转 。

四、交流探讨

🖌️ 如果大家看到优质项目，欢迎后台留言推荐！另外，我们还建立了教程交流群，欢迎小伙伴们扫码备注【SD 教程】入群探讨各类技术问题、分享应用效果↓