裝飾聖誕樹幾乎成了每個家庭迎接節日時不可或缺的一環，彩燈一圈圈繞上樹枝，掛件、照片慢慢填滿空隙，燈亮起的那一刻，節日的氛圍也隨之到位。

隨着聖誕節臨近，小貝也為大家置辦了一棵「賽博聖誕樹」。3D Christmas Tree 是由 moleculemmeng020425 開源的一個基於 React, Three.js（R3F）和 AI 手勢識別 Web 應用。

基於 AI 手勢識別，用户可以輕鬆用手勢控制聖誕樹的形態變化（聚合與散開）以及視角的自由旋轉。 更有意思的是，這不僅是一棵普通的聖誕樹，通過上傳個性化、有意義的圖片，用户還能將其裝扮為一個充滿回憶的交互式藝術畫廊。

數千個精美的粒子效果、絢爛的燈光秀以及懸浮的珍貴拍立得照片交相輝映，共同構成了一棵奢華而富有生命力的虛擬聖誕樹。目前，「基於手勢識別的 3D 聖誕樹」已上線 OpenBayes 的公共教程板塊，本文以 OpenBayes 的標誌性 logo 為例，歡迎感興趣的讀者通過一鍵部署教程定製專屬聖誕樹。

教程示例如下圖所示：

教程鏈接：

https://go.openbayes.com/KzMkK

Demo 運行

01 Demo 運行階段

1.登錄 OpenBayes.com，在「公共教程」頁面，選擇「基於手勢識別的 3D 聖誕樹」教程。

2.頁面跳轉後，點擊右上角「克隆」，將該教程克隆至自己的容器中。

3.選擇「CPU」以及「PyTorch」鏡像，按照需求選擇「按量付費」或「包日/周/月」，點擊「繼續執行」。新用户使用下方邀請鏈接註冊，可獲得 4 小時 RTX 5090 + 5 小時 CPU 的免費時長！

小貝總專屬邀請鏈接（直接複製到瀏覽器打開）：

https://go.openbayes.com/9S6Dr

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 按鈕可查看攝像頭畫面）：

🖐 張開手 → 聖誕樹炸成漫天粒子與照片

✊ 握緊拳 → 照片瞬間合回完美聖誕樹

👋 左右揮手 → 實時旋轉視角：手向左移，圖片向左轉；手向右移，圖片向右轉 。

以下為效果展示：

教程鏈接：

https://go.openbayes.com/KzMkK