Multi-view to Web-ready 3D Asset
/multiview-to-web-3d-asset
A GameSkill original: front, side and back reference prompts, any image-to-3D provider, then a tested glTF Transform pass that simplifies, resizes textures, applies Draco and builds LODs inside a triangle and file-size budget.
- 许可证
- MIT
- 出品
- GameSkill 出品
我们测过
在 glTF Transform 4.5.1 (Node 20) 上通过 23/23 项检查（2026-10-28）：能触发、有可运行示例、有截图和自检清单、单一职责、中英文文档齐全。触发检查是把提示词和 skill 描述做匹配，不是真实 agent 运行。
测试报告GameSkill 测过的版本
GameSkill 为 gameskill.dev 原创编写并测过。ZIP 里是完整的 skill：SKILL.md 及中文版、脚本、可运行示例、测试、自检清单和我们的测试报告。
GameSkill 原创，协议 MIT。ZIP 保留 LICENSE 和 CREDITS.md，里面列出了流程灵感来源、CC0 测试素材和第三方库及其协议。
自检清单
- 正面、侧面、背面用同一段描述、同一画风和比例 / Front, side and back views share one description, style and scale
- asset.json 记下服务、模型版本、日期和协议 / asset.json records provider, model version, date and licence
- inspect-glb 对目标预设输出 PASS（面数、体积、贴图、draw call、材质） / inspect-glb prints PASS for the target preset (triangles, size, textures, draw calls, materials)
- 优化后每个轴的外形尺寸误差不超过 2% / Bounds after optimisation stay within 2% on every axis
- 背面和底面用眼睛看过，对比图里没有破洞或贴图错位 / Back and underside checked by eye; the compare render shows no holes or smeared UVs
中文指南
这个 skill 做什么
GameSkill 原创（MIT）。把一个概念（角色、道具、载具）变成网页游戏能直接用的 glb：先用同一段描述出正面、侧面、背面三张参考图，交给任意一家图生 3D 服务，再用测过的 glTF Transform 流程减面、缩贴图、Draco 压缩、生成 LOD，最后按面数和文件大小预算检查，超预算就返回退出码 2。
什么时候用
- AI 生成或扫描的 3D 模型太大，放进浏览器太卡
- 想做「一张图生成 3D」再放进 three.js 网页游戏
- 需要 LOD、Draco、glb 瘦身，或要给模型定面数和包体预算
- 要给 3D 生成写多视角参考图提示词
怎么装
下载本页的 ZIP，把 multiview-to-web-3d-asset/ 整个文件夹放进 .claude/skills/（Claude Code）或 .agents/skills/（Codex、Cursor），在里面跑一次 npm install，重启 agent。
最小示例
node scripts/fetch-sample.mjs 下载两个 CC0 的 Khronos 示例模型，然后 node scripts/optimize-glb.mjs samples/WaterBottle.glb out/bottle.glb --preset mobile-prop，再用 node scripts/inspect-glb.mjs out/bottle.glb --preset mobile-prop 检查。实测 8.97 MB 的 WaterBottle 用 web-prop 预设变成 448 KB，用 mobile-prop 变成 134 KB、2,908 个三角形，外形误差在 2% 以内；Lantern 加 --lods 1,0.5,0.2 得到 949 KB / 288 KB / 96 KB 三级。
协议要注意的地方
- Hi3D v1.0（Hi3D Open License 1.0，自定义协议）：允许商用；相关产品或服务月活超过 20 万或月收入达到 100 万美元，需要另外申请书面授权；产品里集成 Hi3D 本身要标注「Powered by Hi3D 1.0」。生成的网格只要不含 Hi3D 的代码或权重，可以自由使用，不触发这些义务。
- 腾讯混元 Hunyuan3D 2.0 / 2.1（社区协议）：不适用于欧盟、英国和韩国，也不允许在这些地区使用其输出；版本发布时月活超过 100 万的产品要另外向腾讯申请授权。Hi3D 若用了混元的粗模阶段，输出同样受混元协议约束。
- 托管服务（Hitem3D、Tripo API）的服务条款我们没有审阅，用之前自己看。协议会变，上线前重新确认。
我们怎么测的
在 Node 20、glTF Transform 4.5.1 下跑 10 个测试：CC0 示例模型已下载；WaterBottle 用 web-prop 后在预算内、开了 Draco、贴图 1024、体积减少 90% 以上；用 mobile-prop 后不超过 3,000 个三角形、外形误差在 2% 以内；18 万面的合成模型压到 1 万面预算内、轮廓误差在 3% 以内；WebP 选项转换所有贴图且能加载；--no-draco 不压缩几何；命令行 LOD 生成 3 个文件、面数和体积逐级下降；inspect 超预算退出码 2、预算内 0；预算检查逐项报警；输出能被新的读取器重新打开。前后对比图用无头 Chrome 渲染。结果在 gameskill/test-report.json。
致谢
流程灵感来自 X 上 @gkxspace 分享的工作流（多视角概念图 → 图生 3D → LOD + Draco → three.js）。文字、脚本、预算和测试都是我们自己写的，没有复制任何内容。测试素材是 Khronos 的 WaterBottle 和 Lantern（CC0），详见 CREDITS.md。
搭配
threejs-glb-scene-assembly（入门）：在 three.js 里用 GLTFLoader + DRACOLoader 加载优化后的 glbimg2threejs：只有一张图、想用代码重建模型时用blender-export-pipelines：模型在 Blender 里时的导出预设
安装
告诉你的 AI
Install the skill from https://gameskill.dev/skills/multiview-to-web-3d-asset/install.md
GameSkill 测过的版本
mkdir -p .claude/skills
curl -fsSL https://gameskill.dev/dl/skills/multiview-to-web-3d-asset.zip -o /tmp/gameskill-multiview-to-web-3d-asset.zip
unzip -oq /tmp/gameskill-multiview-to-web-3d-asset.zip -d .claude/skills
rm /tmp/gameskill-multiview-to-web-3d-asset.zip包含内容
- A multi-view reference prompt template: one fixed description, front, side and back views
- providers.md: Hi3D v1.0, Hitem3D, Hunyuan3D 2.0/2.1 and TripoSR, with licence facts checked on 2026-10-28
- optimize-glb.mjs: weld, meshoptimizer simplify, texture resize, prune, Draco, optional LODs
- inspect-glb.mjs: triangle, file size, texture, draw-call and material budget gate (exit 2 when over)
- Three presets (web-hero, web-prop, mobile-prop), 10 Node tests and a before/after preview page
适合
- AI-generated or scanned props, vehicles and characters that are too heavy for a browser game
- Setting a measured polygon and file-size budget for web or mobile 3D
- Writing consistent multi-view references before image-to-3D generation
不适合
- Retopology or rigging: it simplifies the mesh you have, it does not rebuild it
- Generating the 3D model itself: bring your own provider (none is bundled)
试试这条提示词
This glb from my image-to-3D tool is 9 MB. Make it a web-prop under budget with Draco and three LODs.关于这个 Skill
A GameSkill original, written and tested for gameskill.dev under MIT. Raw image-to-3D output is usually far too heavy for a web game: 100k+ triangles and 2K–4K textures for a prop that fills 5% of the screen. This skill covers the whole path and ends with a measured budget gate, so "looks fine" becomes "passes inspect-glb".
Pipeline
- References: one fixed description and the same style for front, side and back views (
prompts/multiview-reference.md). - Generate: send them to any image-to-3D provider (
providers.md) and record the provider, model version and licence next to the file. - Inspect the raw file:
node scripts/inspect-glb.mjs raw.glb --preset web-prop(expect a FAIL). - Optimise:
node scripts/optimize-glb.mjs raw.glb out/prop.glb --preset web-prop(weld, meshoptimizer simplify, texture resize, prune, Draco). - LODs (optional):
--lods 1,0.5,0.2writes three files, each with half the texture size. - Self-check with
CHECKLIST.md, then load it withDRACOLoader(see Three.js: load a glb and assemble a scene).
Measured on real files (2026-10-28)
| Input | Preset | Result |
|---|---|---|
| WaterBottle (Khronos, CC0) 8.97 MB, 4,510 tris | web-prop | 448 KB, 1024 px textures, Draco: PASS |
| same | mobile-prop | 134 KB, 2,908 tris, bounds within 2%: PASS |
| Lantern (Khronos, CC0) 9.56 MB | web-prop --lods 1,0.5,0.2 | 949 KB / 288 KB / 96 KB |
| synthetic 180,000-tri blob, 5.06 MB | --max-tris 10000 | 28 KB, 9,401 tris |
Licence notes for providers
- Hi3D v1.0 (Hi3D Open License 1.0, custom): commercial use is allowed. A related product or service above 200,000 monthly active users or USD 1,000,000 monthly revenue must apply for a separate licence. Products that integrate Hi3D itself must show "Powered by Hi3D 1.0". Generated meshes that contain no Hi3D code or weights are free to use without those duties.
- Tencent Hunyuan3D 2.0 / 2.1 (Community License): does not apply in the European Union, the United Kingdom or South Korea, and bars using its output there. Products above 1 million monthly active users on the release date need a separate licence from Tencent.
- Hosted services (Hitem3D, Tripo API) have their own terms, which we did not review. Licences change; re-read them before you ship.
Credits
Workflow inspiration: a post by @gkxspace on X (multi-view concept art → image-to-3D → LOD + Draco → three.js). No text, code or images were copied; the skill text, scripts, budgets and tests are ours. Test assets: Khronos glTF-Sample-Assets WaterBottle and Lantern (CC0-1.0).
环境要求
- Node.js 20+ and npm
- Any image-to-3D provider that outputs glb (or a model from your own DCC tool)
相关主题
常见问题
搭配使用
作者标注的相关 Skills，或更适合相邻任务的 Skills。
Three.js: Load a glb and Assemble a Scene
A GameSkill original: load a glb (Draco included) into three.js asynchronously and wire a small playable scene around it: loading bar, model normalisation, colliders, a water shader with matching buoyancy, lights, pooled particles and WebAudio sound.
img2threejs
An Agent Skill that rebuilds the object or character in a reference image as a code-only, animation-ready Three.js model, checked pass by pass.
Blender Export Pipelines
Export from Blender 5.2 with verified presets - Roblox (FBX/glTF, cages, R15, SurfaceAppearance), Unity (FBX, Humanoid), Unreal (FBX skeletal, Nanite, UCX), Godot/web (GLB, meshopt/Draco, WebP), USD.
相似 skills
Novel to Game
Agent skills for source-grounded adaptation of novels into games: cited design docs, target-runtime builds and evidence-based QA.
open-game-skills
An MIT pack of about 190 SKILL.md agent skills for game design: combat feel, camera, traversal, world, validation, 2D/Spine and art pipeline, with a dispatcher and adapters for Three.js, PixiJS, Phaser, Cocos, Godot, Unity and Unreal.
image-blaster
Eight Claude Code skills that turn one image into a 3D scene: GLB/OBJ meshes of objects, a Gaussian splat of the environment, and SFX. Needs paid World Labs and FAL keys.
Universal Modder
Skills, tools and a fal MCP that let Claude Code mod PC games you own: recon, reverse engineering, generated assets, in-game testing.