MyShelves — https://myshelves.eu
A 3D library you walk around in first person. The room starts completely empty — every book on every shelf was either ordered at the lectern (real metadata and covers from the Open Library API) or painted by hand in the binder. You carry books, read them, shelve them, arrange the furniture, push the walls out, and share the room with a link. Built with react-three-fiber, drei, Rapier and postprocessing.
Three things that turned out more interesting than expected:
- A book is four boxes, not one, and only the front cover exists as data. The spine, back cover and page edges are drawn to canvas per book, and the dust jacket wraps — the spine art is a strip sampled from the left edge of the cover at the spine’s own aspect ratio, so the artwork genuinely continues around the fold. The barcode is a real EAN-13 generated from the ISBN.
- Draw calls, never triangles, are the budget. A roomful of books is ~6k tris, but one book is ~19 draws (6 material groups × 4 boxes).
shadowMap.autoUpdate = falsewas the other big win — a shadow map doesn’t depend on the camera, yet three rebuilds it every frame, which for a point light is a cube: six scene renders. It’s now raised by hand only when something actually moved. - Camera judder: physics steps a fixed 1/60 while rendering at 144, so
body.translation()is a staircase. The fix was an empty<object3D>inside the rigid body — react-three-rapier already interpolates onto it every frame.
Feedback very welcome.