Interactive Metatron's Cube 3D Geometric Generator

Overview

This single-file application is a specialized tool for rendering, rotating, and customizing a 3D Metatron's Cube wireframe. Built using the Three.js library via CDN, it provides an interactive canvas for geometric exploration, perfect for artists, students, and meditation practitioners.

Core Features

• Real-Time 3D Rendering: High-performance WebGL-based visualization of Metatron's Cube.
• Interactive Controls: Click-and-drag to rotate the cube; mouse wheel to zoom.
• Visual Customization: Toggle between different wireframe modes, adjust line thickness, line color, and node transparency.
• Export Capability: Capture a high-resolution snapshot of the current 3D state as a PNG file.
• Responsive UI: Control panel that adapts to mobile, tablet, and desktop viewports.

UI Layout

• Main Display: A full-screen or large centered canvas container using WebGL.
• Sidebar/Floating Overlay: A clean, white, semi-transparent frosted-glass panel containing:
  • Appearance Settings: Color picker (nodes and lines), line thickness slider.
  • View Controls: Toggle auto-rotation, reset camera position, perspective vs. orthographic view.
  • Actions: "Download Snapshot" button.
• Header/Footer: Minimalist header showing the tool name and a brief instruction tooltip.

Color Palette & Aesthetic

• Base Theme: Pure white (#FFFFFF) and light grey (#F8F9FA) background to ensure a bright, professional aesthetic.
• UI Elements: Soft, muted blues (#4A90E2) and teals (#50E3C2) for interactive highlights.
• 3D Assets: Nodes and edges should feature clean, crisp anti-aliased lines. Use a light theme for 3D elements (e.g., silver/grey metallic, or soft electric blue) against the light background.
• Shadows: Subtle, high-quality drop shadows for the UI panel (e.g., box-shadow: 0 4px 6px rgba(0,0,0,0.1)).

Technical Implementation Directives

1. Architecture: Everything must be contained in ONE single HTML file (CSS in <style>, JS in <script>).
2. Libraries: Use Three.js via CDN (e.g., https://unpkg.com/[email protected]/build/three.min.js).
3. Sandboxed Compatibility:
   • Absolutely NO localStorage, sessionStorage, or cookies.
   • No alert(), prompt(), or confirm(). All feedback must be rendered via custom DOM elements (e.g., toast notifications or overlay modals).
   • All external links must have target="_blank" rel="noopener noreferrer".
4. Performance: Optimize Three.js scene (use requestAnimationFrame). Implement an automatic "stop rotation" on user interaction to save battery/cycles.
5. Responsive: Ensure the canvas resizes correctly upon window resize events using renderer.setSize(width, height) and updating the camera aspect ratio.