# Items prototype: 3D inventory

Open `index.html` through any static web server (it loads models with fetch, so `file://` will not work). `?item=longsword` opens with that item selected.

## How it works

- Left: inventory cards (name, weight, value, rarity colour on the top border, ASSET or PROC badge). Right: a three.js viewer for the selected item (auto-rotate, OrbitControls, RoomEnvironment reflections, a key light with a soft shadow on a ground disc), the item row as JSON, and how thumbnails would be stored.
- Two routes side by side:
  - **ASSET**: 7 Poly Haven CC0 models (chest, crate, barrel, kite shield, axe, goblets, lantern), 1k textures, loaded as glTF and scaled to a unit box (the real size in metres is shown).
  - **PROC**: 4 items built in code from three.js primitives (longsword, two potions, spell scroll, amulet). Each builder takes `params` (colours, fill level, shape), so one builder covers many items.
- Thumbnails: every item is rendered once at load into a 256x256 offscreen canvas with a fixed 3/4 camera, then `toDataURL`. "Download thumbnails" saves them as PNGs.
- In the app: a queued job opens a bake page in headless Chromium (Playwright or Browsershot), waits for `window.__ready`, and stores `storage/items/<id>.png`. The list only loads PNGs; the 3D model loads when an item is opened.

## Item row proposal

```json
{ "id": "potion-greater", "name": "Potion of greater healing", "type": "Potion", "rarity": "uncommon",
  "weight_lb": 0.5, "value_gp": 150, "description": "...",
  "model": { "source": "procedural", "ref": "potion", "params": { "shape": "tall", "liquid_color": "#2fb4ff", "fill": 0.85 } },
  "thumbnail_url": "/storage/items/potion-greater.png" }
```

`model.source` is `asset` (ref = library id, plus url and licence), `procedural` (ref = builder name, plus params) or `none` (thumbnail only). An AI can create a new item by writing a row: it picks a builder and params, or an asset ref from a catalogue; no art is needed.

## Good and bad

- Assets look real and cost nothing (CC0), but each is 1-4 MB with textures and there are few fantasy items in Poly Haven. Their realistic style does not match the low-poly procedural items or a stylised map.
- Procedural items are tiny (a few lines of code plus params), instant, and endless colour variants come free. They look "toy-like"; each new kind of thing (bow, staff, armour) needs a builder written once.
- In-browser thumbnails are good for a prototype; in production bake once and store, since software WebGL (as in the screenshot container) took about 11 s for all 12.

## What it costs to make real

- **CC0 libraries**: Quaternius and Kenney (stylised low-poly, packs with hundreds of fantasy props and weapons, CC0, free), Poly Haven (realistic, CC0, free, few fantasy items). Pick one style and stay in it. Cost: hours of curation, nothing in money.
- **AI 3D** (Meshy, Tripo and similar, text or image to 3D): options for unique items; current pricing and output licence unknown, check before use. Quality varies; usually needs a clean-up/decimation step.
- **Procedural**: developer time per builder (an hour or two each for simple items), then free forever.
- Recommendation: procedural builders for the common, highly variable things (potions, scrolls, rings, gems, simple weapons) plus one stylised CC0 pack (Quaternius/Kenney) for the rest; the realistic Poly Haven look only if the maps go realistic too. Store a baked PNG per item regardless.

## Licensing

Poly Haven assets are CC0 (LICENSE.txt beside each). Quaternius and Kenney are CC0. AI 3D services: read their terms on commercial use and ownership. The ProFantasy Token Treasury Jasper bought is 2D art; its licence for use by an AI and by other users of the app is unconfirmed, so do not ship it before checking.