HOLO/ARCHIVE

A personal nostalgia gallery built with Three.js: real collectible scans, angle-dependent print finishes, transparent acetate, and an off-axis room you can look into.

Run locally

npm install
npm run dev -- --host 127.0.0.1

Open http://127.0.0.1:5173. Build with npm run build; serve the build with npm run preview. Vercel builds this Vite project from main and serves dist.

The collection

Exhibit	Artwork and finish
Hulk	1994 Marvel Masterpieces Silver Holofoil, fine silver microflakes with dense ink over the figure
Wolverine	Suspended Animation front and reverse supplied by the owner, printed on a genuinely transmissive purple/amber acetate surface
Spider-Man #50	September 1994 cover, with a diffraction mask confined to the two Holo-Grafx eyes
U.S.S. Enterprise	Original period-inspired Star Trek packaging, printed space backdrop, holographic title lettering, clear blister and unpackable model
Bartman W2	Two photographed poses from the 1994 SkyBox Wiggle card, selected by viewing angle, plus its real puzzle reverse
Upper Deck pack	Real silver/red 1994–95 Hobby wrapper and 12 real card fronts and backs, including Jordan Holojam, a checklist and a Special Edition foil

The pack is a curated 1991–94 selection inside a period wrapper, not a reconstruction of factory collation. Hulk and the comic have clearly labelled archive display reverses because original reverse scans are not included. The toy packaging is a new mockup, not a scan of a historical retail package.

Controls

Action	Input
Look into the room	Move the mouse, or enable optional head tracking
Move closer / further	Scroll wheel, or lean with tracking enabled
Inspect	Click an object, or keys 1–6
Tilt	Drag the selected object
Flip	F, double-click, or the Flip button
Unpack / repack the ship	U
Open / reseal basketball pack	O
Browse the open pack	Left / Right arrow keys or Previous / Next card
Return to gallery	Esc or click empty space
Calibration and quality	Gear button

Bloom starts enabled at a restrained strength. Floor reflections and depth of field can also be toggled. Quality preferences persist locally. Head tracking requires camera permission and either localhost or HTTPS; mouse interaction works without a camera.

Sources and implementation

See ASSET_SOURCES.md and the JSON provenance files under public/assets/. Original source photos remain unchanged on disk. The renderer crops and perspective-corrects them, applies separate finish masks, and recreates the physical substrates. Texture canvas dimensions do not imply additional source detail. Bartman's photographs retain some optical ghosting; better scans of both poses can replace them later.

• src/exhibits/realCatalog.js: the six exhibits and their material settings.
• src/exhibits/basketballPack.js: opening, browsing and flipping all 12 cards.
• src/exhibits/wolverine.js: independent front/reverse ink masks and transparent substrate.
• src/art/simpsonsFrames.js: perspective rectification and the two-pose lenticular atlas.
• src/art/toyPackaging.js: editable canvas artwork and title-only foil masks.
• src/materials/holoMaterial.js: view-dependent diffraction, metallic ink, microflakes and lenticular lenses.
• src/render/offAxisCamera.js and src/tracking/: room projection and optional face tracking.

To use a custom ship, put a GLB in public/models/ and set VITE_TOY_MODEL_URL=/models/toy.glb in the build environment. Without that setting, the built-in model is used without requesting a missing file.