Holodeck | Immersive 3D Archive & Spatial UI Portfolio

Explore an infinite 3D neural grid built with Three.js and CSS3D. This Holodeck archive showcases the future of spatial computing, procedural shaders, and immersive web-based data visualization.

Click here to access.

1. The Core Engine

The logic is driven by Three.js, acting as a high-level scene graph manager that coordinates two distinct rendering pipelines.

• Hybrid State Machine: The engine manages the "Focus Mode" and "Exploration Mode." In Focus Mode, the engine overrides manual controls to lock the camera onto a specific coordinate (targetZ).
• Asynchronous Data Streaming: Content is managed via an array of objects (cvSections). The engine simulates real-time data retrieval through a recursive typeWriter function that updates the DOM nodes attached to 3D objects.
• Checksum & Integrity Watchdog: Although simplified in this snippet, the architecture includes a standard "heartbeat" pattern used in experimental web labs to ensure background assets and attribution links (like the backlink-tag) remain active in the DOM.

2. Rendering Technology

This project employs a Dual-Renderer Architecture, combining high-performance graphics with standard web accessibility.

• WebGL Renderer: Handles the "Neural Grid" and spatial depth. It uses a GridHelper for the floor, providing a sense of scale and infinite horizon.
• CSS3D Renderer: This is the most critical technology here. Unlike standard WebGL (which renders shapes as pixels on a canvas), the CSS3DRenderer transforms actual HTML elements (the .cv-card divs) into 3D objects.
  • Advantage: Text remains selectable, searchable, and crisp, utilizing the browser's native font rendering while inheriting 3D perspective and backdrop-filter: blur(15px).
• Depth Testing & Blending: The engine uses a high "Far Plane" ($40,000$ units) in the PerspectiveCamera to prevent objects from clipping out of existence as the user scrolls into the infinite archive.

3. Mathematical Tools

Precision movement and the "Spatial UI" feel are achieved through Linear Algebra and Trigonometric Oscillations.

• Linear Interpolation (Lerp): The engine uses THREE.MathUtils.lerp for "Elastic Camera" movement. This ensures that when the user scrolls or moves the mouse, the camera "floats" toward the target rather than snapping instantly.

• Harmonic Motion: Each archive card has a subtle levitation effect calculated via a Sine Wave: Math.sin(time + i) * 15. This prevents the static grid from appearing rigid and simulated.
• Camera Frustum Mapping: The engine maps 2D mouse coordinates (X, Y) to 3D rotation angles (radians). For example, the camera's tilt is calculated based on the mouse's distance from the center of the screen, creating a "parallax" effect.

4. Front-End Environment

The environment is a Modern ES Module (ESM) ecosystem designed for zero-latency interaction.

• Import Maps: The lab uses an importmap to resolve library paths directly from CDNs (Unpkg). This allows the code to run in the browser without a build step like Webpack or Vite.
• Glassmorphism UI: The cards utilize a combination of semi-transparent RGBA backgrounds and backdrop-filter: blur(). This allows the WebGL grid to remain visible behind the high-density content cards.
• Responsive Viewport Handling: The system implements an onresize event that updates the Projection Matrix of the camera and the resolution of both renderers simultaneously, ensuring the archive looks consistent on mobile and desktop ultra-wide monitors.