![]()
新智元報(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)境策略:
- Canvas的優(yōu)化目標(biāo)是「一次性交付」:
谷歌對(duì)Canvas模式下的模型進(jìn)行了微調(diào)(Fine-tuning),強(qiáng)化了它生成完整、可運(yùn)行的前端代碼的能力,并自動(dòng)補(bǔ)全了許多 Web 環(huán)境下的依賴庫(kù)。
- 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),鎖定新智元極速推送!
特別聲明:以上內(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.