完整教學：Meshy 7.1 圖生 3D + VberAI Studio + Cursor 搭建 3D 手勢交互機器人

雲小閑會動了，還能聽我的「手勢指揮」。

對著攝影機比個耶，他就跳江南舞；握個拳，出拳；豎起拇指、食指和小指，開始跳舞；食指畫個圈，模型也跟著轉身——這不是預錄影片，而是 圖生 3D 角色 + 多段 GLB 動畫 + 瀏覽器手勢識別 拼出來的小互動。

教學影片： YouTube：Meshy 7.1 + VberAI Studio + Cursor 手勢 3D 互動（頁面頂部可播放；VberAI 頻道）

以前，雲小閑多半出現在配圖、封面和文章插圖裡。這次讓他從平面裡走出來，在瀏覽器裡做 雲小閑手勢交互機器人（下文簡稱 本 demo）。

這個網頁我也放出來了，感興趣的可以直接玩：

👉 傳送門：雲小閑 · 3D 手勢互動

初次載入 3D 模型會有點慢，耐心等一小會兒。建議用帶攝影頭的 電腦或手機 打開，點擊 拍照圖示，允許使用攝影機，再把手放進畫面裡。

起因是最近看到不少人用 GPT-6 Astra 操作 Blender 搭場景、做遊戲，也有創作者把 IP 做成 Q 版 3D，再透過攝影機識別手勢，讓角色走路、打招呼、跳舞和轉圈——例如 完整教學：用 GPT-6 Astra+Blender 從零開始搭建一個3D 手勢交互機器人 裡那套「夕小瑤」互動頁，讀起來很完整，但鏈路也長：生圖、Meshy 白模、Blender 修形減面、貼圖、綁骨、再寫網頁。

我也想要類似效果，但更希望 生成、綁骨、挑動作、匯出 GLB 盡量在 VberAI Studio 同一畫布裡完成，網頁與手勢邏輯交給 Cursor 迭代。流水線是：VberAI Studio 圖生 3D + 骨骼與動作匯出，再在 Cursor 裡用 Three.js 與 手勢識別 把 model-files 下的 多段 GLB 動畫 接到網頁上。

這條路徑對獨立開發者更省事：不必手寫 Three.js 與手勢映射程式，用自然語言在 Cursor 裡描述規則並迭代即可。下面把製作過程分享出來；不會建模也可以跟著做，每一步該檢查什麼，教學裡一併寫上。

環節	工具	產出
角色網格與貼圖	VberAI Studio 圖生 3D	帶紋理的角色 GLB
多動作	Studio 骨骼與動畫（內建動作庫）	walking.glb、boxing.glb 等
互動頁	Cursor + Three.js + 手勢識別	可本地/部署的靜態站點

圖生 3D、Meshy / Tripo 參數與 GLB 匯出細節，可先讀 AI 生 3D：文生 / 圖生 3D。

---

第一步：用一張參考圖做圖生 3D

1. 打開 VberAI Studio → 3D 生成 → 圖生 3D。
2. 上傳 正面參考圖（Q 版 IP、遊戲角色立繪、產品擬人化均可）。正面圖角色肢體最好清晰可見，不要粘連，防止生成動畫時肢體異常。
3. 按需設置：網格類型（網頁 demo 可優先 低多邊形 或 智慧拓撲）、拓撲、目標多邊形數（面數）、生成紋理、PBR；圖生後端可選 Meshy 7.1（與 YouTube 教學 一致，亦可用 Tripo / 混元等條目）。
4. 生成後在 3D 工作台 預覽輪廓；不滿意可 重做貼圖 或換 Tripo / Meshy / 混元條目重試。 驗收：單角色 GLB 匯入 Three.js 預覽器無破面、比例符合預期即可，不必一次做到發行級。

---

第二步：選擇動作，匯出多段 3D 動畫

手勢互動需要 多段可切換動畫，而不是只有一個 T Pose 的靜態網格。

1. 在 Studio 畫布打開 骨骼與動畫。
2. 為角色配置骨骼（人形/Q 版均可，以 Studio 當前能力為準）。
3. 從內建 百餘種動作 中挑選與手勢表對應的片段，例如：
   • 走秀 / 待機循環 → 預設展示
   • 拳擊、舞蹈、倒地、起身、奔跑等 → 各對應一個 GLB 檔案
4. 匯出模型 為 GLB（每段動畫一個檔案，或按 Studio 匯出選項合併/拆分——以你專案 model-files 目錄約定為準）。

本次 雲小閑手勢交互機器人 使用的檔名示例（與線上一致）：

檔案	用途
walking.glb	預設：自信走秀
boxing.glb	握拳 → 拳擊
jiangnan_dance.glb	比耶 → 江南舞
die.glb	手槍手勢 → 倒地
running.glb	手掌拍下 → 奔跑
getup.glb	特定手勢 → 起身
love_dance.glb	拇指+食指+小指 → 跳舞
swing_dance.glb	掌心朝下彈奏 → 搖擺舞步

將 GLB 放入專案目錄（如 yunxiaoxian-gesture-studio/model-files/），保留檔名，便於 Cursor 按表映射。

---

第三步：在 Cursor 裡描述「手勢 → 動畫」規則

新建靜態頁專案（示例倉庫名 yunxiaoxian-gesture-studio），把 手勢表、預設動畫、防抖邏輯、縮放/旋轉 寫進給 Cursor 的說明。核心約束建議寫清楚：

• 同一時間只認一個手勢；動作類手勢 穩定約 0.5 秒 再切換，避免誤觸。
• 預設循環 walking.glb（自信走秀）。
• 非動作手勢：張開手掌靠近/遠離攝影機 → 縮放；食指畫圈 → 跟隨旋轉，停手後 平滑回正。
• 攝影機：必須在 HTTPS 或 本地靜態伺服器 下使用，不能 用 file:// 直接打開 HTML。
• 資源：頁面與角色 GLB 盡量自託管（手部識別若在本地載入 wasm/模型，也一併放在靜態目錄），避免 demo 依賴外網 CDN 導致載入失敗（雲小閑站點即按此部署）。

提示詞骨架示例（可按你的檔名改）：

用 Three.js 載入 model-files 下的 GLB，預設播放 walking.glb 並循環。
整合攝影機手勢識別，映射：
  OK/預設 → walking.glb
  握拳 → boxing.glb
  比耶 → jiangnan_dance.glb
  特定手勢 → getup.glb
  …（補全下表）
同一手勢穩定 0.5s 再切換動畫；畫圈控制 Y 軸旋轉，鬆手後 lerp 回正；
雙手張合控制 scale。提供攝影機入口（如拍照圖示），點擊後請求攝影機權限。
本地用 python3 -m http.server 5173 調試。

在 Cursor 中迭代時，優先讓 切換動畫、回正、縮放 三塊行為可測，再美化 UI（如雲小閑頁的霓虹背景、程式碼卡片等）。

---

第四步：本地調試

攝影機 API 受瀏覽器安全策略限制，請用靜態服務打開頁面：

cd yunxiaoxian-gesture-studio
python3 -m http.server 5173

瀏覽器訪問 http://localhost:5173，點擊 拍照圖示 並允許攝影機。也可用 npm start（若專案已配置）。

檢查項：

• 首次進入是否 預設走秀；
• 每個手勢是否 只觸發一個 GLB；
• 快速晃手是否不會 瘋狂切動畫（0.5s 防抖）；
• 畫圈停止後是否 回正。

---

第五步：部署試玩

本地通過後，將靜態資源部署到支持 HTTPS 的主機（如 Netlify、自有網域）。線上示例：https://yxx.aivelo.net/ — 初次打開 3D 與模型略慢 屬正常；電腦 建議 Chrome / Edge，手機 可用系統瀏覽器並授權攝影機。

---

手勢對照表（雲小閑手勢交互機器人）

手勢	反應
預設 / OK	自信走秀 walking.glb
握拳	拳擊 boxing.glb
比耶	江南舞 jiangnan_dance.glb
食指 + 拇指（手槍）	倒地 die.glb
手掌拍下	奔跑 running.glb
特定手勢	起身 getup.glb
拇指、食指、小指伸出	跳舞 love_dance.glb
掌心朝下，手指交替彈奏	搖擺舞步 swing_dance.glb
張開手掌，靠近或遠離攝影機	放大或縮小
食指畫圈	跟隨轉動，停止後平滑回正

---

可複用的經驗

• 動作先少後多：先打通 2～3 個手勢 + 預設循環，再補全八段舞蹈/格鬥。
• GLB 命名穩定：手勢表、Cursor 提示詞、程式三處共用同一套檔名。
• 面數給網頁留餘量：還要跑攝影機與推理時，網格不宜過高；Studio 裡可 低多邊形 / 智慧拓撲 / 目標多邊形數（面數，太大影響性能） 後再匯出。
• Studio 與 Cursor 分工：Studio 解決 AI 3D 與動畫資產；Cursor 解決 互動邏輯與頁面，避免在對話裡重複造 3D。

---

常見問題

必須用 VberAI Studio 嗎？
本文流程針對 Studio 的 圖生 3D + 骨骼與動作 + GLB 匯出。其他工具鏈也能做 GLB，但步驟需自行替換。

手勢識別用的是什麼？
「雲小閑手勢交互機器人」在瀏覽器內用 MediaPipe 檢測手部關鍵點，再用頁面裡的幾何規則判斷手勢，並映射到上表；具體實現以你專案程式為準，關鍵是 防抖 與 單手勢單反應。

為什麼本地不能雙擊 HTML 打開？
瀏覽器對 file:// 下的攝影機與部分模組有限制，請用 http.server 或 HTTPS 部署。

和 Astra+Blender 手勢機器人教學 比，少了什麼？
那篇是 Codex 操作 Blender + 外部 Meshy 分步：修尾巴、減面、貼圖回 Meshy 等都在 DCC 與多個站點之間來回。本篇把 圖生 3D、綁骨、動作、GLB 匯出 放在 VberAI Studio 同一畫布；3D 工作台 裡也能對模型做 旋轉/偏移、材質、光照、算圖風格、組件、貼圖 等調整——Meshy 裡常見的編輯能力，Studio 裡基本都有，還額外接 Tripo、騰訊混元 Hunyuan3D 等生成後端（不只 Meshy 一條線）。網頁與手勢仍用 Cursor 寫。若你要 極精細拓撲、複雜 rig 權重或插件級 Blender 流程，仍可在 Studio 匯出 GLB 後進 Blender 終檢；手勢 demo 本身不必先走完整 Blender 管線。

能進 Unity / Godot 嗎？
可以。手勢網頁是 快速驗證；同一批 GLB 也可按 3D 模型生成 一文 匯出至遊戲引擎 做正式玩法。

教學影片在哪？
YouTube gk9EGsrQ_5g；本文頂部亦可嵌入播放。

---

小結

VberAI Studio 負責把 一張圖 變成 帶多套動作的 GLB；Cursor 負責把 手勢表 寫成可玩的網頁。「雲小閑手勢交互機器人」證明這條鏈路能在 不先搭 Unity / Godot 工程 的前提下，做出可分享的手勢互動。若你也有自己的 IP，可從 Studio 圖生 3D 匯出第一個 walking.glb，再按上表逐個補動作與手勢即可。