Metal sphere

Role: Act as a world-class senior frontend engineer specializing in React, Three.js (React Three Fiber), and UI/UX design. Goal: Create a high-fidelity, cinematic 3D web application called "Lumina Sphere AI". The app features a reactive, highly reflective chrome sphere situated in high-resolution environments. It integrates Google Gemini for scene analysis and geocoding. Tech Stack: Framework: React 19 (ESM modules via index.html) 3D Engine: React Three Fiber (@react-three/fiber), React Three Drei (@react-three/drei), Three.js Styling: Tailwind CSS (via CDN) AI: Google GenAI SDK (@google/genai) Icons: Lucide React Core Features & Controls: The Artifact (Central Sphere): - Material: High-gloss chrome (roughness: 0.05, metalness: 1.0, clearcoat: 1.0). - Geometry Slider: A slider (0-8) controlling the detail. - Levels 0-7: Uses IcosahedronGeometry. Low levels look faceted (like a disco ball) with flat shading enabled. - Level 8 (Max): Swaps geometry to a high-res SphereGeometry (128x128 segments) and forces smooth shading for a perfect, mirror-like finish. Critical: The material key must change when switching between polygonal and smooth to force shader recompilation. - Color Control: A color picker to tint the chrome material. Environment System: - 4K HDRIs: The app must use high-quality 4K HDRIs from Polyhaven for background and lighting. - Snow Field, Venice Sunset, Chapel, Blue Studio, Pure Sky, City Night, Warehouse, Forest. - Google Street View Integration: - Allow the user to select "Street View (Google)" as an environment. - Input: A text box to type a location (e.g., "Eiffel Tower"). - Logic: Use Gemini (model: gemini-3-flash-preview) to geocode the location name into lat and lng coordinates. - Rendering: Fetch a 1024x1024 panorama from the Google Maps Static Street View API and map it to a large sphere surrounding the scene using EquirectangularReflectionMapping. Holographic Overlays: - Grid Toggle: Show/Hide a wireframe overlay around the sphere. - Grid Styles: - Standard: Clean latitude/longitude lines without diagonal wires. - Lattice: A wireframe icosahedron with glowing vertices. AI Analysis (Gemini Integration): - A "Sync" button that sends the current scene state (colors, geometry, environment, location) to Gemini. - Gemini returns a JSON object containing: - mood: A short mood tag. - analysis: An artistic description of the scene. - suggestion: A creative tip to improve the visual. Visual & UI/UX Design: Theme: Dark mode, futuristic, "System Online" aesthetic. Interface: A glassmorphism floating panel on the right side (backdrop-blur-2xl, bg-black/60). Canvas: Full-screen, toneMappingExposure: 1.2, antialias: true, shadows enabled. Loading: Use Suspense with a "System Online" loader indicator. Specific External Assets (Polyhaven 4K Links): Use these exact URLs to ensure crisp backgrounds: https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/snowyfield4k.hdr https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/venicesunset4k.hdr https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/chapelday4k.hdr https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/bluephotostudio4k.hdr https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/kloofendal48dpartlycloudypuresky4k.hdr https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/dikhololonight4k.hdr https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/emptywarehouse014k.hdr https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/forestslope4k.hdr