【Vibe Coding】Gemini 3 + three.js 3D 教學｜不用寫程式也能做 3D 手勢互動粒子特效
透過一段 Prompt，就能用 Gemini 3 自動生成 three.js 3D 手勢互動粒子特效。本教學完整示範從貼指令到開啟網頁、用雙手操控粒子的全流程。
今天早上滑社群的時候，看到一個超酷的應用：用 Gemini 3 搭配 three.js，居然可以直接生成 3D 手勢互動粒子場景。更誇張的是，真的只要一段 prompt，就能把整個網頁做出來，不需要寫任何程式。
0:00
/0:05
你只要會複製貼上，就能做出一個：
打開網頁、開啟攝影機，用雙手就能拉伸、放大、變換顏色與造型的 3D 粒子場景。
本文會一步步帶你完成：
- 用 Google AI Studio + Gemini 3 生成 three.js 程式碼
- 把 AI 生成的程式碼轉成
index.html - 打開瀏覽器，實際用「手勢」操控 3D 粒子
- 提供可直接複製的 完整 Prompt 範本，讓你照貼即可運行
為什麼這件事「以前幾乎不可能」？
過去如果要做出「用手勢控制 3D 粒子」的網站，大概要具備三種能力：
- three.js：3D 場景與粒子系統
- 手勢偵測：用攝影機讀取手的開合、距離等資訊
- 前端整合：把畫面、控制面板、互動邏輯組裝在一起
這通常需要前端工程師、互動設計師或 creative coder 花上不少時間。
現在的差別在於：
- Gemini 3 能一口氣產出包含 three.js 場景、攝影機手勢偵測、UI 控制面板的完整程式碼
- 你只需要：
- 把 Prompt 貼進 Google AI Studio
- 複製生成的程式碼
- 存成
index.html，用瀏覽器打開
這就是典型的「Vibe Coding」工作流程：
不再從零寫語法，而是用自然語言描述需求，讓 AI 幫你把互動體驗造出來。
【省錢裝潢】別急著找設計師！教你用 Gemini 免費把 2D 平面圖變成 3D 裝潢圖
裝潢免花錢！教你用 Gemini 3.0 將 2D 平面圖秒轉 4K 3D 渲染，省下高額設計費，輕鬆預覽夢想家。
Vicky Tsai
整體流程：不用寫程式的 3D 粒子特效
先快速總覽一次整個步驟，確認你只需要做的事情是「複製、貼上與重新命名檔案」：
- 建立一個新對話，貼上後面提供的 Prompt
- 等 Gemini 3 生成完整 three.js 程式碼
- 開啟電腦上的文字編輯器（例如 Notepad、VS Code 都可以）
- 新增一個純文字檔，把程式碼全部貼上
- 將檔名從預設的
.txt改成index.html - 在桌上型瀏覽器中雙擊或右鍵用瀏覽器打開
- 允許網頁使用攝影機
- 抬起雙手、張開或握拳，觀察畫面中的粒子如何跟著你的動作縮放、擴散、變換顏色與造型
接下來，我們把每一個步驟拆開來講。
Step-by-Step 教學
Step 1：準備環境
你需要準備：
- 一台有攝影機的電腦（內建或外接皆可）
- 一個現代瀏覽器（建議 Chrome 或 Edge）
- Google 帳號（登入 AI Studio 用）
建議使用桌機或筆電，體驗會比手機穩定。
Step 2：進入 Google AI Studio 並貼上 Prompt
- 在瀏覽器輸入
https://aistudio.google.com - 登入 Google 帳號
- 建立一個新的聊天或空白專案
- 把本文後面的 完整 Prompt 一次貼進去
- 確認模型選擇為 Gemini 3（或對應的最新版 Gemini 模型）
- 送出 Prompt
Gemini 3 就會開始生成一段包含：
- three.js 初始化程式碼
- 粒子系統建立
- 攝影機影像讀取與手勢偵測邏輯
- 右側或上方的控制面板（選擇愛心、花朵、土星、佛像、煙火等粒子造型）
- 顏色選擇器
Step 3：檢查與複製程式碼到本機
當生成完成後：
- 確認它輸出的是一個完整的 HTML 文件（通常會包含
<html>,<head>,<body>等標籤） - 點選「複製程式碼」或手動全選、複製
- 在你電腦上開啟文字編輯器，例如：
- Windows：記事本（Notepad）、VS Code
- macOS：TextEdit（請改成純文字模式）、VS Code
將程式碼完整貼上。
Step 4：將檔案存成 index.html
- 在文字編輯器中選擇「另存新檔」
- 檔名輸入：
index.html - 編碼建議選擇
UTF-8（多數編輯器為預設值） - 儲存位置選擇一個你找得到的資料夾（例如桌面）
完成後，你會在資料夾中看到一個帶有瀏覽器圖示的 index.html 檔案。
Step 5：打開瀏覽器並啟用攝影機
- 在檔案總管中雙擊
index.html，或右鍵 → 用瀏覽器開啟 - 畫面載入後，瀏覽器可能會跳出「是否允許此網頁使用攝影機？」
- 請選擇「允許」
- 幾秒後，你應該會看到：
- 一個 3D 場景，畫面中央是一團粒子
- 一個簡單的操作介面：
- 模板選擇（愛心、花朵、土星、佛像、煙火等）
- 顏色選擇器
- 把雙手舉到攝影機前面，試著：
- 張開雙手 → 粒子雲向外擴散或放大
- 合起雙手 → 粒子群收縮
- 改變手勢緊張程度 → 粒子密度或動態強度變化
如果你可以順利用手型控制粒子，就代表整個流程已經完成。
0:00
/0:05
可直接複製使用的 Prompt 範本
以下是你可以直接貼到 Google AI Studio 的英文 Prompt，已符合你提到的需求設定。
建議做法：先原封不動貼上這一版之後再依照自己的需求加上中文說明或更多條件
Create a real-time interactive 3D particle system with Three.js.
requirements:
Control the scaling and expansion of the particle group by detecting the tension and closing of both hands through the camera.
Provide panels that can choose hearts/flowers/saturn/Buddha statues/fireworks and other templates
Support the colour selector to adjust the particle colour
Particles need to respond to gesture changes in real time. The interface is simple and modern.
The interface is simple and modern這個互動場景可以用在哪些地方？
當你能用「自然語言」生成這種 3D 手勢互動，實際上打開了很多延伸應用：
教學與工作坊
- 帶學生或非工程背景的參與者，實際看到「不用寫程式也可做 3D 互動」
- 將此作為 Vibe Coding 入門案例，讓大家理解 AI 幫助寫程式碼的威力
展覽與活動互動牆
- 在展場設計一個「手勢控光粒子牆」
- 參觀者抬手就能操作粒子雲，強化科技感與沉浸感
個人作品集與網站特效
- 把這個 3D 場景嵌入個人網站，作為首頁背景或互動畫面
- 展示你對 AI + 前端互動的實驗精神，即使你本身不是工程師
快速原型與概念驗證
- 先用 Gemini 3 生成一個可運作的 Prototype
- 之後再交給前端工程師優化效能、調整設計
進階玩法：如何讓作品更有「你自己的風格」？
當你完成第一個版本後，可以嘗試把 Prompt 再加長一點，加入更多「風格」描述：
- 粒子的動態感：
- 「像是宇宙塵埃緩慢漂浮」
- 「像煙火爆炸之後的星點」
- 色彩主題：
- 「以深藍與紫色為主，營造宇宙感」
- 「以粉色與金色為主，營造節慶氛圍」
- UI 風格：
- 「Flat design」
- 「玻璃擬態（glassmorphism）」
- 音效：
- 要求搭配簡單的背景音樂或手勢觸發音效（僅限瀏覽器允許的條件下）
範例加強 Prompt：
Make the overall visual style feel like a cosmic, futuristic art installation.
Use a dark background with soft gradients and subtle glow effects around the particles.
Design the UI panel with a glassmorphism style and minimal text labels.
這些描述會讓 Gemini 3 更理解你想要的感覺，生成出更貼近你審美的版本。
總結：從「不可能」到「人人都能玩」的 3D 互動創作
這個案例其實展現了一個關鍵趨勢：
- three.js 提供成熟穩定的 3D 能力
- Gemini 3 把原本只有工程師做得到的事情，變成任何人只要會「描述需求」就可以完成
- 你不需要成為資深前端工程師，就可以把「用手控制 3D 粒子」這種過去很難的互動畫面，做成一個活生生可以 demo 的網頁
如果你已經完成了第一版：
- 可以截圖、錄影、分享到社群
- 記錄下你用的 Prompt 與調整過程
- 接下來再往更多互動形式擴展，例如：
- 用臉部表情控制粒子
- 用聲音音量控制粒子動態
- 把互動結果串到其他 AI 模型或 API
這就是新一代 Vibe Coding 的底層邏輯：
把「寫程式」變成「設計體驗」，把 AI 當成你的互動工程師。
【Vibe Coding】Google 推出全新 Generative UI：一句話生成互動式介面，Gemini 完整實戰教學
Google Research 宣佈了一項重大的技術突破——Generative UI（生成式界面）。這項技術標誌著我們與 AI 的互動方式將發生根本性的轉變：從過去的「文字對話」進化為「動態介面共創」。
Vicky Tsai
想讓 AI 成為你團隊的一員？
💡
如果你希望從 side project 邁向產品化實作，將「AI + 程式」變成真正的解決方案核心，而不是只停留在玩玩工具的階段，那你一定要深入了解 Vibe Coding 導入服務如何協助團隊實現目標。
