临近圣诞节,大家都在思考如何让今年更有仪式感:搞一棵圣诞树,还是干脆上一张滤镜海报?但如果你想让节日过得更「有科技味儿」,今年有个更酷的选择------一棵能听懂你手势、会展示你的照片、还能随你指挥聚散旋转的「3D Christmas Tree」。
这个由 moleculemmeng020425 打造的项目,用 React 与 Three.js(R3F)构建出一棵由粒子、灯光和影像组成的立体圣诞树;加上 AI 手势识别,只需张开手,就能让整棵树炸裂成漫天粒子,握拳又能瞬间重组,左右挥手更能让视角跟着你变化,交互感直接拉满。
更有趣的是,你可以把自己的照片放进 photos 文件夹里:top.jpg 会出现在树顶,1.jpg、2.jpg ...... 会形成树身。如果想添加更多照片,改一下数量配置就行,一棵完全属于你的「回忆圣诞树」瞬间生成。
更惊喜的是,整套系统只用 CPU 就能跑。不需要高端显卡、不需要复杂配置,让数字艺术真正做到人人可玩、随手可用。今年圣诞,不妨试试用科技点亮仪式感,让「3D Christmas Tree」陪你一起过节。
教程链接: https://go.openbayes.com/eXi4m
使用云平台: OpenBayes
http://openbayes.com/console/signup?r=sony_0m6v
首先点击「公共教程」,找到「基于手势识别的 3D 圣诞树」,单击打开。

页面跳转后,点击右上角「克隆」,将该教程克隆至自己的容器中。

在当前页面中看到的算力资源均可以在平台一键选择使用。平台会默认选配好原教程所使用的算力资源、镜像版本,不需要再进行手动选择。点击「继续执行」,等待分配资源。


数据和代码都已经同步完成了。容器状态显示为「运行中」后,点击「API 地址」,即可进入模型界面。

使用步骤如下:
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(聚合)所有元素瞬间聚合成一棵完美的圣诞树 。
- 👋 手掌左右移动 旋转视角 手向左移,树向左转;手向右移,树向右转 。
以下是效果展示:
