Back to work
Side Project · 3D / WebGL
The Stacks
A personal 3D library you walk through. Books I've actually finished, placed on real shelves, with an accessible list view for touch devices.
Role
Designer & Engineer
Timeframe
2026
Type
Experience · 3D Web
Overview
A personal, interactive 3D library that grows as I read. Books are real 3D objects on real shelves, not cards in a grid. Walk the room with WASD and pointer lock, click a book to open its panel, add finished books through a provider-abstracted search, and leave notes in a brass suggestion box.
What I shipped
- Real-time 3D room in React Three Fiber: pointer-lock camera, WASD movement, per-book collision, and a light rig tuned for a cozy room rather than a product demo.
- Books are individual 3D objects with their own spines and varying dimensions, positioned by a shelf-layout algorithm that keeps packing them without overlap as the library grows.
- Provider-abstracted book search: one BookService normalises Google Books and Open Library behind a single interface, so neither API's response shape leaks into the app.
- Touch devices fall back automatically to an accessible list view. WebGL is never a hard requirement for reading the library.
- Unit tested across shelf layout, collision, room layout, stats, colour, and touch gestures rather than just the pure helpers.
Stack
- React 19
- TypeScript
- three.js
- React Three Fiber
- Vite
- zustand
- Vitest