Interactive 3D Metatron's Cube Visualizer

Overview

A high-performance, single-file browser application that renders a mathematically accurate 3D Metatron's Cube wireframe. The tool empowers users to explore sacred geometry through interactive controls, allowing for the adjustment of vertices, line weight, opacity, and rotation, all within a clean, professional light-mode aesthetic.

Core Features

• Real-time 3D Rendering: Uses Three.js for hardware-accelerated 3D wireframe visualization.
• Interactive Orbit Controls: Users can drag to rotate, scroll to zoom, and pan around the geometry.
• Customizable Parameters:
  • Line Thickness: Adjust wireframe strokes.
  • Color Picker: Change the color of the nodes and lines (supports hex inputs).
  • Node Visibility: Toggle spheres on the intersection points.
  • Animation Toggle: Enable or disable auto-rotation.
• High-Quality Export: Capture the current canvas view as a PNG image for external use.
• Responsive Design: Fluid layout that adapts the control panel and canvas viewport to any device width.

Technical Implementation Constraints

• Single File Architecture: All HTML, CSS (Tailwind via CDN), and JS must be inside one .html file.
• No Persistence: NO localStorage, sessionStorage, or cookies. The application state must be maintained in a standard JavaScript object/variable.
• Light Mode Only: The UI must be strictly clean white/light grey, using subtle shadows and soft borders. NO dark mode allowed.
• Security: Run in a sandboxed manner. Use target="_blank" for all external references.
• Libraries: Load three.min.js and OrbitControls.js via official CDNs.

UI/UX Specification

• Layout:
  • Left Sidebar (Desktop): A fixed-width panel (300px) containing sliders and color inputs for parameter adjustments.
  • Main Area: A full-window canvas. On mobile, the panel should be a slide-over or collapsible drawer to maximize the 3D view.
• Typography: Use a clean, sans-serif, system font stack for maximum readability.
• Color Palette:
  • Background: #FFFFFF
  • Sidebar Background: #F9FAFB
  • Border/UI Elements: #E5E7EB
  • Primary Accent (Buttons/Active): #3B82F6
  • Text: #111827

Development Roadmap

1. Setup: Create HTML boilerplate and include the Three.js CDN.
2. Engine: Initialize the Scene, Camera, and Renderer. Create a geometry group representing the 13 circles and the connecting lines of the Metatron's Cube.
3. Interface: Build the control panel using clean HTML/CSS. Hook up UI events to Three.js properties (e.g., changing line color, toggling wireframe modes).
4. Refinement: Ensure transitions are smooth. Add an event listener to the window resize event to update the aspect ratio of the camera.
5. Cleanup: Final verification to ensure zero use of persistent storage and strict adherence to the light-mode theme.