做产品展示页，想让耳机在屏幕上转起来；做小游戏，需要一个能开合的宝箱；做创意网页，希望画面里有一座立体小屋。
参考图已经有了，卡住你的，可能是建模这一步。
今天这个开源项目 img2threejs，提供了一条有意思的路线：让 AI 看着图片，用代码把物体重新搭出来。
最后留下的，是可以继续编辑的 Three.js 模型。改颜色、调整部件、接入交互，都有代码可以追下去。
演示画廊：参考图片与可交互的三维结果同屏展示。一张参考图，怎么变成三维物体？
可以把它理解成一次“看图搭积木”。
AI 先观察物体的轮廓、比例和结构，把它拆成多个部件，再用基础几何体、程序生成的曲面和材质重新组合。
例如一副耳机加充电盒，需要处理盒身、盒盖、耳机，以及它们之间的位置关系。倒角、接缝、光泽这些小细节，也会进入分析清单。
对应到技术上，主要产物是 TypeScript 模型生成函数和 JSON 结构说明。前者负责创建模型，后者记录部件、材质等信息，后续修改有据可循。
耳机与充电盒模型示例：多个部件共同组成一个完整物体。先搭对轮廓，再补材质细节
AI 建模容易出现一种情况：远看挺像，转个角度，结构就露馅了。
img2threejs 把制作拆成八个阶段：粗模、结构、形体、材质、表面、灯光、交互和优化。每一步都设有检查要求，通过后才继续往下走。
先确认大形和比例，再增加漂亮的表面效果。如果底层结构不对，就回到对应环节修，而不是一路叠细节。
过程中会把参考图和浏览器渲染结果放在同一张对照图里。脚本负责格式、结构与流程检查，AI 负责视觉判断，并记录需要修改的地方。
你也可以把修改意见说得具体一点：“盒盖太厚”“耳机间距太大”“金属反光太强”。对照明确的部件提出要求，比笼统地说“再像一点”，更容易判断下一轮改动有没有解决问题。
模型有了，代码也在你手里
对前端开发者来说，这一点很实在。
生成结果可以作为 Three.js 对象组接入场景。模型还能组织旋转轴、挂接点、碰撞体等运行时结构，为动画和交互提供基础。
比如给盒盖安排一个合理的转轴，之后写开合动作，就能围绕这个部件控制。实际能动到什么程度，仍取决于具体模型的结构与验证结果。
代码形式也方便做版本管理：这一轮改了什么尺寸、换了什么材质，可以直接比较，而不是靠几个相似的文件名猜版本。
等距小屋模型示例：屋顶、围墙与街道共同构成立体场景。它是一套 Skill，需要配合编程助手
img2threejs 主要面向 Claude Code、Codex、OpenCode 这类编程助手。使用时，需要让助手能读取图片，并具备相应的代码执行和渲染查看能力。
以 Claude Code 为例，可以把仓库放进技能目录：
git clone https://github.com/img2threejs/img2threejs.git \
~/.claude/skills/img2threejs
随后附上图片，调用技能并描述目标：
使用 img2threejs 重建图片里的物体，保留主要比例与颜色。先检查轮廓，再补细节，并说明哪些部分是推测的。
核心脚本使用 Python 3.10 及以上版本的标准库；显示模型还需要 Three.js 项目环境。人物绑定等专项流程可以按需扩展插件。
能节省重复劳动，但还要留好预算
项目把校验、状态记录、对照图整理等机械工作交给脚本，尽量把模型调用花在看图判断和写代码上。
这是一种减少重复工作的设计，不能直接等同于固定省下多少费用。图片复杂度、修改轮数和使用的模型，都会影响耗时与调用成本。
项目采用 Apache 2.0 许可证，使用编程助手和模型服务时，仍需考虑各自的费用。
适合从一个简单物体开始
单张图片看不到物体背面，也无法准确说明内部结构。被遮住的位置只能推测，不能把“看起来像”当成精确复原。
轮廓清楚、结构明确的物体更适合起步。复杂人物、头发和宽松衣物，对形体与细节的要求更高，需要更谨慎地检查效果。
第一次尝试，可以选背景干净、遮挡较少的产品图，先做一个能旋转查看的模型。确认比例和结构可用，再增加动画与交互。
如果你正在做网页 3D 展示、交互原型，或者想学习程序化建模，img2threejs 提供了一个值得研究的入口：从一张图开始，最终得到一份可以接着改的作品。
项目地址：https://github.com/img2threejs/img2threejs
