Command Palette
Search for a command to run...
基于手势识别的 3D 圣诞树
An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
Failed to load notebook details一、教程简介
3D Christmas Tree 是由 moleculemmeng020425 于 2025 年 11 月发布的创新项目。带来沉浸式的电影级视觉体验。该项目基于 React 和 Three.js（R3F）构建，通过先进的 AI 手势识别技术，用户可以轻松用手势控制圣诞树的形态变化（聚合与散开）以及视角的自由旋转。它不仅是一棵普通的圣诞树，更是一个充满回忆的交互式数字艺术画廊。数千个精美的粒子效果、绚烂的灯光秀以及悬浮的珍贵拍立得照片交相辉映，共同构成了一棵奢华而富有生命力的虚拟圣诞树，为用户带来前所未有的感官享受。
本教程采用资源为 CPU 。
二、项目示例
三、运行步骤
1. 启动容器后点击 API 地址即可进入 Web 界面
2. 使用步骤
- 准备照片
找到项目目录下的 /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（聚合）所有元素瞬间聚合成一棵完美的圣诞树 。
👋 手掌左右移动 旋转视角 手向左移，树向左转；手向右移，树向右转 。
Build AI with AI
From idea to launch — accelerate your AI development with free AI co-coding, out-of-the-box environment and best price of GPUs.