Poliedro: Patched

// Camera: perspective const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(3, 2, 5); camera.lookAt(0, 0, 0);

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Poliedro - Interactive 3D Polyhedron Viewer & Analyzer</title> <style> body margin: 0; overflow: hidden; font-family: 'Segoe UI', 'Inter', system-ui, -apple-system, 'Roboto', sans-serif; /* UI Panel - sleek glassmorphism */ .controls position: absolute; bottom: 20px; left: 20px; right: 20px; background: rgba(30, 30, 40, 0.75); backdrop-filter: blur(12px); border-radius: 28px; padding: 16px 24px; color: white; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; z-index: 10; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 8px 20px rgba(0,0,0,0.3); font-weight: 500; pointer-events: auto; .control-group display: flex; gap: 12px; background: rgba(0,0,0,0.4); padding: 8px 16px; border-radius: 40px; align-items: center; flex-wrap: wrap; .control-group label font-size: 0.85rem; letter-spacing: 0.5px; opacity: 0.8; select, button background: rgba(20,20,30,0.9); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 6px 14px; border-radius: 32px; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; font-weight: 500; backdrop-filter: blur(4px); select:hover, button:hover background: #3a6ea5; border-color: #8ab3ff; transform: scale(1.02); button:active transform: scale(0.98); .info-panel position: absolute; top: 20px; right: 20px; background: rgba(0,0,0,0.65); backdrop-filter: blur(12px); padding: 12px 20px; border-radius: 24px; color: white; font-family: monospace; font-size: 0.9rem; text-align: right; border-left: 4px solid #ffaa44; pointer-events: none; z-index: 10; box-shadow: 0 4px 15px rgba(0,0,0,0.2); .info-panel h3 margin: 0 0 6px 0; font-size: 1rem; letter-spacing: 1px; .info-panel p margin: 4px 0; font-size: 0.8rem; .stats font-weight: bold; color: #ffaa66; @media (max-width: 700px) .controls flex-direction: column; align-items: stretch; bottom: 12px; left: 12px; right: 12px; padding: 12px; .control-group justify-content: space-between; .info-panel top: 12px; right: 12px; font-size: 0.7rem; padding: 8px 14px; .title-badge position: absolute; bottom: 20px; left: 20px; font-size: 0.7rem; background: rgba(0,0,0,0.4); padding: 4px 10px; border-radius: 20px; color: #ccc; pointer-events: none; z-index: 10; a color: #aaa; text-decoration: none; </style> </head> <body> <div class="info-panel" id="infoPanel"> <h3>📐 POLIEDRO</h3> <p>Solid: <span id="solidName" class="stats">Platonic Dodecahedron</span></p> <p>Vertices: <span id="vertCount" class="stats">0</span> | Edges: <span id="edgeCount" class="stats">0</span> | Faces: <span id="faceCount" class="stats">0</span></p> <p>⚡ Drag to rotate | Right-click + drag to pan | Scroll zoom</p> </div> <div class="controls"> <div class="control-group"> <span>🧊 POLYHEDRON</span> <select id="polySelector"> <option value="tetrahedron">Tetrahedron (4 faces)</option> <option value="cube">Hexahedron / Cube (6 faces)</option> <option value="octahedron">Octahedron (8 faces)</option> <option value="dodecahedron" selected>Dodecahedron (12 faces)</option> <option value="icosahedron">Icosahedron (20 faces)</option> <option value="rhombicuboctahedron">✨ Rhombicuboctahedron (26 faces)</option> </select> </div> <div class="control-group"> <span>🎨 Visual Style</span> <button id="toggleWireframe">Wireframe Mode</button> <button id="resetView">Reset Camera</button> </div> <div class="control-group"> <span>🔮 Auto-spin</span> <button id="toggleSpin">⏵ Spin ON</button> </div> </div> <div class="title-badge">⚡ Poliedro • 3D Geometry Explorer</div> poliedro

// --- setup scene, cameras, renderers --- const scene = new THREE.Scene(); scene.background = new THREE.Color(0x050b1a); scene.fog = new THREE.FogExp2(0x050b1a, 0.008); // subtle depth // Camera: perspective const camera = new THREE

<script type="importmap"> "imports": "three": "https://unpkg.com/three@0.128.0/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.128.0/examples/jsm/" </script> window.innerWidth / window.innerHeight