img2threejs · showcase

One reference photo in. A code-only, animation-ready 3D model out.

A live gallery of procedural Three.js models generated by img2threejs. No imported meshes, no downloaded art packs, no .glb fetched at runtime — every exhibit below is a TypeScript factory function, running live in your browser.

Click any card for the full-viewport viewer (#/demo/:id): drag to orbit, scroll to zoom, and read the reference photo it was rebuilt from.

---

Contents

• Featured exhibits
• All exhibits
• What makes these different
• Add your own showcase
• Stack
• Develop
• Project layout
• Swapping in a placeholder demo
• Community
• Support the project
• Star history

Featured exhibits

Sony WF-1000XM3 The lid opens, both buds rise and spin a full turn, then settle back.	ISSACA 12 Gauge Muzzle flash, full recoil kick, and a brass slug that ejects and tumbles.	Gerber Paracord Knife Skeletonized tanto under ~13 turns of woven orange kernmantle cord.
Doraemon House Isometric diorama: swaying canopies, twinkling dusk windows, two residents.	War-Hauler "SECTOR 07" Armored 6-wheeler with glowing reactor hubs and drifting exhaust smoke.	Crowned Loot Chest Purple-to-teal enamel and an emissive crown. Placeholder mesh.

All exhibits

✅ final is a real img2threejs reconstruction measured against its reference. 🚧 placeholder is a generic procedural stand-in still waiting to be rebuilt.

Exhibit	Kind	Status	Author
Ringside Boxer — Measured-Impact VFX Every impact timing measured off the embedded clips: windup charge, air tear, sweat spray, rosin dust, hitstop.	character	🚧	Hoài Nhớ
Mouse Warrior — Rigged Surface Character 47 Surface Nets regions bound to a human-structured rig, with a code-native attack clip.	character	🚧	Hoài Nhớ
Dual-Sword Warrior — TypeScript procedural surfaces Encoded Surface Nets streamed as high / medium / low quality TypeScript modules.	character	🚧	Hoài Nhớ
Low-Poly Humanoid — Rigged Character Nine panel-driven actions, from Run and Jump to Roundhouse and Dodge.	character	🚧	Hoài Nhớ
AWP | Medusa (Minimal Wear) IoU 0.92 to its references. Fire it, deploy the bipod, or line up a shot through the scope.	object	✅	kokorolx
Pikachu 10K Star Celebration Stylized mascot under a lightning burst, with a counter that rolls up to 10K.	character	🚧	Hoài Nhớ
Glock-18 | Ghost Protocol (Well-Worn) Translucent polymer over real internals — barrel, striker, recoil spring. Hit "Explode parts".	object	✅	kokorolx
Classic Knife | Fade (Minimal Wear) The Fade is the reference's own de-lit pixels, not a procedural gradient.	object	✅	kokorolx
BMX Endurance Bike Rebuilt from a 12-view set; cranks turn and both wheels roll at the right gear ratio.	object	✅	Hoài Nhớ
M9 Bayonet | Doppler Phase 2 Traced sawtooth silhouette under blue → violet → cyan Doppler smoke.	object	✅	kokorolx
Sony WF-1000XM3 Earbuds + Case Matte-black case, rose-gold lid, engraved spec plate; a looping open/spin/close cycle.	object	✅	Hoài Nhớ
ISSACA 12 Gauge Shotgun Muzzle flash, recoil kick, cycling bolt, and an ejecting "RIFLED SLUG" shell.	object	✅	Hoài Nhớ
Gerber Paracord Knife Stonewash PVD tanto, skeleton tang, hex pommel, herringbone cord braid.	object	✅	Hoài Nhớ
Doraemon House (isometric diorama) Cream stucco under red gable roofs, overhead wires, and a full street-side yard.	object	✅	Hoài Nhớ
War-Hauler "SECTOR 07" Riveted plow, oxidized engine box, six tyres on glowing red reactor hubs.	object	✅	Hoài Nhớ
Crowned Loot Chest Purple-to-teal glossy enamel, eight gold brackets, emissive crown emblem.	object	🚧	Hoài Nhớ
★ Talon Knife | Doppler Ruby (Factory New) Rendered under AgX, because ACES turns a clipped ruby pink. Looping 9s ring spin.	object	✅	kokorolx
Dual-Sword Warrior — Procedural Character 1,599,896 triangles, exact part for part; per-triangle UV transfer so irises and eyelids survive.	character	✅	Hoai Nho

This table is maintained by hand — when you add a demo, add a row here too.

What makes these different

• Code, not assets. Each exhibit is a TypeScript factory returning a THREE.Group. You can read it, diff it, and edit a bolt without opening a DCC tool.
• Measured, not eyeballed. final exhibits trace their silhouette from the reference's own alpha and report the gap — the AWP meets a 0.90 IoU gate at 0.92.
• Finishes come from the reference. Skins are the reference's own de-lit pixels projected through the capture camera, not a procedural swirl that happens to look similar.
• Animation-ready by construction. Parts are separate named components with real contact pairs, so recoil, explode-views and rigs are wiring, not rework.
• Honest about inference. Broadside references can't show Z thickness. Where a number is inferred rather than measured, the blurb says so.

Add your own showcase

git clone https://github.com/<you>/img2threejs-showcase.git && cd img2threejs-showcase
npm install
git checkout -b add-demo/<id>
npm run new-demo -- <id> "<Title>" object   # scaffolds src/demos/<id>/ + a registry.ts entry
# → paste your img2threejs factory in, fill the TODOs, add public/references/<id>.png
npm run build && npm run preview            # check #/demo/<id>
node scripts/check-showcase-safety.mjs --base main
git add -A && git commit -m "Add <id> showcase demo" && git push -u origin add-demo/<id>
gh pr create --fill

npm run new-demo runs scripts/new-showcase.mjs — it creates the factory stub and registry entry for you, TODO-marked, so npm run build already passes before you've written a line of your own. pr-safety-check CI must pass before a maintainer reviews; on merge, deploy.yml republishes the live gallery automatically.

Read CONTRIBUTING.md before opening a PR — it covers the full walkthrough, what each registry field means, and what gets a submission rejected. You can also open the Submit a showcase demo issue form first to get early feedback on scope before doing the work.

Stack

• three ^0.169.0, TypeScript ^5.6.0, Vite ^5.4.0
• Hash router only (#/, #/demo/:id) so GitHub Pages project-site refreshes never 404
• No network call anywhere in the rendering path, and no external CDN or remote fonts — everything an exhibit needs is bundled. The site's one third-party request is its Google Analytics script; it renders nothing, and demo code is still barred from fetch/XMLHttpRequest/WebSocket by the safety check. Every event the site sends is a named function in src/analytics.ts; setup, the event reference and the sponsor report live in docs/ANALYTICS.md, and the in-site privacy page states the same thing to visitors

Develop

npm install
npm run dev            # vite dev server
npm run build          # tsc --noEmit && vite build
npm run preview        # serve the production build
npm run star-history   # redraw the chart below (needs GITHUB_TOKEN)

vite.config.ts sets base: '/img2threejs-showcase/' to match the GitHub Pages project-site path.

Project layout

src/
  main.ts               bootstrap: mounts the router, handles route changes
  router.ts             tiny hash router
  scene.ts              reusable Three.js viewer (renderer/camera/controls/lights/dispose)
  analytics.ts          every event the site sends, as named functions
  pages/home.ts         gallery landing page
  pages/demo.ts         per-demo viewer + info panel
  demos/registry.ts     single source of truth for demo metadata + build fn
  demos/<id>/           ported factory source, one folder per demo
scripts/
  new-showcase.mjs          scaffolds a new demo folder + registry entry
  check-showcase-safety.mjs the PR safety gate
  generate-star-history.mjs renders the star chart from the GitHub API

Swapping in a placeholder demo

A few registry entries start as status: 'placeholder' built from a generic procedural factory. To replace one with a freshly generated model (as the maintainer, not via the contributor PR flow above):

1. Drop the new factory file under src/demos/<id>/ (keep the exported function name — copy it in verbatim from the img2threejs output).
2. Update that demo's entry in src/demos/registry.ts:
   • point build at the new factory's exported function(s),
   • update referenceImage if the reference photo changed,
   • set status: 'final'.
3. Add the reference image to public/references/.

No other files need to change — the router, viewer, and pages read everything from the registry.

Community

Want a second pair of eyes on a new exhibit before opening the PR? Want to know which category people are voting for so your next subject matches demand? Or just want to show off the thing you rebuilt this weekend?

Channel	What it's for
#showcase-feedback	Drop a #/demo/:id link and ask for notes
#rebuild-this	Paste a reference image and watch the room attempt it live
#wishlist	What categories people actually want next, beyond the current 17 exhibits
#i-made-a-thing	Share models built with the skill, whether or not they ship to the gallery

Support the project

img2threejs is free and open source. If the gallery or the underlying skill saved you time, consider supporting continued development:

VietQR / MoMo / PayPal also work — see the donate page.

Star history

_{Drawn in-repo by scripts/generate-star-history.mjs and refreshed daily by star-history.yml. It replaces the star-history.com embed, which now renders "GitHub restricted access to star data" since GitHub closed the anonymous stargazer API — and unlike the vendor's suggested workaround, it needs no access token in this file.}