3D Homepage Development Log 01: Decide How the Room Appears
The 3D room began as progressive enhancement: establish a reliable first frame, navigation, and fallback before letting Three.js take over the same composition.
The first question was not what furniture belonged in the room. It was what role the room should have on the site. If the Canvas became the only entrance, a WebGL failure, a low-power mobile device, or a visitor's reduced-motion preference could make the entire personal archive disappear with it.
Two Complete Presentations
The homepage therefore keeps Studio and Classic as sibling presentations. Studio is eligible on a capable desktop with a fine pointer, motion enabled, and working WebGL. Mobile, coarse pointer, reduced motion, initialization failure, and context loss go directly to the complete Classic homepage. Classic is not a temporary loader for 3D; it is a real, readable route through the same site.
Studio does not begin on black either. The page paints a Blender poster from the authored camera while the top navigation is already usable. Three.js replaces that poster in place only after producing its first valid frame. Download and GPU initialization no longer change the composition, and the site never flashes a fully usable Classic page before abruptly covering it.
Canvas Does Not Own All Content
This stage also established a boundary that survived every later revision. The room can provide space, objects, and camera motion, but it cannot be the only navigation or content surface. Blog, Photography, Calligraphy, Music, and Games remain native buttons. Reading surfaces and real links remain DOM, preserving keyboard operation, screen-reader structure, and browser-native behavior.
The first prototype had simple geometry and materials, but it solved the expensive architectural decisions early: one renderer, one explicit capability gate, one same-camera first-paint poster, and a complete fallback when any part of the spatial experience fails.
The image shows the later finished room, but it still uses the entry contract defined in this first stage: a stable first paint followed by an in-place live handoff.