點(diǎn)擊上方卡片關(guān)注【秋葉 AI 知識(shí)星球】
回復(fù):98
免費(fèi)領(lǐng)取 Gemini 同款圣誕樹
![]()
作者:苼苼
編輯:苼苼
文末免費(fèi)領(lǐng)取 Gemini 同款圣誕樹~
大家好,這里是秋葉編輯部~
最近爆火的 Gemini 生成圣誕樹的交互視頻,你刷到了沒(méi)?
![]()
對(duì)!就是這個(gè)能散開、能貼照片、還能把對(duì)象、家人直接「掛」樹上的 AI 圣誕樹。
我們邊刷視頻邊感嘆:這要是能自己做一個(gè),圣誕節(jié)的時(shí)候送對(duì)象、送家人,送自己,多有儀式感吶。
結(jié)果下一秒我們路過(guò)工位……
發(fā)現(xiàn)秋葉研發(fā)老師@欣眉,正在低頭猛敲鍵盤,屏幕上赫然就是:同款圣誕樹!
![]()
啊這?這是……做給誰(shuí)的呢?
當(dāng)然是做給你們的呀~
為了讓大家都能無(wú)門檻玩起來(lái),欣眉老師直接爆肝迭代了30 個(gè)版本, 最終把這個(gè)玩法做成了一個(gè) html圣誕樹網(wǎng)頁(yè)版,不用 Gemini,直接打開網(wǎng)頁(yè),就能擁有同款圣誕樹。
![]()
文末免費(fèi)領(lǐng)取秋葉獨(dú)家原創(chuàng) AI 圣誕樹 html 版!
接下來(lái),我們就把欣眉老師為大家整理的圣誕樹完整教程雙手奉上。
跟著一步一步來(lái),你也能親手做出一棵屬于自己的電子圣誕樹。
當(dāng)然了,如果你想解鎖 AI 的更多創(chuàng)意玩法,用辦公提效、甚至副業(yè)變現(xiàn),那就來(lái)《秋葉 AI 智能辦公 3 天實(shí)戰(zhàn)營(yíng)》學(xué)一學(xué),
我們將會(huì)帶你深入學(xué)習(xí)豆包、即夢(mèng)、飛書、扣子等AI工具的實(shí)用辦公技能和創(chuàng)意玩法!
秋葉 AI 智能辦公 3 天實(shí)戰(zhàn)營(yíng)
辦公提效|自媒體創(chuàng)意|副業(yè)變現(xiàn)
現(xiàn)在限時(shí)免費(fèi)學(xué)
立刻掃碼報(bào)名
![]()
還能免費(fèi)領(lǐng)取
秋葉獨(dú)家 AI 學(xué)習(xí)資料包
6 套飛書多維表格模板
60+ 秋葉自研智能體
![]()
先把圣誕樹搭出來(lái)
我們用到的工具是 Gemini Cavas。
![]()
然后,直接對(duì)它發(fā)出這樣一段指令
你是一位精通 Three.js、WebGL和計(jì)算機(jī)視覺(jué)的創(chuàng)意前端開發(fā)專家。任務(wù)目標(biāo):編寫一個(gè)包含 HTML、CSS和JavaScript的單文件應(yīng)用。該應(yīng)用需要結(jié)合Three.js來(lái)創(chuàng)建一個(gè)基于鼠標(biāo)控制的3D粒子圣誕樹。
具體要求:圣誕樹的形態(tài)精細(xì),為3D立體效果整體氛圍:主色系為啞光綠+金色+圣誕紅色;有電影感的輝光與光量效果。交互邏輯:圣誕樹有合攏態(tài)、散開態(tài)、照片放大態(tài)。通過(guò)鼠標(biāo)來(lái)控制交互。合攏態(tài)和散開態(tài)的差距不大。散開態(tài)時(shí),照片漂浮在圣誕樹散開的粒子中,像懸浮在宇宙中的顆粒。鼠標(biāo)動(dòng)作:左移/右移=切換形態(tài);往上推=散開;鼠標(biāo)畫圈=旋轉(zhuǎn)畫面;單擊鼠標(biāo)=放大照片交互要求:狀態(tài)之間平滑切換,帶有過(guò)渡動(dòng)畫。可能用到的技術(shù)棧:Three.js、WebGL
這一步的目標(biāo)只有一個(gè):先有一棵樹,別管好不好看。
所以你會(huì)發(fā)現(xiàn),Gemini 最初給到的結(jié)果,大概是這樣的「丑丑的錐狀物。」
![]()
別急,這很正常。
AI 創(chuàng)作的第一步,基本都是:先搭骨架,再磨細(xì)節(jié)。
接下來(lái),我們要做的就是告訴它:你想要一棵什么樣的圣誕樹。
比如這樣
視覺(jué)重構(gòu):一棵滿載禮物的樹不是一個(gè)空心的圓錐,而是構(gòu)建一棵有層次的樹。 樹葉層:深綠色、有蓬松感的粒子,粒子的顆粒大小錯(cuò)落,構(gòu)建樹的主體體積。 氛圍燈帶:白色彩帶呈螺旋狀從樹頂垂下,帶有流動(dòng)光效。 主題掛飾:是隨機(jī)分布的3D粒子,圣誕老人、麋鹿、襪子、禮物盒。
這一次,效果明顯就不一樣了。
樹葉有層次了, 燈帶開始繞著樹旋轉(zhuǎn),掛飾也不再是隨便糊上去的感覺(jué)。
![]()
如果你還覺(jué)得哪里不滿意,就繼續(xù)發(fā)指令,改到滿意為止。
![]()
到這里,一個(gè)靜態(tài)版圣誕樹就完成了。
接下來(lái),我們要讓它動(dòng)起來(lái)。
![]()
讓圣誕樹動(dòng)起來(lái)
這一步就是讓圣誕樹從靜態(tài)展示,變成一個(gè)可以互動(dòng)的作品。
它需要能合攏、能散開、能在空間中漂浮,并且支持添加和查看照片。
我們把這些指令一次性丟給 Gemini
接下來(lái)我們來(lái)完善一下交互功能和其它的頁(yè)面。 圣誕樹一共有3個(gè)形態(tài):圣誕樹狀態(tài): 1.合攏態(tài)(初始狀態(tài)):所有元素收攏、聚合為一個(gè)圣誕樹圓錐體,不需要顯示照片僅顯示粒子。 2.散開態(tài):所有元素在空間中無(wú)序漂浮、散落,顯示照片 3.照片放大態(tài):在背景保持散開態(tài)的同時(shí),放大單張照片,此時(shí)照片呢不需要增加額外的輝光效果,確保照片清晰可見(jiàn)即可。 我希望把散開態(tài)的光球中多一些金色的球,少一些白色的。另外就是切換至散開態(tài)之后,希望可以在其中的幾個(gè)光球里顯示我的照片,單擊鼠標(biāo)后,照片會(huì)放大,這個(gè)放大過(guò)程要絲滑流暢。為了實(shí)現(xiàn)上述功能,我需要你添加一個(gè)上傳圖片的功能。
基本上,這一步做完 一棵能合攏、能散開、還能放照片的圣誕樹,就已經(jīng)成型了。
![]()
是不是比想象中簡(jiǎn)單? 全程都是在對(duì)話。
在我們的實(shí)測(cè)中,你可能還會(huì)遇到一些小卡點(diǎn),比如:
? 圖片分布太集中,不好點(diǎn);
? 鼠標(biāo)一滑,樹就突然散開,不太好控制。
沒(méi)關(guān)系,處理方式還是繼續(xù)跟 Gemini 說(shuō)清楚你的不爽點(diǎn)。
你會(huì)發(fā)現(xiàn),它真的會(huì)自己想辦法幫你改。
![]()
![]()
摳細(xì)節(jié),讓畫面更有氛圍感
到這一步,其實(shí)已經(jīng)有 80% 完成度了。
剩下的,就是讓它更好看、更有氛圍一點(diǎn)。
比如你覺(jué)得左上角的 UI 太普通?那就直接說(shuō)
指令:「設(shè)計(jì)要靈動(dòng)一些,參考哈利波特那種魔法感。」 「左上角的UI要換成中文,字體顏色用白色。」
![]()
再比如,整體氛圍還不夠?那就繼續(xù)加細(xì)節(jié)
1、照片在分散狀的時(shí)候排布可以再開一點(diǎn),然后在分散狀態(tài)的時(shí)候散布的星云圍繞中心軸緩慢公轉(zhuǎn)。 2、呼吸動(dòng)畫:使用 Tween.js 在狀態(tài)切換時(shí)動(dòng)態(tài)改變粒子的 size 屬性,讓樹在散開時(shí)有一種“能量爆發(fā)”的膨脹感 3、雙重旋轉(zhuǎn):在散開狀態(tài)下,我們保留了鼠標(biāo)控制視角的邏輯,同時(shí)給所有粒子增加了一個(gè)極慢的自動(dòng)公轉(zhuǎn)。這造成了一種即使我不動(dòng),世界也在流轉(zhuǎn)的夢(mèng)幻效果。 4、全景落雪 :不再是漆黑的背景,而是漫天飄灑的細(xì)膩雪花,營(yíng)造冬日氛圍。5、魔法光標(biāo)拖尾 :鼠標(biāo)移動(dòng)時(shí)會(huì)留下一串金色的魔法粒子拖尾,增強(qiáng)交互感,就像揮舞魔杖一樣。 6、呼吸閃爍:樹上的彩燈會(huì)隨著時(shí)間隨機(jī)閃爍、忽明忽暗,讓樹看起來(lái)是活的。
![]()
加點(diǎn)音樂(lè),儀式感拉滿
最后,我們給圣誕樹加一段背景音樂(lè),指令也很簡(jiǎn)單
添加一個(gè)圣誕背景音樂(lè),默認(rèn)播放。播放音樂(lè)的按鈕要放在右上角,不用加文字說(shuō)明,展示一個(gè)音樂(lè)圖標(biāo)就可以。
音樂(lè)音色這里,我們還特意補(bǔ)充了八音盒的聲音描述,讓 AI 更好理解你想要的感覺(jué)。
金屬簧片被凸起音筒撥動(dòng)時(shí)的振動(dòng),發(fā)出的聲音干凈純粹,帶有金屬的明亮感,常被形容為「清涼悅耳的叮咚聲。」
最后的效果就是打開頁(yè)面,音樂(lè)自動(dòng)響起,右上角按鈕隨時(shí)開關(guān)。
![]()
如果遇到「AI 說(shuō)加了,但實(shí)際沒(méi)響」的情況,也別慌。繼續(xù)追問(wèn),它會(huì)給你解決方案。
![]()
為了更好觸發(fā)音樂(lè)播放,我們還加了一個(gè)啟動(dòng)頁(yè)面,記得讓啟動(dòng)頁(yè)和圣誕樹頁(yè)面的文字風(fēng)格保持一致。
![]()
到這里,一棵完整、可互動(dòng)、能放照片、帶音樂(lè)的圣誕樹,就真的做好了。

下一次,不管是圣誕樹、生日賀卡,還是任何你想做的互動(dòng)小作品,你都可以用同樣的思路,再來(lái)一遍。
你有沒(méi)有發(fā)現(xiàn) ?很多過(guò)去只有程序員才能完成的小程序、交互作品,現(xiàn)在普通人也可以通過(guò)指揮 AI 親手做出來(lái)。
這正是 AI 帶給普通人的最大變化,它正在不斷打破能力邊界。
如果你希望把這種能力從好玩的創(chuàng)作,進(jìn)一步用到真實(shí)的工作場(chǎng)景中,用 AI 實(shí)現(xiàn)效率提升,甚至發(fā)展成新的 AI 技能和變現(xiàn)能力。
那就來(lái)《秋葉 AI 智能辦公 3 天實(shí)戰(zhàn)營(yíng)》學(xué)一學(xué)。
秋葉金牌導(dǎo)師會(huì)帶你,用豆包、飛書、扣子、即夢(mèng), 把 AI 真正用進(jìn)高頻辦公場(chǎng)景:
AI PPT:一鍵生成PPT,匯報(bào)不再熬夜;
AI 數(shù)據(jù)分析:自動(dòng)分析、總結(jié),把復(fù)雜數(shù)據(jù)可視化;
AI 設(shè)計(jì):不會(huì)設(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íng)
?直播授課:專業(yè)導(dǎo)師在線教學(xué)
?實(shí)戰(zhàn)練習(xí):邊學(xué)邊練,融會(huì)貫通
?助教答疑:1V1 群內(nèi)點(diǎn)評(píng),隨時(shí)答疑
掃碼免費(fèi)學(xué)
關(guān)注【秋葉 AI 知識(shí)星球】
回復(fù)關(guān)鍵詞【98】
免費(fèi)領(lǐng)取
Gemini 同款圣誕樹
特別聲明:以上內(nèi)容(如有圖片或視頻亦包括在內(nèi))為自媒體平臺(tái)“網(wǎng)易號(hào)”用戶上傳并發(fā)布,本平臺(tái)僅提供信息存儲(chǔ)服務(wù)。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.