img2threejs-showcase

July 28, 2026 · View on GitHub

Deploy to GitHub Pages PR safety check Discord

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.

img2threejs-showcase live gallery

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.

Showcases

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.

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.

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.

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

Develop

npm install
npm run dev

Build

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.

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

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?

Discord

  • #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 14 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:

Buy Me a Coffee

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

Star History

Star History Chart