扔给 AI 一张图，它还你一段可动画的 Three.js 代码

丢给 AI 一张产品图，它直接给你一段 Three.js 代码——跑出来就是一个可旋转、可编辑、可加动画的 3D 模型。这不是 PPT 效果，这是真实可用的 WebGL 代码。

最近挖到一个让我眼前一亮的设计+AI 类 Skill：img2threejs。它做的事情非常明确——把一张参考图，变成一段纯代码驱动的 Three.js 程序化 3D 模型。

不是输出模型文件，是输出代码

传统 AI 图生3D 工具，输出的是 mesh 文件——obj、glb、fbx，拿来还得导进 Blender 修，修改成本极高。

img2threejs 完全不同。它重建的不是贴图/网格，而是用代码 primitives（盒子、圆柱、球体）+ procedural shaders 组合出来的 3D 形态。输出是一段 TypeScript factory 函数，干净、可读、可维护。

生成的代码直接 return 一个 THREE.Group，里面自带 pivots、sockets、colliders——这些是专门为动画和交互设计的，接入 Tween.js 或任何动画框架直接能用。

八步质量门控，结果交给 AI 视觉判断

这个 Skill 的核心是一个分阶段雕刻管线（staged sculpting pipeline），每一步都必须通过质量门才进入下一步：

• Blockout → 结构定形
• Structure → 组件层级
• Form → 曲线曲面
• Material → 材质颜色
• Surface → 缝线/倒角/高光
• Lighting → 光影打光
• Interaction → 挂载点和骨骼
• Optimization → 轻量化

每一 pass 结束，AI 会截一张渲染图，和原始参考图做逐区域对比评分——只有关键特征全部过关才放行。哪个细节不对就打回重做，不会带着瑕疵流到下一阶段。

零依赖安装，token 高效

这个 Skill 的所有脚本全是 Python 3.10 标准库，不依赖 numpy、PIL、Playwright。装进 Claude Code 直接当 slash command 用：

/img2threejs Rebuild this object as a Three.js model, keep proportions, angles and colours.

上传一张照片，AI 自动完成：图像验证 → 细节清单建立 → 分阶段生成 → 质量对比 → 输出 TypeScript 代码。全程不用手动干预。

GitHub 信息

https://github.com/hoainho/img2threejs

⭐ 15.8k stars | MIT License | 2026年7月上线

适用场景：游戏道具/产品原型/电商展示/互动演示。丢一张图进去，拿出一段代码出来——设计资产进入代码库，版本控制、协作都和写代码一样简单。

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