|

让模型写 Three.js 而不是直接生成 3D 文件：代码中间层工作流的 5 个启示

作者Shark
让模型写 Three.js 而不是直接生成 3D 文件：代码中间层工作流的 5 个启示

作者注：以 Qwen3.5-4B-GLB-3D-Coder 为例，拆解“文本→Three.js→GLB”的代码中间层工作流，并给出可落地的操作步骤。

让大模型直接产出可用的 3D 文件，是很多独立开发者和小型游戏团队都遇到过的难题。一个 4B 参数的社区微调模型给出了另一种思路：让模型写 Three.js 代码，再由浏览器导出 GLB，把生成和导出拆成两步。

这不是又一篇 text-to-3D 工具盘点。 Qwen3.5-4B-GLB-3D-Coder 导出的资产已能导入 Godot 编辑器，社区开发者 Naoki Kishida 还用它生成的资产做出了可游玩的 3D RPG 演示。本文关注的是这条链路背后可以复用的工程方法。

核心价值：读完本文，你将理解代码中间层为什么有效，并学会在本地或云端跑通从提示词到 Godot 资产的完整流程。

llm-threejs-code-intermediate-layer-workflow-image-0

Three.js 代码中间层核心要点

代码中间层是指：模型不直接输出最终的二进制文件，而是输出一段可以运行的程序，再由这段程序生成最终产物。在这个案例中，模型输出的是一个独立的 HTML 文件，其中包含 Three.js 场景和一个“Export GLB”按钮。

要点 说明 对开发者的价值
模型输出 单个 HTML 文件，内含 Three.js 场景与导出按钮 可以直接阅读和修改，不是黑盒文件
最终产物 在浏览器中点击按钮后下载 GLB 可导入 Godot 等支持 GLB 的工具
训练范围 覆盖角色、武器、载具、模块化建筑等 25 个游戏资产领域 一个工具可覆盖原型阶段的多数占位需求
运行方式 提供 Q4_K_M 与 Q8_0 两种 GGUF 量化版本 可通过 LM Studio 等工具本地运行
质量定位 低多边形游戏资产，不面向写实或影视级制作 适合原型、占位和风格化项目

需要说明的是，Qwen3.5-4B-GLB-3D-Coder 是开发者 CCORE 基于 Qwen/Qwen3.5-4B 微调的独立预览版，并非 Qwen 官方发布。按照模型卡的说法，多数生成结果首次即可使用，英文提示词尤其如此，但部分资产仍需重试或手动修改代码。

Three.js 代码中间层的工作流程

整条链路可以概括为六步：输入描述、生成 HTML、保存文件、浏览器预览、导出 GLB、导入引擎。其中前两步交给模型，导出由浏览器中运行的代码完成，模型不需要直接拼写 GLB 的二进制内容。

如果资产需要运动，比如一扇会打开的门，系统提示词会要求模型添加动画并将其包含在导出的 GLB 中。没有明确要求时，模型默认生成静态资产。因此，提示词里要明确写出动画需求。

llm-threejs-code-intermediate-layer-workflow-image-1

Three.js 代码中间层的 5 个工作流启示

下面的对比是我们基于这个案例做出的工程判断，并非跑分结果。不同的 3D 生成方案各有适用范围，这里只比较两种思路的结构性差异。

对比维度 直接生成 3D 文件 Three.js 代码中间层
模型输出 网格或二进制资产 可读的文本代码
出错后的处理 通常需要重新生成或进入建模工具修补 可以局部修改几何体、材质和动画
导出前预览 依赖专门的查看工具 浏览器打开 HTML 即可查看
动画支持 取决于具体的模型和管线 可由代码描述，并随 GLB 导出
擅长的范围 视具体方案而定 结构清晰的低多边形资产
主要局限 产物不易做细粒度编辑 高细节或写实资产不在设计范围内

llm-threejs-code-intermediate-layer-workflow-image-2

启示一：选择模型擅长的表示层。 编码模型的强项是输出结构化文本，Three.js 正好把 3D 资产转化成了一个编程问题。这个模型只有 4B 参数，却能承担资产生成任务，关键就在于任务被转换成了它能够处理的形式。

启示二：让中间产物可以被检查。 HTML 文件既是生成结果，也是调试入口。材质放错或动画循环出错时，往往可以手动修补，不必从头生成，这大幅降低了单次失败的代价。

启示三：把最后一步交给确定性工具。 文件格式的细节不必由概率模型逐字节负责。Three.js 生态本身有 GLTFExporter 这类导出能力，模型只需写出调用导出的逻辑。一般而言，交给成熟工具的环节越多，格式层面的不确定性就越小。

启示四：窄任务加固定约定，比泛化能力更实用。 这个模型的系统提示词是固定的，输出形式也被严格限定为单个 HTML 文件。同时，25 个领域的训练数据又保证了资产类型的覆盖面。任务边界清楚，小模型才有足够的发挥空间。

启示五：在真实目的地做验证。 浏览器里好看并不代表资产可用，模型卡同时展示了导入 Godot 编辑器后的结果。作者的下一步目标也与此相关：实现可靠的一次生成，并在 Agent 框架内自动完成生成、测试和优化。

这套思路并不局限于游戏资产。OpenSCAD 脚本可以生成 CAD 模型，Blender Python 可以驱动建模流程，SVG 和 Mermaid 可以描述图形与图表。只要目标格式难以直接生成，就可以先问一句：有没有一层代码能够稳定地产出它？

技术建议：如果想比较不同模型编写 Three.js 的效果，可以通过 API易 apiyi.com 用同一套提示词调用多个模型，再用下文的验收清单统一评估。

Three.js 代码中间层快速上手：本地部署

下面以 LM Studio 为例，全程无需编写额外代码。LM Studio 可以直接加载 GGUF 模型，你可以在模型浏览器中搜索 Qwen3.5-4B-GLB-3D-Coder，也可以从 Hugging Face 下载文件后在本地加载。

第一步：选择 GGUF 量化版本

模型卡没有公布精确的显存需求，因此请结合自己的硬件实际测试。CPU 推理也可行，但速度会明显变慢。

版本 特点 建议场景
Q4_K_M 文件较小，内存占用较低，推理更快，质量有一定折损 笔记本 GPU、配置有限的设备、快速迭代
Q8_0 文件较大，更接近完整精度 显存充裕，希望提高复杂资产的首次成功率

注意版本更新：两个量化版本都在 2026 年 11 月 2 日替换过权重，作者称视觉质量有明显提升，但文件名没有变化。如果你在此之前下载过，建议删除后重新下载，否则可能仍在使用旧版本。

第二步：配置系统提示词与采样参数

这个模型是围绕特定指令格式微调的，所以建议原样使用模型卡提供的系统提示词，不要自行改写：

Create game assets for the Godot editor， which uses GLB files. Create whatever the user requests as a good-quality low-poly asset using only Three.js in one complete standalone HTML file. The HTML must show the asset and include an Export GLB button that downloads a working GLB. If the requested asset needs animation， add it and include the animation in the exported GLB； otherwise make it static.

把它粘贴到 LM Studio 的系统消息栏后，再设置作者推荐的采样参数。这些数值是作者测试时使用的起点，并非硬性要求，可以在跑通后再调整。

参数 推荐值 配置位置
temperature 0.8 LM Studio 生成参数
top_k 40 LM Studio 生成参数
top_p 0.95 LM Studio 生成参数
min_p 0.0 LM Studio 生成参数

第三步：生成并导出 GLB

用户提示词要简短、具体，并尽量使用英文。可以先试 Create a blue goblin brute 或 Build a jungle siege platform；如需动画，就写成 Create a wooden gate with an opening animation。随后按以下顺序操作：

  1. 发送提示词，等待模型输出完整的 HTML。
  2. 把输出内容另存为 .html 文件。
  3. 用浏览器打开文件，确认资产正常渲染。
  4. 点击“Export GLB”按钮，下载 .glb 文件。
  5. 将 GLB 导入 Godot，或导入其他支持该格式的工具。

如果页面空白，先打开浏览器开发者工具查看控制台报错。有些脚本在直接双击打开时可能受到浏览器的本地文件限制，这时可以在文件目录下运行 python -m http.server，再通过本地地址访问。

第四步：按清单验收资产

不要只看浏览器里的预览效果。建议每个资产都检查以下几项：

  • 结构：部件是否完整，有没有明显的错位或穿插。
  • 材质：颜色和材质在导入引擎后是否与预览一致。
  • 动画：动画是否真正写入了 GLB，并能在引擎内播放。
  • 尺寸与原点：比例和轴心是否符合场景需求，这部分可能需要手动调整。
  • 可修复性：小问题优先改代码，结构性问题再重新生成。

Three.js 代码中间层云端接入方案

代码中间层的好处之一，是它并不绑定某个特定模型。只要模型能写出可运行的 Three.js，就可以接入同一套流程。根据公开资料，Qwen3.5-4B-GLB-3D-Coder 目前以 GGUF 形式分发，主要用于本地推理；如果你的设备不便运行，或者想对比通用编码模型的效果，可以走云端 API。

API易 提供多种模型的 API 调用，兼容 OpenAI 与 Anthropic 接口格式，已有客户端通常只需调整接口地址、密钥和模型名。需要注意，上述微调模型是否提供云端调用，请以模型列表的实际显示为准。具体配置方式可查阅 API易 文档：docs.apiyi.com。

方案 核心特点 适用场景 费用口径 可用平台
本地微调模型 针对 GLB 资产微调，下载后可离线使用 批量生成占位资产、需要离线运行 无按次调用费，需自备硬件 LM Studio 等 GGUF 运行工具
云端通用编码模型 无需本地算力，便于切换和对比 设备受限、需要尝试复杂提示词 以 API易 价格页为准 API易 apiyi.com 及各模型官方渠道
本地与云端混合 本地跑量，疑难资产交给云端 希望兼顾成本与成功率的团队 云端部分以 API易 价格页为准 本地工具配合 API 平台

通过接口调用 Three.js 生成模型的步骤

  1. 在 API易 控制台创建 API Key，并从文档确认当前接口地址，不要照搬第三方教程中的地址。
  2. 根据现有客户端选择 OpenAI 或 Anthropic 接口格式，填写 base_url 与 API Key。
  3. 从模型列表中选择要测试的模型，并将其名称填入 model 字段。
  4. 将前文的系统提示词放入 system 消息。通用模型未经此任务微调，可以增加“只输出完整 HTML”这类约束。
  5. 将响应保存为 .html 文件，后续预览、导出和验收步骤与本地方案相同。

LM Studio 的本地服务同样提供 OpenAI 兼容接口。因此，你可以用同一个客户端切换本地和云端，只需更改接口地址和模型名。这样一来，代码中间层后面的预览、导出和验收环节都不用改动。

计费说明：模型单价、输入输出计费口径和缓存价格都可能调整，本文不列具体数字，一律以 API易 价格页的实际数据为准：https://docs.apiyi.com/models。

llm-threejs-code-intermediate-layer-workflow-image-3

常见问题 FAQ

Q1: 什么是 Three.js 代码中间层工作流？

它是指让模型先编写 Three.js 程序，由程序渲染并导出 GLB，而不是让模型直接输出 3D 文件。这样可以在导出前预览和修改结果。

Q2: Qwen3.5-4B-GLB-3D-Coder 能直接输出 GLB 吗？

不能。它输出的是独立的 HTML 文件，需要在浏览器中打开并点击“Export GLB”按钮，才能得到 GLB 文件。

Q3: 导出的 GLB 只能用于 Godot 吗？

不是。系统提示词以 Godot 工作流为目标，但 GLB 是通用格式，Unity、Blender 和网页 3D 查看器等工具也能导入。不过，导入后的效果仍需在各工具中分别验证。

Q4: 这个模型最适合哪些应用场景？

它最适合低多边形风格的游戏原型和占位资产，例如 NPC、武器、载具、模块化建筑和陷阱。如果需要高度定制的正式资产，预计仍要在导入后进行人工调整。

Q5: 没有合适的显卡，如何通过 API 尝试这套流程？

可以通过 API易 apiyi.com 调用模型列表中的编码模型，并按文档配置 OpenAI 或 Anthropic 格式的接口。模型输出 HTML 后，后续的预览和导出都在本地浏览器中完成。

Q6: 云端调用的费用如何计算？

不同模型的单价和计费口径各不相同，请直接查看 API易 价格页：https://docs.apiyi.com/models。建议先用少量提示词试跑，再根据实际用量估算成本。

Q7: 视觉投影文件是必需的吗？

不是必需的。可选的 BF16 视觉投影文件约 644 MiB，用于在支持 Qwen3.5 多模态 GGUF 的运行环境中输入参考图。如果只用文本提示词，可以不下载。

Q8: 这个方案目前有哪些限制？

它目前是预览版，训练集偏重简单提示词，对复杂或少见需求的泛化能力有限，也不面向写实资产。作者计划公开数据集和 Safetensors 权重，并训练约 10 万条样本、上下文长度为 8K 到 128K tokens 的更大版本，但这些内容尚未发布。

Three.js 代码中间层核心要点 Key Takeaways

  • 核心思路：让模型编写可运行的 Three.js，再由程序导出 GLB。
  • 关键优势：中间产物可以预览、阅读和局部修改，降低失败代价。
  • 本地上手：LM Studio 加载 GGUF，配合固定系统提示词和推荐采样参数。
  • 版本提醒：11 月 2 日前下载的权重建议删除后重新下载。
  • 适用边界：适合低多边形原型和占位资产，不适合写实或影视级制作。
  • 云端路径：可通过 API易 用 OpenAI 或 Anthropic 格式接入模型并对比效果。
  • 方法外延：Blender Python、OpenSCAD 等场景也可以借鉴这种中间层设计。

总结

Qwen3.5-4B-GLB-3D-Coder 的启发不只在于一个小模型能生成游戏资产，更在于它重新划分了模型与工具的职责：

  1. 模型负责表达：把自然语言描述转化成结构清晰的 Three.js 代码。
  2. 工具负责落地：由浏览器和导出逻辑生成标准的 GLB 文件。
  3. 验证决定可用性：只有导入目标引擎并通过检查，才算真正完成。

建议先用一个简单的静态道具跑通全流程，再逐步测试动画和复杂资产。如果想对比多个云端模型，可以通过 API易 统一调用，接入方式见 docs.apiyi.com，价格以 https://docs.apiyi.com/models 的实际数据为准。

📚 参考资料

  1. Qwen3.5-4B-GLB-3D-Coder 模型介绍: 模型定位、25 个资产领域与后续路线
  2. 链接： mindstudio.ai/blog/qwen3-5-4b-glb-3d-coder-model

  3. 说明： 适合了解项目的整体情况和社区案例

  4. Qwen3.5-4B-GLB-3D-Coder 本地运行指南: 生成机制、量化版本与适用性分析

  5. 链接： mindstudio.ai/blog/qwen3-5-4b-glb-3d-coder-local

  6. 说明： 适合评估模型是否符合自己的项目需求

  7. LM Studio 配置指南: 系统提示词、采样参数与 GLB 导出步骤

  8. 链接： mindstudio.ai/blog/run-qwen3-5-glb-3d-coder-locally

  9. 说明： 适合按步骤完成本地部署

  10. API易 文档与价格页: 接口接入说明及模型价格数据

  11. 链接： docs.apiyi.com 与 docs.apiyi.com/models
  12. 说明： 接口配置和计费信息均以此处的最新内容为准

作者: API易 技术团队
技术交流: 接入过程中如有问题，欢迎通过 API易 官网 apiyi.com 联系我们，更多资料可查阅文档中心 docs.apiyi.com

类似文章