agentleFS
Sign inStart free
kuker24kuker24/OpenCodeBestFriend/skills/img2threejs/SKILL.md

img2threejs

Skill0 starsChanged 2 months agoMITView on GitHub

Use when the user wants a code-only procedural Three.js model reconstructed from a reference object image (factory Group, editable primitives, lighting, animation). Not for scroll-led pages (scroll-craft), camera/diorama worlds (scroll-world), HTML-to-MP4 (hyperframes), photoreal/image generation (visual-studio), or product UI (impeccable / found-this-design).

6 other projects use a version of this.

Adopted by

Most recently taken up by

The file

We split this skill into the rules it gives an agent

3 rules. 0 are common, 1 is distinctive, and 2 are very specific to this project.

  • 0

    Common

    Most of the 6 edited versions we read keep these.

  • 1

    Distinctive

    This author's own choices. Worth a look.

  • 2

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Use procedural primitives and standard materials (MeshStandardMaterial, MeshPhysicalMaterial).

    line 34
  2. Very specific:

    No downloaded mesh packs, external .gltf/.obj URLs, or opaque binary blobs.

    line 36
  3. Distinctive:

    Honesty on Occlusion: Never pretend a single image provides full 360-degree truth.

    line 48

“Common” is measured: kept by at least 6 in 10 of the 6 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

img2threejs

Procedural 3D reconstruction specialist generating clean, editable TypeScript Three.js Group factories from a single reference object image.

Unlike downloaded GLTF/OBJ mesh blobs or heavy photogrammetry pipelines, img2threejs creates human-readable, parametric code using Three.js primitives (BoxGeometry, CylinderGeometry, ExtrudeGeometry, shaders/materials, lights).

Boundaries & Handoffs

NeedPrimary Route
Reconstruct isolated object as procedural Three.js codeimg2threejs
Continuous 3D fly-through, diorama, camera world landingscroll-world
Scroll-driven timeline storytelling websitescroll-craft
Deterministic HTML composition rendered to MP4 videohyperframes
Photoreal product stills, ads, VFX, or raster asset packsvisual-studio
Web landing page, dashboard, or application UIimpeccable / found-this-design

Progressive Pipeline

  1. Validate Image: Inspect the reference image. The target must be a discrete object or prop (hardware, furniture, device, vehicle, stylized mascot), not an entire interactive landing page or panoramic scene.
  2. Written Spec (Visible vs. Inferred):
    • Identify visible geometry, proportions, materials, colors, and lighting.
    • Explicitly document inferred hidden faces (rear, underside, interior). A single viewpoint cannot reveal occluded sides.
    • Propose the hierarchical scene breakdown (Group root with named child components).
  3. Factory Pass:
    • Author a standalone TypeScript module exporting a factory function createModel(options?): THREE.Group.
    • Use procedural primitives and standard materials (MeshStandardMaterial, MeshPhysicalMaterial).
    • Group logically for articulation or animation if requested (pivot points, rotators).
    • No downloaded mesh packs, external .gltf/.obj URLs, or opaque binary blobs. Output must be diffable TypeScript.
  4. Screenshot Compare & Loop Gate:
    • Render the procedural model and visually inspect side-by-side with the reference image.
    • Step disposition must be one of:
      • continue: Visual parity acceptable; finalize and document inputs.
      • refine-spec: Proportions or structural hierarchy wrong; adjust written specification.
      • refine-code: Materials, alignments, or primitive parameters off; edit TypeScript.
      • request-input: Occluded or ambiguous details require user decision.
      • stop: Reached best procedural approximation, or model complexity exceeds procedural primitives.

Hard Rules & Honesty Gates

  1. Honesty on Occlusion: Never pretend a single image provides full 360-degree truth. Clearly mark unseen faces as inferred. If the user demands photogrammetric precision that procedural primitives cannot achieve, state "cannot reach requested fidelity" and stop.
  2. Token & Resource Discipline: Procedural 3D code generation and screenshot verification are token-intensive. Never auto-run on generic website briefs or landing pages.
  3. No Heavy Toolchain: Output is clean, dependency-light Three.js code. Do not introduce Python mesh reconstruction packages, neural rendering runtimes, or external API dependencies.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free