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.
- License
- MIT
- By
- By GameSkill
Tested by GameSkill
23/23 checks passed on glTF Transform 4.5.1 (Node 20) (2026-10-28): trigger, a runnable example, a screenshot and self-check, one job per skill, and English + Chinese docs. Trigger checks match prompts against skill descriptions; they are not a live agent run.
Test reportGameSkill's tested copy
Written and tested by GameSkill for gameskill.dev. The ZIP holds the whole skill: SKILL.md and its Chinese version, scripts, a runnable example, tests, the self-check list and our test report.
A GameSkill original, released under MIT. The ZIP keeps LICENSE and CREDITS.md, which lists the workflow inspiration, the CC0 test assets and the third-party libraries with their licenses.
Self-check
- 正面、侧面、背面用同一段描述、同一画风和比例 / 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
Install
Tell your AI
Install the skill from https://gameskill.dev/skills/multiview-to-web-3d-asset/install.md
GameSkill's tested copy
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.zipWhat you get
- 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
Good fit
- 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
Not for
- 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)
Try this prompt
This glb from my image-to-3D tool is 9 MB. Make it a web-prop under budget with Draco and three LODs.About this 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).
Requirements
- Node.js 20+ and npm
- Any image-to-3D provider that outputs glb (or a model from your own DCC tool)
Topics
FAQ
Works well with
Skills the author points to as related or as the better fit for neighbouring tasks.
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.
Similar 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.