Inspiration

We wanted readers to step inside the stories instead of only reading them. Books like The Kite Runner, Harry Potter, and Apollo 13 have moments that feel like real places Kabul, Hogwarts, the Moon. We thought, what if you could walk through those places in 3D. That idea led to building a library where each book opens into an explorable world.

What it does

You see a 3D library with three books. When you click a book, it opens with an animation and loads a 3D scene from that story. You can move with WASD, look around with the mouse, and in some scenes (Harry Potter, Apollo) you control a character in the world. Harry Potter book takes you to a second scene (Potions classroom). So it s choose a book - step inside - explore the world.

How we built it

3D frontend and a small backend. The frontend uses Three.js for the library and the Spark library to render Gaussian splat scenes (.spz) so the story worlds look dense and realistic. We used Vite and TypeScript for the app. For some worlds (Harry Potter s Quidditch pitch and Potions classroom) we used the World Labs Marble API: a Python script calls the API, waits for the generated scenes, and saves URLs into a JSON file. The frontend loads that file and uses those URLs so the app can show both pre made scenes and API-generated ones. Character movement, camera and UI

Challenges we ran into

Getting the right 3D assets was hard - we needed splat scenes and character models for each book. For Harry Potter we didn't have local Hogwarts scenes at first, so we relied on the Marble API and had to handle loading and fallbacks (show another scene if the API file is missing). We also had to tune performance (splat quality, LOD) so heavier scenes like the Moon and Hogwarts run smoothly. Making the enter the story flow feel good book open animation, loading state, then scene and character took several iterations.

Accomplishments that we're proud of

We re proud of the full loop: pick a book in a 3D library, watch it open, then land inside a real explorable world with movement and a character. Combining pre made splats with API generated Marble worlds in one app felt like a big step. We re also happy with the details: loading timeout so users aren t stuck, and a clear Back to library flow so it s easy to switch stories.

What we learned

We learned to load and render Gaussian splat (.spz) scenes in the browser with Spark and Three.js, and to use the Marble API from a Python script plus JSON config. We also improved how we structure a 3D web app (library vs in-scene state, camera, character controls) and how we handle missing assets, loading, and performance.

What's next for Story Worlds

We want to add more books and worlds, improve the Harry Potter path with more portals and better generated scenes and add simple story beats so it feels more like a narrative, not just exploration.

Built With

Share this project:

Updates