img2threejs 是一款在线图像转 Three.js 转换工具,用于把参考图片重建为可编辑的程序化 Three.js 模型。它不依赖 Skills、Codex、Claude Code 或本地 agent 环境,在浏览器中即可使用。
用途 它面向可编程的网页 3D 场景:把一张干净的参考图转化为浏览器原生的 3D 草稿,用于产品查看器、讲解页、配置器、落地页交互、游戏与仿真原型、教学演示、内部概念评审等场景。输出以代码优先的形式存在,便于放进 Three.js 项目与 Git 工作流。
主要能力
- 图像分析:寻找物体轮廓、可见组件、材质线索、重复部件、朝向以及让主体可辨识的微小细节。工具区分“直接证据”和“推断”,可见的把手或铰链可以被自信建模,而未露出的背板只能近似。
- 程序化构建:把观察到的部件映射为程序化几何体、材质、位置、旋转和父子关系。规格在渲染前经过校验,由确定性构建器组装层级,而不是执行任意生成的代码。
- 交互预览:可环绕观察结果、切换材质视图、查看 JSON 规格。
- 导出:下载带类型的 Three.js 工厂代码(返回可复用的 THREE.Group)以及结构化 JSON 构建规格。
- 可编辑性:下载的代码可改名部件、调整尺寸、替换材质、挂接事件,或把后续动画连接到具名组件。
- Agent 迭代:购买 credits 后可使用 Agent 生成高级模型并进入反复查看—修正的循环。
使用方式 上传一张 PNG 或 JPG,要求物体清晰可见;登录并确认 Agent 的 credit 报价;工具分析参考图并构建程序化模型,从多个视角检查并修正薄弱细节,然后保存结果。之后可环绕模型、检查结构,并下载 TypeScript 工厂或 JSON 规格。Simple 生成消耗 50 credits,standard 为 80,complex 为 100;注册不包含免费 credits,确认前会显示确切价格。
适用场景
- 用干净的产品照片为产品查看器、讲解器、配置器和落地页交互生成浏览器原生草稿;具名组件便于高亮某个特征、替换材质、响应点击,或把产品状态连到特定部件。
- 在投入最终建模、贴图、碰撞体和动画前,先以具名部件规划可辨识的道具,理清物体如何组装、哪些部件应移动、后续高精资产应在哪里保留结构。
- 从熟悉参考出发,保留可读的 TypeScript,便于创意编程者改变尺寸、颜色、重复元素或相机行为。
- 结构化 JSON 也可让 AI 编程助手在受限描述内编辑,而非面对开放式视觉提示。
限制 一张图不包含背面、底面、精确比例或被遮挡的连接。隐藏表面依据主体类别和可见证据推断,而非实测。有机解剖、头发、布料、透明材质、复杂车辆曲面和精确人像仍需专业 3D 工具。输出是近似而非摄影测量级扫描网格;不导出 GLB、OBJ、FBX 或 STL,主要输出是可编辑 Three.js TypeScript 加结构化 JSON 规格。它不承诺完成绑定或自动动画,复杂形变、角色蒙皮、物理和成品运动仍需额外实现。参考图会经服务器发送至 OpenRouter 及配置的下游 AI 模型做视觉分析与生成,请勿上传机密图像、个人数据或未获授权的素材。商业使用需自行确保图片权利并审查输出,注意受保护设计、商标、机密参考或第三方素材。