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:

  1. 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.
  2. 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.
  3. 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.
  4. 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/snowy_field_4k.hdr
  • https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/venice_sunset_4k.hdr
  • https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/chapel_day_4k.hdr
  • https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/blue_photo_studio_4k.hdr
  • https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/kloofendal_48d_partly_cloudy_puresky_4k.hdr
  • https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/dikhololo_night_4k.hdr
  • https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/empty_warehouse_01_4k.hdr‍
  • https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/forest_slope_4k.hdr

‍

Google AI Studio
rare_prompts
Copy