推荐一个把图片变成 Three.js 代码的 Skill

Meng To 在 X 上分享 img2threejs

最近安装了一个很有意思的 Skill，叫 img2threejs。它的用途很直接：给它一张物体参考图，它会尝试用 Three.js 代码重新搭建几何体、材质和对象层级。

最终得到的不是一张新的效果图，也不是从网上下载的 3D 模型，而是一套可以在浏览器里运行和继续修改的程序化 3D 场景。

我平时用 AI 做设计，经常遇到一个问题。生成一张“看起来不错”的图已经不难了，真正麻烦的是下一步。

比如图里的耳机整体方向是对的，但耳罩太厚，材质像廉价塑料，镜头角度也不适合网页首屏。我想改的可能只是其中一处，最后却只能重新生成整张图。新一版解决了耳罩，灯光又变了；灯光对了，产品结构又跑掉了。反复几轮，很像在抽卡。

对我这种既做 UI 又写前端的人来说，这种失控感尤其明显。我要的通常不只是一张最终效果图。我还想让物体跟着页面滚动旋转，点击时拆开某个部件，或者在手机端主动降低材质和阴影成本。一张图片再漂亮，也很难直接进入这些后续工作。

这正是 img2threejs 想解决的部分：把静态参考图继续变成一份可以修改和开发的 3D 资产。

它在公开演示里的完成度很高，但演示不能代替自己的项目环境。我把 Skill 安装到本地，找了两张复杂度不同的参考图，实际做了两轮。

它没有生成一个模型文件

常见的图片转 3D 工具，会输出一份网格或贴图。img2threejs 走了另一条路：它让编码 Agent 根据参考图，用 Three.js 基础几何体、程序化材质和生成的几何结构重新搭出物体，最终输出一个 TypeScript 的 `THREE.Group` 工厂。

换句话说，交付物是一段能读、能改、能运行的前端代码。

颜色不对，可以改材质参数；比例不对，可以调整对应部件；结构需要拆开，可以直接操作层级；想做入场、旋转或滚动联动，也不需要先回到建模软件重新导出。

这种结果未必比专业建模师制作的资产更精确，但它与网页开发之间的距离很短。对于概念验证、互动提案和短周期品牌页面，这一点非常重要。

真正有价值的是“可编辑”

AI 生成的静态视觉，通常只解决了“看起来像什么”。可编辑的 3D 代码还能回答另外几个问题：

物体由哪些部件组成？
每个部件使用什么材质？
镜头靠近时，哪些细节需要保留？
滚动、悬停和点击分别控制什么？
移动端需要删掉哪些高成本效果？

这些信息决定了一张图能不能真正进入产品。

对设计师来说，最直接的变化是反馈变具体了。我们不再只能说“这里不像”，而是可以指出耳柄太长、金属高光太硬、转轴位置不对，或者主体层级不适合做拆解动画。设计判断开始对应到可修改的结构。

我们真的拿两张图试了一次

为了确认它不只是演示效果，我们把 Skill 安装到本地，连续做了两轮重建。两次都没有使用原作者的 3D 模型，场景里的几何体、材质、灯光和动画全部由 Three.js 代码生成。

第一轮：复杂场景，差距很明显

输入是一张“手机外壳变成微型仓库”的 3D 视觉。画面里同时包含手机、开放货仓、货架、纸箱、货车、围栏和信号杆。

第一轮输入：手机仓库参考图

下面是第一轮输出。

第一轮输出：程序化 Three.js 重建

主体关系被识别出来了：手机外壳、货架、纸箱、货车和围栏都可以旋转查看，也能继续修改。但视觉差距同样明显。

叉车和货车由基础几何体拼成，缺少真实机械结构；金属外壳没有原图里的精细倒角和复杂反射；货架、轮胎、液压部件与围栏都被大幅简化。代码是可编辑的，模型却仍然像一份结构草模。

这次失败暴露了 Skill 的核心限制：场景越复杂、独立零件越多，单张图片提供的信息越不够。Agent 可以推测“这里有一辆车”，却无法从像素里恢复专业建模师已经做好的全部结构。

第二轮：规则物体，结果明显改善

第二张图换成集装箱市场。主体仍然不少，但集装箱属于标准化、重复性很强的硬表面物体，轮廓和排列关系也更清楚。

第二轮输入：集装箱市场参考图

我们重新制作了带波纹板、边框和门锁杆的集装箱模块，再复用它完成阵列；中央加入悬浮白色集装箱，周围补上两台叉车与广告牌。

第二轮输出：集装箱市场程序化重建

第二轮的构图和视觉语言已经更接近输入。原因不是模型突然变聪明了，而是参考对象本身更适合程序化重建：形体规则、重复模块多、材质种类少、隐藏结构也容易推测。

下面是实际浏览器录屏。画面支持拖动旋转、滚轮缩放，中央白色集装箱还有轻微悬浮动画。

第二轮成品浏览器录屏

即使如此，叉车仍然偏简化，集装箱也缺少工业模型级别的角件、铰链、焊缝和磨损。想做到商业渲染的真实度，仍然需要 Blender、C4D 或经过许可的精细 GLB 模型，再交给 Three.js 负责网页交互。

这两次测试之后，它的定位更清楚了：适合把参考图快速变成可运行、可修改的 3D 原型；不适合承诺从一张图恢复专业建模师的原始作品。

它怎样避免只做出一张像样的截图

img2threejs 的 GitHub 项目页面

img2threejs 的流程不是一次生成后直接交付。项目把重建拆成多个阶段：先分析参考图和目标，再做体块、结构、形态、材质、表面、灯光、交互与优化。

每个阶段都会渲染当前结果，与参考图比较，再进入下一轮修正。这个“渲染—比较—调整”的循环，比单纯要求模型写出一段 Three.js 代码更可靠。

它还设置了质量门槛：结构、比例、轮廓或材质没有达到预期时，任务应该继续修正，而不是因为代码能运行就宣布完成。

这里最值得借鉴的不是某一条提示词，而是工作方式。AI 负责快速搭建和迭代，人负责确定什么叫“足够像”、什么叫“适合这个项目”。

对品牌官网有什么用

img2threejs 的真实项目演示页面

从项目展示看，这套方法目前更擅长轮廓明确、结构清楚的硬表面物体，例如耳机、相机、手柄、机械装置和包装容器。

它可以进入几类常见的品牌官网场景：

滚动叙事。 主体跟随页面滚动旋转、拆解或靠近，让产品卖点与结构变化同步出现。

产品演示。 用户切换颜色、材质和部件状态，比播放一段固定视频更有参与感。

互动提案。 在正式建模之前，快速做出可以运行的方向稿，用来判断镜头、节奏和交互是否成立。

视觉原型。 把 AI 生成的概念图转成浏览器中的 3D 草模，再交给设计师和开发者继续打磨。

这些场景不要求模型达到工业设计或影视制作的精度，却很看重迭代速度和网页可控性。程序化代码正好落在这个区间。

哪些场景先别用

一张图片看不到物体背面，因此隐藏结构只能推测。参考图透视过强、遮挡严重或材质反射复杂时，结果也更容易偏离。

柔软织物、头发、真实人物和复杂有机形态，不是这套方法当前最稳的对象。需要制造级尺寸、CAD 精度或高度写实人物时，仍然应该使用专业建模流程。

程序化生成也不等于天然轻量。几何体数量、Shader、阴影、像素比和后期效果都会影响浏览器性能。桌面端效果成立之后，还要单独检查手机帧率、发热、加载时间和触摸操作。

因此，它更像一条高效率的创意开发路径，而不是通用的 3D 替代方案。

我会怎么把它放进工作流

如果用于品牌网站，我会按这个顺序推进：

先选一张轮廓清晰、遮挡少、材质关系明确的参考图。
写清需要保留的识别特征，以及可以接受的简化范围。
生成第一版结构，优先检查轮廓、比例和相机，不急着做灯光特效。
阅读对象层级，确认关键部件可以单独控制。
再调整材质、环境光、镜头和动画节奏。
最后做移动端降级、资源释放和性能检查。

其中第二步最容易被忽略。没有明确的验收标准，Agent 会不断增加细节，却不一定更接近设计目标。

AI 设计接下来的机会，可能不只是生成更多图片。更值得关注的是：如何把图片继续转成能修改、能交互、能进入真实产品的资产。

img2threejs 还处在快速迭代阶段，但它已经展示了一个很清楚的方向——生成结束之后，设计工作仍然可以继续。