點(diǎn)擊上方卡片關(guān)注【秋葉 AI 知識星球】

回復(fù)：98

免費(fèi)領(lǐng)取 Gemini 同款圣誕樹

作者：苼苼

編輯：苼苼

文末免費(fèi)領(lǐng)取 Gemini 同款圣誕樹~

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

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

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

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

結(jié)果下一秒我們路過工位……

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

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

當(dāng)然是做給你們的呀~

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

文末免費(fèi)領(lǐng)取秋葉獨(dú)家原創(chuàng) AI 圣誕樹 html 版！

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

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

當(dāng)然了，如果你想解鎖 AI 的更多創(chuàng)意玩法，用辦公提效、甚至副業(yè)變現(xiàn)，那就來《秋葉 AI 智能辦公 3 天實(shí)戰(zhàn)營》學(xué)一學(xué)，

我們將會帶你深入學(xué)習(xí)豆包、即夢、飛書、扣子等AI工具的實(shí)用辦公技能和創(chuàng)意玩法！

秋葉 AI 智能辦公 3 天實(shí)戰(zhàn)營

辦公提效｜自媒體創(chuàng)意｜副業(yè)變現(xiàn)

現(xiàn)在限時(shí)免費(fèi)學(xué)

立刻掃碼報(bào)名

還能免費(fèi)領(lǐng)取

秋葉獨(dú)家 AI 學(xué)習(xí)資料包

6 套飛書多維表格模板

60+ 秋葉自研智能體

先把圣誕樹搭出來

我們用到的工具是 Gemini Cavas。

然后，直接對它發(fā)出這樣一段指令

你是一位精通 Three.js、WebGL和計(jì)算機(jī)視覺的創(chuàng)意前端開發(fā)專家。任務(wù)目標(biāo)：編寫一個(gè)包含 HTML、CSS和JavaScript的單文件應(yīng)用。該應(yīng)用需要結(jié)合Three.js來創(chuàng)建一個(gè)基于鼠標(biāo)控制的3D粒子圣誕樹。

具體要求：圣誕樹的形態(tài)精細(xì)，為3D立體效果整體氛圍：主色系為啞光綠+金色+圣誕紅色；有電影感的輝光與光量效果。交互邏輯：圣誕樹有合攏態(tài)、散開態(tài)、照片放大態(tài)。通過鼠標(biāo)來控制交互。合攏態(tài)和散開態(tài)的差距不大。散開態(tài)時(shí)，照片漂浮在圣誕樹散開的粒子中，像懸浮在宇宙中的顆粒。鼠標(biāo)動作：左移/右移=切換形態(tài)；往上推=散開；鼠標(biāo)畫圈=旋轉(zhuǎn)畫面；單擊鼠標(biāo)=放大照片交互要求:狀態(tài)之間平滑切換，帶有過渡動畫?？赡苡玫降募夹g(shù)棧:Three.js、WebGL

這一步的目標(biāo)只有一個(gè)：先有一棵樹，別管好不好看。

所以你會發(fā)現(xiàn)，Gemini 最初給到的結(jié)果，大概是這樣的「丑丑的錐狀物。」

別急，這很正常。

AI 創(chuàng)作的第一步，基本都是：先搭骨架，再磨細(xì)節(jié)。

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

比如這樣

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

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

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

如果你還覺得哪里不滿意，就繼續(xù)發(fā)指令，改到滿意為止。

到這里，一個(gè)靜態(tài)版圣誕樹就完成了。

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

讓圣誕樹動起來

這一步就是讓圣誕樹從靜態(tài)展示，變成一個(gè)可以互動的作品。

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

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

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

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

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

在我們的實(shí)測中，你可能還會遇到一些小卡點(diǎn)，比如：

? 圖片分布太集中，不好點(diǎn)；

? 鼠標(biāo)一滑，樹就突然散開，不太好控制。

沒關(guān)系，處理方式還是繼續(xù)跟 Gemini 說清楚你的不爽點(diǎn)。

你會發(fā)現(xiàn)，它真的會自己想辦法幫你改。

摳細(xì)節(jié)，讓畫面更有氛圍感

到這一步，其實(shí)已經(jīng)有 80% 完成度了。

剩下的，就是讓它更好看、更有氛圍一點(diǎn)。

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

指令：「設(shè)計(jì)要靈動一些，參考哈利波特那種魔法感。」 「左上角的UI要換成中文，字體顏色用白色?！?/blockquote>

再比如，整體氛圍還不夠？那就繼續(xù)加細(xì)節(jié)

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

加點(diǎn)音樂，儀式感拉滿

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

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

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

金屬簧片被凸起音筒撥動時(shí)的振動，發(fā)出的聲音干凈純粹，帶有金屬的明亮感，常被形容為「清涼悅耳的叮咚聲?！?/blockquote>

最后的效果就是打開頁面，音樂自動響起，右上角按鈕隨時(shí)開關(guān)。

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

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

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

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

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

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

如果你希望把這種能力從好玩的創(chuàng)作，進(jìn)一步用到真實(shí)的工作場景中，用 AI 實(shí)現(xiàn)效率提升，甚至發(fā)展成新的 AI 技能和變現(xiàn)能力。

那就來《秋葉 AI 智能辦公 3 天實(shí)戰(zhàn)營》學(xué)一學(xué)。

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

AI PPT：一鍵生成PPT，匯報(bào)不再熬夜；

AI 數(shù)據(jù)分析：自動分析、總結(jié)，把復(fù)雜數(shù)據(jù)可視化；

AI 設(shè)計(jì)：不會設(shè)計(jì)，也能做出專業(yè)物料；

AI 寫作：方案、總結(jié)、內(nèi)容輸出效率全面提升；

更重要的是，你學(xué)到的不是某一個(gè)工具，而是一整套可復(fù)用的 AI 工作方法，幫你逐步打通 AI 技能進(jìn)階與副業(yè)變現(xiàn)的可能路徑。

現(xiàn)在報(bào)名，還可以免費(fèi)領(lǐng)取：

秋葉獨(dú)家 AI 學(xué)習(xí)資料包

6 套飛書多維表格模板

60+ 秋葉自研智能體

秋葉 AI 智能辦公 3 天實(shí)戰(zhàn)營

?直播授課：專業(yè)導(dǎo)師在線教學(xué)

?實(shí)戰(zhàn)練習(xí)：邊學(xué)邊練，融會貫通

?助教答疑：1V1 群內(nèi)點(diǎn)評，隨時(shí)答疑

掃碼免費(fèi)學(xué)

關(guān)注【秋葉 AI 知識星球】

回復(fù)關(guān)鍵詞【98】

免費(fèi)領(lǐng)取

Gemini 同款圣誕樹