装饰圣诞树几乎成了每个家庭迎接节日时不可或缺的一环，彩灯一圈圈绕上树枝，挂件、照片慢慢填满空隙，灯亮起的那一刻，节日的氛围也随之到位。

随着圣诞节临近，HyperAI 超神经也为大家置办了一颗「赛博圣诞树」。 3D Christmas Tree 是 moleculemmeng020425 开源的一个基于 React, Three.js（R3F）和 AI 手势识别 Web 应用。

基于 AI 手势识别，用户可以轻松用手势控制圣诞树的形态变化（聚合与散开）以及视角的自由旋转。更有意思的是，这不仅是一棵普通的圣诞树，通过上传个性化、有意义的图片，用户还能将其装扮为一个充满回忆的交互式艺术画廊。

数千个精美的粒子效果、绚烂的灯光秀以及悬浮的珍贵拍立得照片交相辉映，共同构成了一棵奢华而富有生命力的虚拟圣诞树。目前，「基于手势识别的 3D 圣诞树」已上线 HyperAI 超神经官网（hyper.ai）的教程板块，本文以 HyperAI 超神经的标志性 logo 为例，欢迎感兴趣的读者通过一键部署教程定制专属圣诞树。

教程链接：

https://go.hyper.ai/C06qS

值得一提的是，该教程使用 CPU 即可在线体验，而 HyperAI 的算力平台为用户提供了永久免费的 CPU 使用时长。点击了解详情 ⬇️

https://hyper.ai/docs/membership

教程示例如下图所示，通过手势变化（图片右上）调整圣诞树形态：

Demo 运行

1. 进入 hyper.ai 首页后，选择「基于手势识别的 3D 圣诞树」，或进入「教程」页面选择。进入点击「在线运行此教程」。

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

注：页面右上角支持切换语言，目前提供中文及英文两种语言，本教程文章以英文为例进行步骤展示。

3. 选择「Free CPU」以及「PyTorch」镜像，选择「Pay As You Go（按量付费）」，点击「Continue job execution（继续执行）」。

HyperAI 为新用户准备了注册福利，仅需 $1，即可获得 5 小时 RTX 5090 算力（原价 $7），资源永久有效。

4. 等待分配资源，首次克隆需等待 3 分钟左右的时间。当状态变为「Running（运行中）」后，点击「API address」旁边的跳转箭头，即可跳转至 Demo 页面。

效果演示

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（聚合）所有元素瞬间聚合成一棵完美的圣诞树 。

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

以下为效果展示：

以上就是 HyperAI 超神经本期推荐的教程，欢迎大家前来体验！

教程链接：

https://go.hyper.ai/C06qS