Product showcase

I need you to build a high-end, interactive 3D Automotive Showcase website. The goal is a "scrollytelling" experience where the user scrolls (or uses buttons) to move a camera around a 3D car model, highlighting specific features with smooth transitions.

Tech Stack:

  • React (Vite ecosystem)
  • @react-three/fiber & @react-three/drei
  • Zustand (for state management)
  • Tailwind CSS
  • Lucide React (or SVG icons) for UI

Assets to use:

  • 3D Model: https://pub-02d132b7ade94372a708d0a2057e464b.r2.dev/2021_porsche_911_turbo_s_992.glb
  • Audio: https://pub-02d132b7ade94372a708d0a2057e464b.r2.dev/porsche.mp3
  • Logo 1 (Crest): https://pub-02d132b7ade94372a708d0a2057e464b.r2.dev/Porsche-Logo.png
  • Logo 2 (Text): https://pub-02d132b7ade94372a708d0a2057e464b.r2.dev/porsche.png
  • Font: Import 'Michroma' (headers) and 'Inter' (body) from Google Fonts.

Core Features & Requirements:

  1. State Management (Zustand):
    • Track the currentWaypointIndex (0 to N).
    • Track carColor (default to Agate Grey).
    • Track isDarkMode.
    • Track modelUrl (allow the user to upload their own .glb or use the default Porsche).
  2. The 3D Scene (Experience.tsx):
    • Lighting: Professional studio lighting. Use Environment (preset="city"), ContactShadows for the floor, and a SpotLight for key lighting.
    • Model Logic:
      • Auto-scale the model so it fits the scene regardless of original units.
      • Car Paint Logic: I need a specific feature where changing the carColor only affects the car body. You must traverse the mesh and change the material color unless the material name contains words like "glass", "window", "tire", "rim", "interior", "light", etc.
    • Camera System:
      • Do not use <OrbitControls>.
      • Create a custom CameraHandler component.
      • It should accept an array of WAYPOINTS. Each waypoint has a position (camera location) and target (where the camera looks).
      • Use THREE.MathUtils.lerp inside useFrame to smoothly transition the camera and the lookAt target when the index changes.
  3. The Waypoints (Storytelling):
    Define a constant array of waypoints with: { title, description, position: [x,y,z], target: [x,y,z], placement: 'top-left' | 'center-right', etc. }.
    • Frame 1: Side view, Intro.
    • Frame 2: Front grill zoom.
    • Frame 3: Wheel zoom.
    • Frame 4: Side profile.
    • Frame 5: Rear view.
    • Frame 6: Top-down view.
    • Frame 7: "Exit" view (camera moves away).
  4. The UI Overlay:
    • Typography: 'Michroma' for uppercase headers, 'Inter' for descriptions.
    • Positioning: The text should change position based on the waypoint placement property (e.g., top-left, bottom-right) to avoid covering the car.
    • Animations: Text should fade out/blur when changing slides and fade in/unblur when settling.
    • Intro Animation: On the very first slide, show a large Porsche crest in the background that fades out when the user scrolls to the second slide.
    • Controls:
      • Previous/Next arrow buttons.
      • Mute toggle.
      • Dark mode toggle.
      • "Change Model" button (resets to an upload screen).
      • Color Picker: A row of colored squares to change the car paint.
  5. Interactivity:
    • Allow navigation via Mouse Wheel (throttled), Arrow Keys, or on-screen buttons.
    • Support Drag & Drop to upload a custom .glb file.

‍

Google AI Studio
rare_prompts
Copy