全網爆火的Gemini圣誕樹，我們幫你做出來了(附模版) !

點擊上方卡片關注【秋葉 AI 知識星球】

回復：98

免費領取 Gemini 同款圣誕樹

作者：苼苼

編輯：苼苼

文末免費領取 Gemini 同款圣誕樹~

大家好，這里是秋葉編輯部~

最近爆火的 Gemini 生成圣誕樹的交互視頻，你刷到了沒？

對！就是這個能散開、能貼照片、還能把對象、家人直接「掛」樹上的 AI 圣誕樹。

我們邊刷視頻邊感嘆：這要是能自己做一個，圣誕節的時候送對象、送家人，送自己，多有儀式感吶。

結果下一秒我們路過工位……

發現秋葉研發老師@欣眉，正在低頭猛敲鍵盤，屏幕上赫然就是：同款圣誕樹！

啊這？這是……做給誰的呢？

當然是做給你們的呀~

為了讓大家都能無門檻玩起來，欣眉老師直接爆肝迭代了30 個版本， 最終把這個玩法做成了一個 html圣誕樹網頁版，不用 Gemini，直接打開網頁，就能擁有同款圣誕樹。

文末免費領取秋葉獨家原創 AI 圣誕樹 html 版！

接下來，我們就把欣眉老師為大家整理的圣誕樹完整教程雙手奉上。

跟著一步一步來，你也能親手做出一棵屬于自己的電子圣誕樹。

當然了，如果你想解鎖 AI 的更多創意玩法，用辦公提效、甚至副業變現，那就來《秋葉 AI 智能辦公 3 天實戰營》學一學，

我們將會帶你深入學習豆包、即夢、飛書、扣子等AI工具的實用辦公技能和創意玩法！

秋葉 AI 智能辦公 3 天實戰營

辦公提效｜自媒體創意｜副業變現

現在限時免費學

立刻掃碼報名

還能免費領取

秋葉獨家 AI 學習資料包

6 套飛書多維表格模板

60+ 秋葉自研智能體

先把圣誕樹搭出來

我們用到的工具是 Gemini Cavas。

然后，直接對它發出這樣一段指令

你是一位精通 Three.js、WebGL和計算機視覺的創意前端開發專家。任務目標：編寫一個包含 HTML、CSS和JavaScript的單文件應用。該應用需要結合Three.js來創建一個基于鼠標控制的3D粒子圣誕樹。

具體要求：圣誕樹的形態精細，為3D立體效果整體氛圍：主色系為啞光綠+金色+圣誕紅色；有電影感的輝光與光量效果。交互邏輯：圣誕樹有合攏態、散開態、照片放大態。通過鼠標來控制交互。合攏態和散開態的差距不大。散開態時，照片漂浮在圣誕樹散開的粒子中，像懸浮在宇宙中的顆粒。鼠標動作：左移/右移=切換形態；往上推=散開；鼠標畫圈=旋轉畫面；單擊鼠標=放大照片交互要求:狀態之間平滑切換，帶有過渡動畫。可能用到的技術棧:Three.js、WebGL

這一步的目標只有一個：先有一棵樹，別管好不好看。

所以你會發現，Gemini 最初給到的結果，大概是這樣的「丑丑的錐狀物。」

別急，這很正常。

AI 創作的第一步，基本都是：先搭骨架，再磨細節。

接下來，我們要做的就是告訴它：你想要一棵什么樣的圣誕樹。

比如這樣

視覺重構：一棵滿載禮物的樹不是一個空心的圓錐，而是構建一棵有層次的樹。 樹葉層：深綠色、有蓬松感的粒子，粒子的顆粒大小錯落，構建樹的主體體積。 氛圍燈帶：白色彩帶呈螺旋狀從樹頂垂下，帶有流動光效。 主題掛飾：是隨機分布的3D粒子，圣誕老人、麋鹿、襪子、禮物盒。

這一次，效果明顯就不一樣了。

樹葉有層次了， 燈帶開始繞著樹旋轉，掛飾也不再是隨便糊上去的感覺。

如果你還覺得哪里不滿意，就繼續發指令，改到滿意為止。

到這里，一個靜態版圣誕樹就完成了。

接下來，我們要讓它動起來。

讓圣誕樹動起來

這一步就是讓圣誕樹從靜態展示，變成一個可以互動的作品。

它需要能合攏、能散開、能在空間中漂浮，并且支持添加和查看照片。

我們把這些指令一次性丟給 Gemini

接下來我們來完善一下交互功能和其它的頁面。 圣誕樹一共有3個形態：圣誕樹狀態： 1.合攏態（初始狀態）：所有元素收攏、聚合為一個圣誕樹圓錐體，不需要顯示照片僅顯示粒子。 2.散開態：所有元素在空間中無序漂浮、散落，顯示照片 3.照片放大態：在背景保持散開態的同時，放大單張照片，此時照片呢不需要增加額外的輝光效果，確保照片清晰可見即可。 我希望把散開態的光球中多一些金色的球，少一些白色的。另外就是切換至散開態之后，希望可以在其中的幾個光球里顯示我的照片，單擊鼠標后，照片會放大，這個放大過程要絲滑流暢。為了實現上述功能，我需要你添加一個上傳圖片的功能。

基本上，這一步做完 一棵能合攏、能散開、還能放照片的圣誕樹，就已經成型了。

是不是比想象中簡單？ 全程都是在對話。

在我們的實測中，你可能還會遇到一些小卡點，比如：

? 圖片分布太集中，不好點；

? 鼠標一滑，樹就突然散開，不太好控制。

沒關系，處理方式還是繼續跟 Gemini 說清楚你的不爽點。

你會發現，它真的會自己想辦法幫你改。

摳細節，讓畫面更有氛圍感

到這一步，其實已經有 80% 完成度了。

剩下的，就是讓它更好看、更有氛圍一點。

比如你覺得左上角的 UI 太普通？那就直接說

指令：「設計要靈動一些，參考哈利波特那種魔法感。」 「左上角的UI要換成中文，字體顏色用白色。」

再比如，整體氛圍還不夠？那就繼續加細節

1、照片在分散狀的時候排布可以再開一點，然后在分散狀態的時候散布的星云圍繞中心軸緩慢公轉。 2、呼吸動畫：使用 Tween.js 在狀態切換時動態改變粒子的 size 屬性，讓樹在散開時有一種“能量爆發”的膨脹感 3、雙重旋轉：在散開狀態下，我們保留了鼠標控制視角的邏輯，同時給所有粒子增加了一個極慢的自動公轉。這造成了一種即使我不動，世界也在流轉的夢幻效果。 4、全景落雪 ：不再是漆黑的背景，而是漫天飄灑的細膩雪花，營造冬日氛圍。5、魔法光標拖尾 ：鼠標移動時會留下一串金色的魔法粒子拖尾，增強交互感，就像揮舞魔杖一樣。 6、呼吸閃爍：樹上的彩燈會隨著時間隨機閃爍、忽明忽暗，讓樹看起來是活的。

加點音樂，儀式感拉滿

最后，我們給圣誕樹加一段背景音樂，指令也很簡單

添加一個圣誕背景音樂，默認播放。播放音樂的按鈕要放在右上角，不用加文字說明，展示一個音樂圖標就可以。

音樂音色這里，我們還特意補充了八音盒的聲音描述，讓 AI 更好理解你想要的感覺。

金屬簧片被凸起音筒撥動時的振動，發出的聲音干凈純粹，帶有金屬的明亮感，常被形容為「清涼悅耳的叮咚聲。」

最后的效果就是打開頁面，音樂自動響起，右上角按鈕隨時開關。

如果遇到「AI 說加了，但實際沒響」的情況，也別慌。繼續追問，它會給你解決方案。

為了更好觸發音樂播放，我們還加了一個啟動頁面，記得讓啟動頁和圣誕樹頁面的文字風格保持一致。

到這里，一棵完整、可互動、能放照片、帶音樂的圣誕樹，就真的做好了。

下一次，不管是圣誕樹、生日賀卡，還是任何你想做的互動小作品，你都可以用同樣的思路，再來一遍。

你有沒有發現 ？很多過去只有程序員才能完成的小程序、交互作品，現在普通人也可以通過指揮 AI 親手做出來。

這正是 AI 帶給普通人的最大變化，它正在不斷打破能力邊界。

如果你希望把這種能力從好玩的創作，進一步用到真實的工作場景中，用 AI 實現效率提升，甚至發展成新的 AI 技能和變現能力。

那就來《秋葉 AI 智能辦公 3 天實戰營》學一學。

秋葉金牌導師會帶你，用豆包、飛書、扣子、即夢， 把 AI 真正用進高頻辦公場景：

AI PPT：一鍵生成PPT，匯報不再熬夜；

AI 數據分析：自動分析、總結，把復雜數據可視化；

AI 設計：不會設計，也能做出專業物料；

AI 寫作：方案、總結、內容輸出效率全面提升；

更重要的是，你學到的不是某一個工具，而是一整套可復用的 AI 工作方法，幫你逐步打通 AI 技能進階與副業變現的可能路徑。

現在報名，還可以免費領取：

秋葉獨家 AI 學習資料包

6 套飛書多維表格模板

60+ 秋葉自研智能體

秋葉 AI 智能辦公 3 天實戰營

?直播授課：專業導師在線教學

?實戰練習：邊學邊練，融會貫通

?助教答疑：1V1 群內點評，隨時答疑

掃碼免費學

關注【秋葉 AI 知識星球】

回復關鍵詞【98】

免費領取

Gemini 同款圣誕樹