Gemini手搓3D粒子特效，體驗(yàn)現(xiàn)實(shí)版鋼鐵俠

新智元報(bào)道

編輯：定慧

【新智元導(dǎo)讀】無需懂一行代碼，Gemini 3正在重塑3D交互創(chuàng)作的邊界！詳細(xì)對(duì)比了Canvas與AI Studio在開發(fā)場(chǎng)景下的獨(dú)特優(yōu)勢(shì)，帶你親身體驗(yàn)這場(chǎng)「零門檻」的3D交互革命。

Gemini 3的威力其實(shí)并沒有被很多人真正的意識(shí)到。

最近，el.cine演示了如何僅通過簡(jiǎn)單的提示詞，生成一個(gè)實(shí)時(shí)交互的3D粒子系統(tǒng)。

用戶可以通過攝像頭檢測(cè)雙手張合的手勢(shì)來直接控制粒子群的縮放和擴(kuò)散。

用同款提示詞在Gemini Canvas試了一下，簡(jiǎn)直驚掉了下巴。

還可以升級(jí)，現(xiàn)在是識(shí)別一只手，可以識(shí)別兩只手，把粒子完全分開。

完全就是AR級(jí)別的控制效果，感覺我就是鋼鐵俠本俠。

提示詞非常簡(jiǎn)單：

提示：使用Three.js創(chuàng)建一個(gè)實(shí)時(shí)交互的3D粒子系統(tǒng)。

要求：

1、通過攝像頭檢測(cè)雙手的張合與握緊，控制粒子群的縮放與擴(kuò)散。

2、提供可選擇心形/花朵/土星/佛像/煙花等模板的。

3、面板支持通過顏色選擇器調(diào)整粒子顏色粒子。

4、需實(shí)時(shí)響應(yīng)手勢(shì)變化，界面設(shè)計(jì)簡(jiǎn)潔現(xiàn)代界面設(shè)計(jì)簡(jiǎn)潔現(xiàn)代。

整個(gè)過程完全無需編程基礎(chǔ)，只需在Gemini中輸入提示詞即可。

這一成果不僅震驚了有經(jīng)驗(yàn)的程序員（他們?cè)杌ㄙM(fèi)數(shù)周學(xué)習(xí)GLSL著色器），更標(biāo)志著復(fù)雜3D交互內(nèi)容的創(chuàng)作門檻被徹底消除，被認(rèn)為是正在見證的歷史性時(shí)刻。

而且這個(gè)效果，只有Gemini能夠「直出」這個(gè)效果。

就連谷歌AI Studio自帶的Build也不能一次性跑出這么好的結(jié)果。

然后Gemini里自帶的Canvas，還自帶了控制臺(tái)和代碼Fix。

這還要什么Cursor！

第一次跑就這個(gè)結(jié)果，我以為大家都是這樣，然后用了其他幾個(gè)AI工具。

都沒有Gemini跑出來的驚艷。

甚至有些直接就無法使用。

作者原來的例子效果也看起來要好一點(diǎn)。（懷疑是進(jìn)行了多輪對(duì)話以后的結(jié)果）

被低估的Canvas

其實(shí)很多人還是低估了Canvas的威力了。

比如你想裁剪最近很流行的表情包。

如果直接使用Nano Banana Pro去截圖，往往有種「大炮打蚊子」的感覺。

但是如果你先用Canvas做一個(gè)截圖小工具，甚至還可以選擇幾行幾列的截圖，最后還能打包好后下載為zip壓縮包。

Canvas是集成在Gemini網(wǎng)頁(yè)版中的一個(gè)功能界面，對(duì)標(biāo)的是OpenAI的Canvas和Anthropic的Artifacts。

核心機(jī)制：側(cè)邊欄的獨(dú)立渲染

在傳統(tǒng)的ChatGPT界面中，代碼和文本是混在對(duì)話流里的。如果你想修改一段生成的代碼，通常需要「復(fù)制-粘貼-修改-再粘貼」。

Canvas的邏輯是：將「對(duì)話（Chat）」與「內(nèi)容（Content）」分離。

左側(cè)：你的對(duì)話指令區(qū)。

右側(cè)：一個(gè)獨(dú)立的編輯器/渲染器窗口。

Canvas的三大技術(shù)殺手锏

這次3D粒子系統(tǒng)之所以能跑通，Canvas的功勞占了一半：

HTML/JS/React實(shí)時(shí)渲染環(huán)境：Canvas就像在瀏覽器里內(nèi)置了一個(gè)輕量級(jí)的IDE。它不僅能顯示代碼，還能直接運(yùn)行前端代碼。對(duì)于WebGL（如Three.js）這種依賴瀏覽器環(huán)境的庫(kù)，Canvas提供了原生的執(zhí)行沙箱，這使得調(diào)用攝像頭（WebcamAPI）變得非常順滑，而不需要像以前那樣把代碼復(fù)制到本地服務(wù)器運(yùn)行。

針對(duì)性的代碼修復(fù)（FixButton）：不同于普通的「重新生成」，Canvas允許你高亮右側(cè)的一段代碼或文本，然后告訴AI：「把這里的邏輯改一下」。它只針對(duì)局部進(jìn)行微調(diào)，而不是重寫全文。這對(duì)于調(diào)試復(fù)雜的3D渲染邏輯至關(guān)重要。

多模態(tài)的即時(shí)反饋：它支持生成圖表、網(wǎng)頁(yè)原型、文檔。當(dāng)你輸入「把背景改成黑色」時(shí)，右側(cè)的Canvas是實(shí)時(shí)刷新的，這種低延遲的反饋循環(huán)大大降低了試錯(cuò)成本。

適用人群：產(chǎn)品經(jīng)理、前端設(shè)計(jì)師、數(shù)據(jù)分析師、輕量級(jí)代碼編寫者。

被低估的AI Studio

而另一個(gè)更被低估的就是AI Studio，AI Studio可以說是開發(fā)者的「核武庫(kù)」。

如果說Canvas是裝修精美的樣板間，那么谷歌AIStudio就是堆滿工具和原材料的施工現(xiàn)場(chǎng)。

它是目前訪問Gemini API最快、最直接的路徑。

核心定位：模型調(diào)試與Prompt Engineering

AI Studio不是為了讓你聊天，而是為了讓你構(gòu)建應(yīng)用。

之前的例子中提到AI Studio的Build功能跑分不如Gemini Canvas，這其實(shí)是因?yàn)閮烧叩膫?cè)重點(diǎn)不同。

AI Studio的硬核特性:

超長(zhǎng)上下文（Context Window）：這是AI Studio的殺手锏。

它支持Gemini 1.5 Pro的200萬(wàn)token上下文。你可以把整本技術(shù)文檔、幾小時(shí)的視頻、或者整個(gè)項(xiàng)目的代碼庫(kù)直接拖進(jìn)去。

• 對(duì)比Canvas：Canvas的上下文雖然也長(zhǎng)，但為了響應(yīng)速度做了截?cái)嗪蛢?yōu)化；AI Studio則是「生吞」海量數(shù)據(jù)。

System Instructions（系統(tǒng)指令）：在AI Studio里，你可以設(shè)置通過「系統(tǒng)指令」來定義模型的角色、語(yǔ)氣和輸出格式。這比在聊天框里說「你現(xiàn)在是一個(gè)xxx」要穩(wěn)定得多，權(quán)重更高。

多模態(tài)原生輸入：你可以上傳一段40分鐘的視頻，AI Studio不會(huì)將其轉(zhuǎn)化為文本字幕，而是直接「看」視頻的每一幀。這對(duì)于視頻理解、音頻分析任務(wù)是降維打擊。

Prompt Caching（提示詞緩存）：對(duì)于開發(fā)者來說，這能極大降低API調(diào)用成本和延遲。如果你的Prompt有一部分是固定的（比如一本巨大的規(guī)則書），AI Studio允許你緩存這部分內(nèi)容。

適用人群：能夠?qū)慞ython/Node.js的開發(fā)者、企業(yè)級(jí)應(yīng)用構(gòu)建者、需要處理海量數(shù)據(jù)的研究人員。

而且官方給出了很多高質(zhì)量的Vibe Coding作品庫(kù)。

案例很多：

• 涵蓋了近100多種Vibe Coding作品；

• 包含圖像生成、視頻創(chuàng)作、游戲開發(fā)、文本處理、代碼生成等多領(lǐng)域；

• 都是些很驚艷的范例：如漫畫生成器、電商產(chǎn)品攝影棚、像素藝術(shù)場(chǎng)景生成、YT視頻轉(zhuǎn)互動(dòng)學(xué)習(xí)應(yīng)用。

比如可以在網(wǎng)頁(yè)里玩跑酷。

或者在網(wǎng)頁(yè)中生成4K高清壁紙。

還有很多例子，都是非常棒的Vibe Coding模板。

不過為什么上面那個(gè)粒子效果AI Studio不如Canvas呢？

大概猜一下，這涉及到底層的運(yùn)行環(huán)境策略：

1. Canvas的優(yōu)化目標(biāo)是「一次性交付」：

   谷歌對(duì)Canvas模式下的模型進(jìn)行了微調(diào)（Fine-tuning），強(qiáng)化了它生成完整、可運(yùn)行的前端代碼的能力，并自動(dòng)補(bǔ)全了許多 Web 環(huán)境下的依賴庫(kù)。

2. AIStudio的環(huán)境更「裸」：

   AI Studio的預(yù)覽功能主要是為了測(cè)試 API 的輸出，它的沙箱環(huán)境并沒有像 Canvas 那樣針對(duì)流行的前端庫(kù)（如 Three.js, React, Tailwind）做極致的預(yù)加載和兼容性優(yōu)化。

最后，簡(jiǎn)單總結(jié)就是：

如果你想要一個(gè)結(jié)果（比如一個(gè)能玩的 3D 網(wǎng)頁(yè)），用Gemini Canvas。

如果你想要基于這個(gè)結(jié)果開發(fā)一個(gè)APP（比如獲取它的 API 調(diào)用邏輯，集成到你自己的服務(wù)器），用AIStudio。

想要體驗(yàn)上述粒子效果可以把下面代碼拷貝到HTML單文件中，用瀏覽器打開即可。

html>

參考資料：

https://aistudio.google.com/apps

秒追ASI

?點(diǎn)贊、轉(zhuǎn)發(fā)、在看一鍵三連?

點(diǎn)亮星標(biāo)，鎖定新智元極速推送！