Gemini手搓3D粒子特效，體驗現實版鋼鐵俠

新智元報道

編輯：定慧

【新智元導讀】無需懂一行代碼，Gemini 3正在重塑3D交互創作的邊界！詳細對比了Canvas與AI Studio在開發場景下的獨特優勢，帶你親身體驗這場「零門檻」的3D交互革命。

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

最近，el.cine演示了如何僅通過簡單的提示詞，生成一個實時交互的3D粒子系統。

用戶可以通過攝像頭檢測雙手張合的手勢來直接控制粒子群的縮放和擴散。

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

還可以升級，現在是識別一只手，可以識別兩只手，把粒子完全分開。

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

提示詞非常簡單：

提示：使用Three.js創建一個實時交互的3D粒子系統。

要求：

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

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

3、面板支持通過顏色選擇器調整粒子顏色粒子。

4、需實時響應手勢變化，界面設計簡潔現代界面設計簡潔現代。

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

這一成果不僅震驚了有經驗的程序員（他們曾需花費數周學習GLSL著色器），更標志著復雜3D交互內容的創作門檻被徹底消除，被認為是正在見證的歷史性時刻。

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

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

然后Gemini里自帶的Canvas，還自帶了控制臺和代碼Fix。

這還要什么Cursor！

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

都沒有Gemini跑出來的驚艷。

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

作者原來的例子效果也看起來要好一點。（懷疑是進行了多輪對話以后的結果）

被低估的Canvas

其實很多人還是低估了Canvas的威力了。

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

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

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

Canvas是集成在Gemini網頁版中的一個功能界面，對標的是OpenAI的Canvas和Anthropic的Artifacts。

核心機制：側邊欄的獨立渲染

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

Canvas的邏輯是：將「對話（Chat）」與「內容（Content）」分離。

左側：你的對話指令區。

右側：一個獨立的編輯器/渲染器窗口。

Canvas的三大技術殺手锏

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

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

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

多模態的即時反饋：它支持生成圖表、網頁原型、文檔。當你輸入「把背景改成黑色」時，右側的Canvas是實時刷新的，這種低延遲的反饋循環大大降低了試錯成本。

適用人群：產品經理、前端設計師、數據分析師、輕量級代碼編寫者。

被低估的AI Studio

而另一個更被低估的就是AI Studio，AI Studio可以說是開發者的「核武庫」。

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

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

核心定位：模型調試與Prompt Engineering

AI Studio不是為了讓你聊天，而是為了讓你構建應用。

之前的例子中提到AI Studio的Build功能跑分不如Gemini Canvas，這其實是因為兩者的側重點不同。

AI Studio的硬核特性:

超長上下文（Context Window）：這是AI Studio的殺手锏。

它支持Gemini 1.5 Pro的200萬token上下文。你可以把整本技術文檔、幾小時的視頻、或者整個項目的代碼庫直接拖進去。

• 對比Canvas：Canvas的上下文雖然也長，但為了響應速度做了截斷和優化；AI Studio則是「生吞」海量數據。

System Instructions（系統指令）：在AI Studio里，你可以設置通過「系統指令」來定義模型的角色、語氣和輸出格式。這比在聊天框里說「你現在是一個xxx」要穩定得多，權重更高。

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

Prompt Caching（提示詞緩存）：對于開發者來說，這能極大降低API調用成本和延遲。如果你的Prompt有一部分是固定的（比如一本巨大的規則書），AI Studio允許你緩存這部分內容。

適用人群：能夠寫Python/Node.js的開發者、企業級應用構建者、需要處理海量數據的研究人員。

而且官方給出了很多高質量的Vibe Coding作品庫。

案例很多：

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

• 包含圖像生成、視頻創作、游戲開發、文本處理、代碼生成等多領域；

• 都是些很驚艷的范例：如漫畫生成器、電商產品攝影棚、像素藝術場景生成、YT視頻轉互動學習應用。

比如可以在網頁里玩跑酷。

或者在網頁中生成4K高清壁紙。

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

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

大概猜一下，這涉及到底層的運行環境策略：

1. Canvas的優化目標是「一次性交付」：

   谷歌對Canvas模式下的模型進行了微調（Fine-tuning），強化了它生成完整、可運行的前端代碼的能力，并自動補全了許多 Web 環境下的依賴庫。

2. AIStudio的環境更「裸」：

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

最后，簡單總結就是：

如果你想要一個結果（比如一個能玩的 3D 網頁），用Gemini Canvas。

如果你想要基于這個結果開發一個APP（比如獲取它的 API 調用邏輯，集成到你自己的服務器），用AIStudio。

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

html>

參考資料：

https://aistudio.google.com/apps

秒追ASI

?點贊、轉發、在看一鍵三連?

點亮星標，鎖定新智元極速推送！