A single-file Three.js studio concept built around an interactive Kyoto lobby, playable objects, and an editorial portfolio.
View the live project · View the source · Read the build prompt
- Opens with a real-time 3D machiya lobby containing CRTs, a playable arcade cabinet, a basketball hoop, and a sliding room.
- Lets visitors move between interactive lobby states, return to the main camera, and continue into a responsive studio portfolio.
- Combines procedural materials, custom shaders, generated canvas textures, embedded image and GLB data, particle-scroll typography, and a projected 3D menu.
The project is intentionally packaged as one index.html: markup, responsive styles, scene code, shaders, image data, and compressed 3D assets live together. The main lobby uses Three.js with a custom VHS post-processing pass, procedural textures, camera-state transitions, collision bounds, and small game loops.
The page below the lobby uses plain HTML, CSS, and JavaScript. Selected ThreeUI and Canvas UI effects were ported to this standalone runtime; their integration notes are kept beside the relevant source. There is no build step, package manager, server component, account system, or private runtime configuration.
Use the portable build prompt as a starting point for a new studio identity, another architectural setting, or a smaller interaction study. Replace the name, contact details, images, and embedded models before adapting the concept for another brand.
From this directory, run:
python3 -m http.server 4173 --bind 127.0.0.1Then visit http://127.0.0.1:4173/.
The page loads Google Fonts and the Three.js 0.160.0 ES module from public CDNs, so those requests need a network connection. All project images and GLB scene assets are embedded in index.html.
sublevel-studio/
├── index.html
├── README.md
├── PROMPT.md
├── .gitignore
├── .nojekyll
└── assets/
└── sublevel-studio-preview.jpg
- ThreeUI — an open-source catalog of interactive Three.js components. View source.
- Kage — an interactive five-chapter night walk through a Kyoto mountain temple. View source.
- Complete Shelf — seven interactive clothbound hardcovers in a single-file Three.js library. View source.
- Sylva — a procedural, pointer-responsive moss landscape. View source.
- Towers — self-building Japanese, Chinese, and Thai tower studies. View source.
Explore more projects on GitHub →
The implementation includes Three.js and ports of selected ThreeUI and Canvas UI components, with integration details documented inline. The studio concept, scene composition, editorial content, and interaction choreography are packaged here as an independent demonstration.
No open-source license is included. The source is publicly viewable, but reuse or redistribution rights are not granted explicitly.