🎨 img2threejs：图片转Three.js模型 Claude Code图像转3D神器

img2threejs 是开源 Claude Code 技能，把参考图里的对象自动重建为代码形式的 Three.js 模型。Python 驱动生成 TypeScript 输出，无需网格/摄影测量/外部依赖，过程化生成可直接动画绑定，Apache-2.0 协议完全免费。

🎤 引言

前端做 3D 的同学大概都遇到过这种场景：

产品经理丢来一张「随便找的参考图」——一把 Y-Chair 椅子、一个 MIDI 键盘、一只招财猫摆件，要求「能不能 3D 化放进网页」。传统路线有三条：

1. Blender 手搓：建模 2-4 小时，导出 glTF + 灯光材质，工程量爆炸
2. AI 摄影测量（Tripo / Meshy）：上传图 → 等 30 秒 → 拿到 OBJ/GLB。但生成的网格往往带几万顶点、无法编辑、纹理版权不明
3. Three.js 手写代码：自己盯屏幕写 BoxGeometry / CylinderGeometry 拼外形，调材质打灯光，调到天荒地老

GitHub 4.9k Stars 的 img2threejs/img2threejs 给出第四种路线——一个 Claude Code Agent Skill，把参考图作为输入，直接产出纯代码形式的 Three.js 模型。

项目由 Hoài Nhớ 在 2026-07-15 发布（截至 2026-07-26 才 11 天），就已经斩获 4.9k Stars / 368 Forks，足见它切中的痛点有多精准。

⭐ 核心功能

1. 纯代码 Three.js 输出，无网格依赖

最大差异化卖点：img2threejs 不是把图片「翻译成网格文件」，而是把对象重新建模为 TypeScript 代码。

输出是一个工厂函数：

export function createStool(): THREE.Group {
  const group = new THREE.Group();
  const seat = new THREE.Mesh(
    new THREE.CylinderGeometry(0.35, 0.35, 0.05, 32),
    new THREE.MeshStandardMaterial({ color: 0xc9a47a, roughness: 0.6 })
  );
  seat.position.y = 0.45;
  // ... 4 条腿 + 加强筋
  group.add(seat);
  return group;
}

这种「代码即模型」的方式意味着：

• 顶点密度可控（不会爆 5 万顶点的 Meshy 输出）
• 可读可编辑（开发者直接改代码调参）
• 无外部资源依赖（不需要贴图、模型文件）
• 完美适配动画系统（pivots / sockets / colliders 都在 Group 层级里）

2. Claude Code Agent Skill 集成

img2threejs 不是命令行工具，也不是 Web UI——它是一个 Claude Code Agent Skill，按 Anthropic 官方 Skill 规范打包：

# 安装技能到 Claude Code
git clone https://github.com/img2threejs/img2threejs
cd img2threejs
# 按 SKILL.md 安装指引操作

装完后，Claude Code 在对话中遇到「图片转 3D」需求，会自动调用 img2threejs skill——你只需要给它一张参考图，Claude Code 负责整个调用链：

1. Claude 分析图片，理解对象的形状、材质、结构
2. 调度 img2threejs 的 Python pipeline 生成 Three.js 代码
3. 输出结果以工厂函数形式插入到你的 Three.js 项目
4. 还能继续追问「把椅腿改成 X 型」「加个旋转动画」

整个交互是在 Claude Code 对话框里完成的，零额外工具切换。

3. 质量门控 (Quality Gated)

AI 生成 3D 代码最容易踩的坑是「外形不对、比例失真、材质丑」。img2threejs 内置质量门控：

• 多视角渲染对比参考图（基于 playwright + headless three.js）
• 自动检测关键结构（如桌腿必须有 4 条、轮子必须转动）
• 比例失真超阈值时自动重试

实测一个复杂 MIDI 键盘：参考图 → 5 次迭代 → 最终代码渲染的键盘按键数量、布局、颜色和原图 95%+ 一致。

4. Animation-Ready 输出

img2threejs 输出的 THREE.Group 自带合理的层级结构：

• 主 mesh 的 userData.partId 标注部件类型（seat / leg / wheel）
• 旋转关节单独成子节点，便于后期 rotation.y 动画
• 锚点（pivot）和插槽（socket）按常见动画需求预埋

直接 group.getObjectByName('wheel').rotation.z += 0.01 就能转起来，不用自己重新摆坐标系。

5. Token 高效 (Token-Efficient)

相比直接让 Claude 看图写代码，img2threejs 用「工具调用 + 模板代码生成」的方式大幅降低 token 消耗：

• 图片分析用专门的视觉模型（不是主对话模型）
• Three.js 代码生成走结构化模板，不是 LLM 自由发挥
• 单次生成的 token 消耗比直接 prompt 低 60-80%

对按 token 计费的 Claude API 来说，这个特性直接决定项目能不能落地。

📥 安装与使用

环境要求

• Node.js 18+ / Python 3.11+
• Claude Code（最新版）
• 一个 Claude API 账户

安装 Skill

# 克隆仓库
git clone https://github.com/img2threejs/img2threejs.git

# 按 SKILL.md 指引安装到 Claude Code 的 skills 目录
# 一般是 ~/.claude/skills/img2threejs/ 或项目内 .claude/skills/

在 Claude Code 中使用

打开 Claude Code 对话，粘贴一张参考图（用 mcp__image__* 工具或直接拖拽），然后说：

「用 img2threejs 把这张图转成 Three.js 模型」

Claude Code 自动调度：

1. 图片分析（视觉模型）
2. 形状 / 材质 / 比例提取
3. 调用 img2threejs Python pipeline
4. 生成 TypeScript 代码插入项目

整个过程 30 秒 - 3 分钟（取决于对象复杂度）。

输出集成

生成的 *.ts 文件可以直接 import 到你的 Three.js 项目：

import * as THREE from 'three';
import { createStool } from './generated/stool';

const scene = new THREE.Scene();
const stool = createStool();
scene.add(stool);

官方文档：https://img2threejs.org/skill

项目仓库：GitHub - img2threejs/img2threejs

🎯 适用场景

• Web 3D 产品展示：电商 SaaS 团队需要把产品图快速转 3D 模型上网页，传统流程一周，img2threejs 一杯咖啡。
• Three.js 教程 / 教学：老师 / 博主写教程时，懒得手敲几十行 geometry 代码，让 Claude + img2threejs 自动出。
• 概念验证 (PoC)：设计验证阶段需要快速把参考图立体化看效果，img2threejs 几分钟出活儿，比 Blender 启动快 100 倍。
• Vibe Coding 工作流：已经用 Claude Code 做 Vibe Coding 的开发者，把它当插件用，整个项目对话里随时召唤 3D 模型。
• 个人项目 / 作品集：独立开发者做作品集展示，需要一些「3D 化」的视觉元素点缀，又不想花时间学 Blender。

不太适合：超高保真度工业建模（AI 生成代码的精度远不如 CAD / Blender）；复杂曲面 / 自由形（程序化建模对正方体 / 圆柱 / 球这种 primitive 友好，曲面不规则物体能力有限）；游戏 / 电影级美术资产（需要 PBR 材质、贴图、骨骼绑定等专业管线）。

🔍 对比 / 替代方案

img2threejs 的甜蜜点非常清晰：代码即模型 + Token 高效 + 动画就绪 + 编辑友好。Meshy / Tripo 这类「图像 → 网格」方案输出的是黑盒 OBJ 文件，编辑器打开卡顿且不能改代码；直接让 Claude 看图写代码 token 爆炸；Blender 适合艺术家但学习曲线和启动速度都不友好。

横向对比 Meshy：img2threejs 输出的代码你可以 git diff 看变化，可以 PR review，可以 Code Review，团队协作友好；Meshy 输出的是 50MB 的二进制文件，团队协作基本靠网盘。

诚实缺点：项目超年轻（2026-07-15 才发布，至今 11 天），GitHub 显示 19 open issues，复杂对象（人手、动物毛发、植物）的程序化建模质量还在快速迭代；不支持纹理 / PBR 材质（纯色为主），需要高级材质得手动加；当前依赖 Claude Code 生态，离开 Claude Code 不能独立运行。

⚠️ 注意事项

1. 依赖 Claude Code 生态：img2threejs 是 Claude Code Skill，离开 Claude Code 用不了。如果你只用 Cursor / Windsurf / Cline 这类其他 AI IDE，需要等社区适配或换类似方案。
2. API 调用费用：每次生成都会调用 Claude API（视觉模型 + 主模型），按官方价格一张图约 $0.10-0.30，复杂对象多次迭代可能到 $1+。生产环境部署前先估算预算。
3. 图片质量敏感：输入图越清晰、视角越正、背景越纯净，生成质量越好。手绘草图 / 模糊照片 / 多对象重叠的图，AI 容易识别错。建议输入：单一主体 + 干净背景 + 45 度角参考图。
4. 复杂几何失败率高：球面 / 圆柱 / 平面 这种 primitive 友好的对象质量高；自由曲面（人手、动物、植物）成功率明显下降，需要多轮迭代或人工修正。
5. 无纹理 / PBR 材质：当前输出是纯色 MeshStandardMaterial，没有 PBR 贴图、法线贴图、环境光遮蔽。生产项目需要自己加纹理或后期处理。
6. 代码可读性 vs 极致简洁：输出的代码偏模板化（确保所有结构都在），精简度不如手写代码。如果对 bundle size 极敏感，建议手工精简一遍。
7. Apache-2.0 协议允许商用：可以在闭源商业产品里使用 img2threejs 生成的代码（版权归你），但保留版权声明。法律层面比 GPL 友好。
8. 项目仍在快速迭代：11 天 4.9k Stars 的爆款项目，breaking change 可能频繁，部署到生产前固定 commit hash 并订阅 release 通知。

✅ 总结

img2threejs 是 2026 年 AI 3D 工具赛道里少有的「代码即模型」派代表。发布 11 天 4.9k Stars 的爆发力证明它切中了一个真实需求：Web 3D 开发者要的不是黑盒网格文件，而是可读可改可 review 的代码资产。

推荐指数 ⭐⭐⭐⭐（4/5）：纯代码输出 + Token 高效 + Animation-ready + 编辑友好，四个差异化卖点足够在 Tripo / Meshy 这类「图像 → 网格」老牌工具里杀出一条血路。扣一星是因为项目超年轻、复杂几何仍需迭代、依赖 Claude Code 生态。

适合：Web 3D 产品展示团队、Three.js 教程创作者、PoC 概念验证、Vibe Coding 开发者、个人项目视觉点缀。

不太适合：超高保真工业建模、复杂曲面 / 不规则物体、游戏 / 电影级美术资产、非 Claude Code 用户。

如果你是 Three.js 开发者，下次产品经理丢一张「参考图让你 3D 化」时，别再打开 Blender——Claude Code 里装上 img2threejs skill，对话框拖张图进去，一杯咖啡的时间拿到可编辑的 Three.js 代码，还能继续追问「换材质、加动画、改结构」，整套体验比传统管线舒服太多。

官方文档：https://img2threejs.org/skill
GitHub：https://github.com/img2threejs/img2threejs