如何将图片转换为简洁的 Three.js 代码，无需繁重的网格和神经网络

大多数从图片生成 3D 的工具输出的是笨重的二进制文件。结果往往是密密麻麻的网格，包含数十万个多边形、涂抹的烘焙纹理，而且无法在代码中手动调整任何东西。如果你需要一个简单的模型用于网站交互或浏览器中的轻量级场景，你不会想为了一个对象而加载一个五兆字节的 GLTF 文件。

img2threejs 项目从不同的角度解决了这个问题。它不是使用摄影测量和多边形网格导出，而是分析图片并为 Three.js 生成程序化 TypeScript 代码。模型在运行时由基本图元、着色器和数学曲线组装而成。

底层原理

核心概念很简单：生成的模型应该是源代码，而不是笨重的二进制资源。你向脚本输入一张照片或艺术作品，它会返回一个工厂函数 createObjectNameModel()，该函数返回一个常规的 THREE.Group。

在这个对象内部，节点层级已经定义好了：

• 旋转点（枢轴）和用于附加物品的插槽。
• 用于点击处理和物理的碰撞体。
• 组件中的 userData.tick 方法，用于持续的后台动画。
• 响应场景光照的程序化材质，而不是烘焙进去的。

代码被组织成清晰的层级。你可以在编辑器中打开它，在几分钟内调整圆角半径、改变金属粗糙度或重写动画逻辑。

为什么 LLM 不会因为 Token 消耗而发疯

如果你强迫语言模型根据图片从零开始编写 Three.js 场景，它会很快耗尽整个上下文，盲目地猜测坐标。img2threejs 的创建者将工作分配给确定性脚本和神经网络视觉代理（如 Claude Code 或 Codex）。

所有常规工作都卸载到纯 Python 3.10 的本地管道中，零外部依赖。不需要 Pillow 或 PyTorch 等重型库：PNG 解析和颜色计算通过标准模块 struct 和 zlib 完成。

脚本处理机械部分：

• 将参考图分割成材质区域，使用 CIEDE2000 公式分析调色板。
• 构建中间对象规范 ObjectSculptSpec。
• 如果描述缺少关键元素，则验证组件尺寸和块组装，直到代码生成。
• 组装比较清单（原始图与当前渲染并排显示）。

模型将 token 专门用于决策：它查看配对的渲染图像，判断当前步骤是否通过验证，或者几何是否需要调整。

组装遵循严格的阶段：从粗略草图到结构，然后到形态、材质、光照和最终优化。如果模型试图作弊，用纹理绘制应该是真实几何的东西，内部验证会拒绝通过并将代码发回进行修正。

系统在实际中的表现

仓库中有一个包含实时示例的画廊，你可以在浏览器中旋转每个对象并立即查看生成的 TypeScript 代码。

演示包括 CS2 中的详细武器皮肤、BMX 自行车、充电盒中的耳塞，以及等距房屋沙盘。该工具特别擅长处理硬表面物体。小倒角、螺丝切口、面板接缝以及从哑光塑料到光泽的过渡都能高精度地分解成基本图元。

一个单独的生产分支专为角色和动物设计。脚本标记面部解剖学锚点和身体比例，试图保持轮廓可识别性，尽管你不应该期望输出是逼真的人体扫描。

如何运行和尝试

最快的集成方法是将项目添加为 Claude Code 或 Codex 的技能。只需将仓库克隆到代理的工作文件夹中：

git clone https://github.com/img2threejs/img2threejs.git ~/.claude/skills/img2threejs

之后，你可以在代理聊天中附加图片并调用命令：

/img2threejs Собери этот предмет в виде модели Three.js, сохрани пропорции и цвета.

如果你想通过终端手动运行步骤，脚本直接从 forge 目录启动：

python3 forge/stage1_intake/probe_image.py reference.png
python3 forge/stage2_spec/new_pre_spec_assessment.py "MyModel" --image reference.png --out assessment.json
python3 forge/stage2_spec/new_sculpt_spec.py "MyModel" --image reference.png --assessment assessment.json --out spec.json
python3 forge/stage2_spec/validate_sculpt_spec.py spec.json --strict-quality
python3 forge/stage3_build/generate_threejs_factory.py spec.json --out src/createMyModel.ts

输出时，你会得到一个准备好的 createMyModel.ts 文件和一个包含所有构建参数的 JSON 清单。

诚实的局限性

项目作者对适用性边界直言不讳。从一张照片来看，不可能 100% 重建对象的隐藏面。如果参考图没有显示物品的背面，系统要么镜像正面几何，要么进行谨慎的猜测，并将该区域标记为低细节。

该工具不会取代专业 3D 建模师来创建带有绑定的复杂 AAA 角色。它的定位是快速生成交互式物品、环境、小部件和沙盘，在这些场景中零包体积和完整的代码可读性至关重要。

总结

这个项目绝对值得使用 Three.js 的 Web 开发者和独立游戏创作者收藏。如果你厌倦了手动从立方体和圆柱体组装简单的 3D 资源，或者在登录页上加载笨重的网格，img2threejs 的方式可以节省大量常规工作。你得到的是轻量级、可扩展的代码，完美契合类型化的前端。