A live gallery of procedural Three.js models generated by img2threejs — a tool that turns a single reference photo into a code-only, animation-ready 3D model. No imported meshes, no downloaded art packs: every object below is built by a TypeScript factory function, running live in your browser.

Live gallery → https://hoainho.github.io/img2threejs-showcase/ 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.

	Sony WF-1000XM3 Earbuds + Case Matte-black true-wireless earbuds + case with rose-gold trim; the lid opens and both buds spin in a looping animation. object · final · by Hoài Nhớ
	ISSACA 12 Gauge Shotgun Stylized bullpup shotgun with a working muzzle flash, full recoil kick, and an ejecting shell. object · final · by Hoài Nhớ
	Gerber Paracord Knife Skeletonized tactical knife wrapped in orange paracord, slowly rocking on a studio turntable to catch the stonewash finish. object · final · by Hoài Nhớ
	Doraemon House (isometric diorama) Isometric residential diorama with swaying trees, twinkling dusk windows, and both characters resting on the roof. object · final · by Hoài Nhớ
	War-Hauler "SECTOR 07" Armored 6-wheeled hauler with glowing reactor hubs, exhaust smoke, and rolling wheels. object · final · by Hoài Nhớ
	Crowned Loot Chest Rounded loot chest with a purple-to-teal enamel gradient and an emissive crown emblem. (placeholder mesh — not yet a final img2threejs reconstruction) object · placeholder · by Hoài Nhớ

This section is maintained by hand — when you add a demo (see below), add a row here with a screenshot too.

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.

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

• 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 runtime network calls or external CDN/fonts — everything is bundled

npm install
npm run dev

npm run build   # tsc --noEmit && vite build
npm run preview

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

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)
  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

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.