Three.js packageFive-volume fixture
Stripe Press–inspired WebGL book catalogue study
This page is package-owned fixture content. It demonstrates the renderer and interaction lifecycle without reading from the host website.
Inspect the packageMaterials
Surface studies
Materials / light / print
Compare cloth, paper, foil, gloss, and bump responses on the shared book mesh.
Package fixture
One shader, independently authored surfaces.
Every cover uses the same material architecture. Colour, bump, foil, gloss, glitter, paper, and headband inputs create the visible differences.
The DOM book remains underneath as an accessible fallback and as the renderer’s live interaction target.
Geometry
Shared geometry
Mesh / joints / thickness
Reuse one authored topology while varying thickness, covers, joints, and page blocks.
Package fixture
A single mesh carries all five books.
Cover, spine, boards, page block, joints, and headbands share one UV atlas. A thickness uniform moves only the permitted outer-shell vertices.
The scene keeps these meshes alive across every internal route change.
Interaction
Shelf interaction
Pointer / keyboard / touch
Exercise picking, holding, dragging, focus, and the transition from shelf to volume.
Package fixture
The rendered book and semantic link share one target.
Projected WebGL bounds update the DOM hit area after the shelf settles. Pointer, touch, focus, keyboard, and modified clicks retain their expected browser behaviour.
Inside a volume, the cover can be dragged without remounting the scene.
Routing
Route lifecycle
History / deep links / return
Keep one scene alive while routes change, volumes scroll, and navigation returns to the shelf.
Package fixture
Routes change; catalogue objects do not.
Opening a book adds one history entry. Scrolling through later volumes replaces that entry, so browser Back still has one clear step to the shelf.
The return transition centres the last active book instead of restoring an obsolete page offset.
Integration
Host integration
Semantic HTML / WebGL enhancement
Mount the renderer over ordinary links and retain an accessible catalogue when WebGL is unavailable.
Package fixture
The host supplies structure; the package supplies behaviour.
Ordered anchors provide titles, routes, focus targets, and fallback navigation. The package owns rendering, materials, motion, route state, and geometry.
06 / Terminal scene
Onepersistentrenderer
The book meshes and fold-out plane share one product scene.
07 / Package boundary
Bring your own content.
The catalogue requires semantic volume markup and visual profiles—not a particular framework, CMS, or publishing model.