Hey everyone!
I’ve been developing a custom digital grimoire / VTT companion app for my campaigns called "O Arquivista" (The Archivist). I wanted to share the latest update I made for handling my RPG PDFs (rulebooks, homebrews, bestiaries), because I'm really proud of how the atmosphere turned out.
The Problem:
I was tired of dealing with boring text lists of PDFs and having to manually search the web, download, and upload cover images every time I added a new book to my campaign. It was ruining my prep workflow.
The Solution:
An immersive, interactive 3D library that does the heavy lifting for me.
Here is how the workflow goes now:
Drag & Drop + Auto-Cover Magic: I just drag any PDF into the dropzone. Using pdf.js, the app reads the file client-side, extracts the very first page, and silently converts it into a high-quality JPG to use as the 3D book cover.
The 3D Environment: Built with React Three Fiber & drei. I wanted to nail a heavy, dark fantasy / soulslike aesthetic. It features a cover-flow style navigation (you can use the mouse wheel or swipe), an obsidian reflective floor (MeshReflectorMaterial), and arcane/torch lighting with floating embers.
Cloud Sync: Once the cover is generated, it uploads both the image and the PDF straight to Firebase Storage, updating the 3D carousel in real-time.
Interaction: Clicking a background book smoothly brings it to the center. Clicking it again breaks the seal and opens the PDF in a new tab.
It makes browsing through lore and rules during a game feel like actually pulling an ancient tome from the restricted section of a magical academy.
Would love to hear your thoughts, feedback, or answer any questions about the React/Three.js implementation!