完整教程：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，再按上表逐个补动作与手势即可。