跳转至

📄 文章总结：《又一个神级Skill，扔进去一张图直接变成可交互的3D模型！》

公众号： 极客之家 | 分类： tools | 收录日期： 2026-08-11 原链接： https://mp.weixin.qq.com/s/m-b_Wq0a4dT42bRlf0H34w

结构化总结：img2threejs —— 图片直接变成可交互 3D 模型

一、项目背景与核心亮点

  • 作者在 GitHub Trending 上发现一个 7 月 15 日才创建的仓库 img2threejs，11 天斩获 5.3k Star。
  • 与常见的“图片转 3D”项目不同，它不调云端 API，也不输出网格文件，而是生成代码。
  • README 开头明确写道：“不生成网格，生成代码。” 输入一张参考图，输出一段 TypeScript，一个 Three.js 的模型工厂函数，可直接在浏览器运行。

二、项目是什么

  • img2threejs 是一个运行在 Claude Code、Codex、OpenCode 里的 skill。
  • 用法：喂一张物体照片，它用基本几何体和程序化着色器，把物体用代码重新“捏”出来。
  • 输出不是死模型，而是带完整运行时层级：关节点、挂接点、碰撞体都有，可直接绑定动画。
  • 官方画廊展示的成品包括：CS2 的 Glock-18、M9 刺刀、经典刀，索尼 WF-1000XM3 耳机（含充电盒），BMX 单车，哆啦A梦的房子等，均可在浏览器中旋转查看，源码公开。

三、核心能力详解

1. 照片进去，代码出来

  • 普通图片转 3D 产出网格文件，难以改动；img2threejs 产出 TypeScript 工厂函数，返回 THREE.Group。
  • 模型本质是文本，能 diff、能进 git，改颜色只需改代码，无需打开 Blender。
  • 输出分两部分：
  • JSON 规格书：记录组件树、材质、挂接点和每道工序的评审记录。
  • 工厂代码：纯 TypeScript。
  • 全程无二进制文件。官方 demo 中的“Gerber 伞绳刀”就是全程无网格文件、纯代码的典型例子。

2. 模型出来就能上动画

  • AI 生成 3D 模型的通病是零件（如把手、轮子）与主体分离，渲染后悬空飘着。
  • 本项目要求子零件必须声明如何与父级连接，模型通过 root.userData.sculptRuntime 暴露关节、挂接点、碰撞体和破坏分组。
  • 官方称此为 animation-ready，通俗讲就是：不是一坨摆件，而是能上骨架的货。

四、八道工序，不合格不让过

  • 不追求一把出结果，建模被拆成八道固定工序：
  • 粗胚、结构、外形修正、材质、表面、灯光、交互、优化
  • 每道工序完成后，必须渲染出图，与参考照片拼接成对比图，由 agent 的视觉能力打分。
  • 分数不够有两种下场：
  • 规格书写浅了 → 回去改规格；
  • 代码没跟上规格 → 回去改代码。
  • 未达标前，下一道工序锁死。作者评价：这等于给 AI 建模上了 Code Review 流水线，肯给自己加闸门的项目少见。

五、可以极大节省 token

  • 验证、切图、打包对比图、流程状态等机械工作全部由 Python 脚本完成。
  • 脚本纯标准库，Python 3.10 即可运行，零依赖，连 PNG 读写都是自己用 struct 和 zlib 实现的。
  • 大模型的 token 只花在“看对比图判断过/不过”上；代码生成器每次只输出当前解锁的工序，不让模型反复通读整个模型。

六、CS2 武器与角色能力

  • v1.4 版本叫 “The Weapon Update”，专门适配 CS2 武器皮肤。画廊中十来个成品，CS2 武器占三个。
  • 作者为刀和 Glock 分别定义了结构契约：零件覆盖率不够、拿贴图冒充结构的，评审直接拦下。
  • CS2 玩家可把库存皮肤截图丢进去，生成一个能在网页里旋转查看的版本。
  • 人物和角色也可生成，走另一条解剖学路线：头身比例、面部标志点、姿态都有约束。
  • 作者明确说明：角色是风格化重建，别指望照片级还原本人。

七、上手命令

  • 克隆仓库到 Claude Code 的 skills 目录： 
    git clone https://github.com/img2threejs/img2threejs.git ~/.claude/skills/img2threejs
  • 在 Claude Code 中贴图并输入： 
    /img2threejs Rebuild this object as a Three.js model, keep the proportions, angles, and colours.
  • 后续自动执行：分类物体、盘点细节、逐道工序推进，每步展示对比图。
  • 不限定宿主，Codex / OpenCode 同样可用；只需 Python 3.10+，零依赖。

八、适用场景

  1. 官网/活动页 3D 展示：产品图进，可交互模型出，纯代码加载快。
  2. 游戏原型：占位模型自带挂接点和碰撞体，美术资源到位后替换。
  3. CS2 玩家整活：把武器皮肤做成网页 3D 挂个人主页。
  4. 演示汇报：实物照片变 3D 嵌进页面，比 PPT 截图更有说服力（如哆啦A梦房子）。

九、作者看法

  • 先泼冷水：单张照片看不到背面，遮挡部分处理不了，看不见的面靠镜像推断。作者在 README 中写得明白：“这张图达不到要求的精度，也是一个正常结果。”
  • 项目价值不在“AI 会捏 3D”，而在把质量控制做成流程：八道工序、对比图打分、打回重做，把 AI 生成从“抽卡”变成“工程”。
  • 省 token 是同一思路：脚本干机械活，模型只看图下判断。
  • 作者非常看好这个方向，认为“这才是 AI 应该干的活儿”。roadmap 已排到 v2.0，包括环境重建、Unity/Unreal 导出、自动绑骨。

十、开源地址

  • https://github.com/hoainho/img2threejs

🎯 Friday 提炼

  • 核心创新：用代码而非网格文件来“捏”3D 模型，输出可直接运行的 Three.js 工厂函数，天然支持 diff 和版本管理。
  • 动画就绪：通过 root.userData.sculptRuntime 提供关节、挂接点、碰撞体，生成结果不是静态摆件，而是能上骨架的可动模型。
  • 工业级流程：八道固定工序 + 视觉对比打分 + 未达标锁下一道工序，把 AI 建模从“抽卡”变成“工程”。
  • 极致省 token：机械工作全交给零依赖 Python 脚本，大模型只判断“过/不过”，每次只生成当前工序代码。
  • 场景明确：CS2 武器是当前主场，也覆盖产品展示、游戏原型、角色重建等；缺点是单图背面靠镜像推断，精度不足是正常结果。

一句话： img2threejs 用“生成代码而非网格”的方式，配合八道工序的视觉验收流程，让一张普通照片变成动画就绪、可交互、可进 git 的 Three.js 3D 模型。

💡 Friday 看法

这个项目最戳我的点不是“图片转3D”，而是它把AI生成从“抽卡”变成了“走流程”——八道工序卡质量、不合格就返工，这才是AI工具该有的样子。作为日常拿AI写代码的人，我太懂那种“一把梭输出但没法改”的痛了，输出纯代码意味着可diff、可review、可复用，这比生成一个死模型实用一个量级。不过我也同意作者泼的冷水，单张图看不到背面，遮挡和拓扑估计还是靠猜，真到复杂模型大概率还是拉胯。总之是个好方向，起码让我看到了AI建模从“能看”到“能用”的可能。