【Vibe Coding】Gemini 3 + three.js 3D 教學｜不用寫程式也能做 3D 手勢互動粒子特效

今天早上滑社群的時候，看到一個超酷的應用：用 Gemini 3 搭配 three.js，居然可以直接生成 3D 手勢互動粒子場景。更誇張的是，真的只要一段 prompt，就能把整個網頁做出來，不需要寫任何程式。

你只要會複製貼上，就能做出一個：
打開網頁、開啟攝影機，用雙手就能拉伸、放大、變換顏色與造型的 3D 粒子場景。

本文會一步步帶你完成：

• 用 Google AI Studio + Gemini 3 生成 three.js 程式碼
• 把 AI 生成的程式碼轉成 index.html
• 打開瀏覽器，實際用「手勢」操控 3D 粒子
• 提供可直接複製的 完整 Prompt 範本，讓你照貼即可運行

為什麼這件事「以前幾乎不可能」？

過去如果要做出「用手勢控制 3D 粒子」的網站，大概要具備三種能力：

• three.js：3D 場景與粒子系統
• 手勢偵測：用攝影機讀取手的開合、距離等資訊
• 前端整合：把畫面、控制面板、互動邏輯組裝在一起

這通常需要前端工程師、互動設計師或 creative coder 花上不少時間。

現在的差別在於：

• Gemini 3 能一口氣產出包含 three.js 場景、攝影機手勢偵測、UI 控制面板的完整程式碼
• 你只需要：
  1. 把 Prompt 貼進 Google AI Studio
  2. 複製生成的程式碼
  3. 存成 index.html，用瀏覽器打開

這就是典型的「Vibe Coding」工作流程：
不再從零寫語法，而是用自然語言描述需求，讓 AI 幫你把互動體驗造出來。

【省錢裝潢】別急著找設計師！教你用 Gemini 免費把 2D 平面圖變成 3D 裝潢圖

裝潢免花錢！教你用 Gemini 3.0 將 2D 平面圖秒轉 4K 3D 渲染，省下高額設計費，輕鬆預覽夢想家。

AI郵報Vicky Tsai

整體流程：不用寫程式的 3D 粒子特效

先快速總覽一次整個步驟，確認你只需要做的事情是「複製、貼上與重新命名檔案」：

打開 Google AI Studio

1. 建立一個新對話，貼上後面提供的 Prompt
2. 等 Gemini 3 生成完整 three.js 程式碼
3. 開啟電腦上的文字編輯器（例如 Notepad、VS Code 都可以）
4. 新增一個純文字檔，把程式碼全部貼上
5. 將檔名從預設的 .txt 改成 index.html
6. 在桌上型瀏覽器中雙擊或右鍵用瀏覽器打開
7. 允許網頁使用攝影機
8. 抬起雙手、張開或握拳，觀察畫面中的粒子如何跟著你的動作縮放、擴散、變換顏色與造型

接下來，我們把每一個步驟拆開來講。

Step-by-Step 教學

Step 1：準備環境

你需要準備：

• 一台有攝影機的電腦（內建或外接皆可）
• 一個現代瀏覽器（建議 Chrome 或 Edge）
• Google 帳號（登入 AI Studio 用）

建議使用桌機或筆電，體驗會比手機穩定。

Step 2：進入 Google AI Studio 並貼上 Prompt

還想看更多嗎？完整內容只對註冊用戶開放喔！
點下方的免費 Subscribe，馬上加入我們～