看到一个好看的产品图、机械装置、游戏道具，想做成可交互的 3D 模型放网页里？img2threejs 能把一张参考图重建成可以动画的 Three.js 模型，输出结果很高级，而且是纯代码重建，随便改。
项目定位
这是一个图片转 Three.js 3D 模型的 Agent Skill，定位是「2D 图到 3D 代码模型的转换器」。给它一张参考图，它分析物体结构、材质、细节，用纯代码生成一个可在浏览器运行的 Three.js 模型，不是导出 mesh，而是生成可编辑的代码。
核心亮点
-
纯代码重建路线，可二次编辑
明确选择纯代码重建，用基础几何体、程序化着色器和生成式几何重新搭出参考图里的物体。想换颜色、移动零件、给机关加动画，直接改代码就行，比 mesh 模型灵活太多。
-
先评估再开工，不瞎写
不是让智能体看一眼图片就开始乱写代码。它会先检查图片是否适合重建，再评估物体类型、复杂度和质量目标，生成代码前还要整理一份 detailInventory，把倒角、螺丝、刻线、光泽、污渍这些决定辨识度的细节列出来，安排真实的组件或材质实现。
-
分阶段制作，每轮视觉校验
结构搭建 → 形体细化 → 材质 → 表面细节 → 灯光 → 交互结构 → 优化，分七个阶段逐步制作。每完成一轮，都在浏览器里渲染模型，截图和原始参考图放一起做视觉检查，不对就改，通过了才解锁下一轮，质量有保障。
-
多 Agent 工具支持
支持 Claude Code、Codex 和 OpenCode，安装简单，附上一张图就能开始重建。
快速上手
npx skills add img2threejs/img2threejs -a codex
# git:
git clone https://github.com/img2threejs/img2threejs.git ~/.claude/skills/img2threejs
# 使用
/img2threejs 把这个物体重构成Three.js模型，保持原有的比例、角度和颜色。
适用场景
产品展示页、浏览器小游戏、交互式官网、需要 3D 展示的电商页面、想快速把参考图变成可交互 3D 模型的开发者。
项目信息
- 仓库：img2threejs/img2threejs
- 类型：Agent Skill
- 项目地址：https://github.com/img2threejs/img2threejs