![]()
最近,用Gemini 3.0或者GPT 5.2做3D粒子交互,出現了很多爆火的案例,很多在抖音和小紅書上,都有上萬贊。 他們生成能變化的愛心、圣誕樹,漫威宇宙的魔法盤,甚至是鋼鐵俠中的賈維斯等等,而且都可以手勢操作,十分酷炫。
![]()
以前需要數天寫Three.js和計算機視覺代碼,現在和AI對話幾輪就可以實現。鯨哥也參考和嘗試了一番,下面是這些案例的生成合集。 這些案例基礎的提示詞如下,大多是在這版本上不斷迭代。
用 Three.js 創建一個實時交互的 3D 粒子系統。要求: 1.通過攝像頭檢測雙手張合控制粒子群的縮放與擴散 2.提供 U 面板可選擇愛心/花朵土星/佛像/煙花等模型 3.支持顏色選擇器調整粒子顏色 4.粒子需實時響應手勢變化
1、圣誕老人?
一開始讓Gemini生成3D粒子交互系統,它沒聽懂,只生成了一個視頻。
于是重新寫文字提示詞,一遍遍迭代,最終生成了圣誕老人的3D粒子形象。
而且能用手勢控制旋轉和爆炸效果,是不是很浪漫。
![]()
這是HTML代碼截圖,完整獲取方式在文末。
![]()
2、圣誕樹?
在圣誕樹周圍布滿照片,手勢可以控制圣誕樹的爆炸效果,照片點擊可以放大。
![]()
這是最終的代碼,文末獲取。
![]()
2、賈維斯操作神經網絡
這里面還有愛心、銀河等神經網絡,可雙手操作變化。
![]()
![]()
3、星環、愛心、佛像和煙花
![]()
![]()
4、漫威宇宙魔法盤
![]()
可以放大后爆炸效果的魔法盤。
![]()
實際上,這些案例很難靠準確的Prompt描述,更多是跟AI過招。類似魔法盤案例,我是找原圖提供給AI,然后讓AI描述這些元素,以及需要執行的技術名詞。
![]()
然后當你了解了核心的迭代方向,就開始一次次讓AI迭代。
鑒于很多朋友是代碼小白,還是直接生成HTML代碼,會更方便展示。如果用復雜的TypeScript和Three.js/React Three Fiber 實現3D 交互體驗,很多朋友不會安裝環境的景況下,也許難以展示。
PS,文章中各個案例的完整代碼,公眾號后臺回復:3D粒子
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布,本平臺僅提供信息存儲服務。
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.