The Complete Shelf: interactive clothbound hardcover books in Three.js

What The Complete Shelf is

The Complete Shelf is a piece of interactive creative coding: a single-file Three.js project that renders seven clothbound hardcover books on a shelf and lets you pull one out, open it, inspect it closely and put it back, all in the browser with WebGL. It is presented as an original work by its author, with a live page you can open directly. The audience is creative coders, designers and anyone interested in tactile, book-like 3D interaction on the web, whether to enjoy it, study how it is made, or draw inspiration for their own work. It is not a general library or a product but a self-contained demonstration and reference, so its value is the craft, realistic cloth-bound book models and a smooth interaction flow of shelf to opening to inspection, delivered in one HTML file that runs anywhere a modern browser does.

A single-file WebGL interaction

The mechanism is a Three.js scene driving a deliberate interaction sequence. The README describes the flow, from the shelf to an opening detail, to closed inspection, to the open book, to closing and back to the shelf, which is the choreography that makes the books feel handled rather than merely displayed. The whole thing lives in a single index.html, so the geometry, materials, lighting and interaction logic are together in one file, which is part of its character as a study piece: it is compact enough to read. The clothbound look comes from careful materials and lighting in WebGL, and the seven books give variety within the same interaction. Being one file is the defining trait, it means the project is easy to open, host and inspect, and it demonstrates that a rich, tactile 3D interaction can be built and shared as a single self-contained page.

Running it

There is a hosted page you can open directly to try it, which is the simplest path. To run it yourself, because it is a single HTML file with WebGL, you serve the folder over a local web server rather than opening the file directly, which browsers restrict for local assets. A minimal static server works, for example:

python3 -m http.server 4173

Then open the printed local address in a browser. The repository is just the index.html plus assets and a prompt file, so there is no build step. The first real use is opening the hosted page or the local server, pulling a book from the shelf, opening it and inspecting it, which is the whole experience, and, if you are studying it, reading the single index.html to see how the shelf-to-open-to-inspect interaction and the clothbound materials are implemented, since everything is in that one file.

Where a creative-coding piece is bounded, including no license

The limitations start with licensing: the repository ships no license file, so default copyright applies, and while you can view the live page and read the code, you have no explicit grant to reuse or redistribute it, which matters if you want to build on it or adapt the technique, and is worth resolving with the author. Beyond that, it is a focused creative piece, not a reusable library: it renders these specific seven books with this specific interaction, so using it as a general book-rendering component would mean extracting and adapting code that was written as one self-contained work. As a WebGL scene it depends on the browser and hardware for smooth rendering. And it is a demonstration rather than a maintained product with an API. These are not flaws but the nature of a single-file art-and-craft project, which is meant to be experienced and studied more than imported.

The Complete Shelf versus building your own

The alternative is building a 3D book interaction yourself in Three.js, or using a general 3D UI library. Building your own gives full control and clear ownership, but you do the work of modeling clothbound books, lighting them convincingly and choreographing the open-and-inspect interaction, which is exactly the craft this project already demonstrates. A general 3D library provides primitives but not this specific tactile book experience. The Complete Shelf's difference is that it is a finished, studyable reference of how to do this well in a single file, so its main value to a developer is as inspiration and a worked example rather than a dependency, especially given the licensing to resolve. Study it to learn the technique and see what a polished result looks like; build your own, or clear reuse with the author, when you want something you can ship and own.

No license, and status

The status to note is that The Complete Shelf is an original, self-contained Three.js creative-coding project, seven interactive clothbound hardcovers in a single HTML file with a live demo, but it ships no license file, so treat it as viewable and studyable while resolving reuse rights with the author before adapting or redistributing it. The last push was on 2026-08-15. Enjoy and learn from it when you want a polished example of tactile 3D book interaction on the web: open the hosted page or serve the file locally to experience it, read the single index.html to understand how the shelf-to-open interaction and the clothbound materials are built, and, if you want to build on the technique, clear the licensing with the author first since the missing license leaves reuse rights unstated.

Editorial conclusion

Open The Complete Shelf if you want to experience or study a polished, single-file Three.js interaction of clothbound hardcover books you pull, open and inspect in the browser. Do not treat it as a reusable library or adapt it without resolving the missing license, since default copyright applies. Try the hosted page, or serve the folder locally with a static server such as python3 -m http.server, read the single index.html to learn the technique, and clear reuse with the author before building on it.

Frequently asked questions

Official sources

1. Issues
2. MengTo/complete-shelf on GitHub
3. Project website
4. README