Three.js Primitive Reconstructor

Core workflow

Use this skill to generate a reliable single-file Three.js HTML scene from a low-poly, voxel, isometric, or stylized 3D reference image.

1. Inspect the reference image visually before coding.
2. Produce a short analysis inventory in the response and include the same inventory as a comment block at the top of the script.
3. Generate one plain .html file, not React, JSX, iframe, or srcDoc.
4. Use only primitive geometry: BoxGeometry, CylinderGeometry, ConeGeometry, SphereGeometry, Group, and MeshStandardMaterial.
5. Use the import-map loading pattern from assets/threejs-scene-template.html.
6. Keep objects aligned to integer or half-integer tile coordinates when reconstructing grid-based scenes.
7. Add soft shadows, matte materials, and an immediate camera view where the asset is visible without user adjustment.
8. When the user reports a loading or rendering error, first replace CDN/import patterns and wrappers with the robust plain HTML template in assets/threejs-scene-template.html.

Required analysis inventory

Before the code, summarize: