LUMA 3D Product Showcase

A high-performance, ultra-luxury 3D product showcase built with the modern React stack. Features a real-time 3D configurator, seamless dark/light mode switching, and procedural material generation.

🔗 Live Demo

luma-web3-us4a.vercel.app

🏗 Architecture

graph TD
    Client[User Browser] -->|Routes| Router[React Router]
    
    subgraph State Management
        ThemeStore[Zustand Theme Store]
        LocalState[Home Page State]
    end

    Router --> Layout[Main Layout]
    Layout --> Nav[Navigation & Theme Toggle]
    
    Layout -->|/| Home[Home Page]
    Layout -->|/shop| Shop[Shop Page]
    
    Home --> Canvas[3D Canvas (R3F)]
    Home --> UI[HTML Overlay]
    
    subgraph 3D Scene
        Canvas --> Cam[Camera Rig]
        Canvas --> Lights[Studio Lighting]
        Canvas --> Bottle[Procedural Bottle]
        Canvas --> Env[Environment & Post-Pro]
    end
    
    subgraph Interface
        UI --> Hero[Hero Section]
        UI --> Config[Configurator Panel]
        UI --> Features[Scroll Features]
    end

    %% Interactions
    Nav -->|Toggles| ThemeStore
    ThemeStore -->|Updates Styles| Layout
    ThemeStore -->|Updates Colors| Canvas
    
    Config -->|Selects Color/Mat| LocalState
    LocalState -->|Updates| Bottle

Loading

🛠 Tech Stack

• Framework: Vite + React + TypeScript
• 3D Engine: React Three Fiber (Three.js 0.160)
• Styling: Tailwind CSS
• Animation: GSAP + Framer Motion
• State Management: Zustand
• Quality: Vitest, ESLint, Prettier

🚀 Getting Started

1. Installation

npm install

Note: We rely on specific peer dependencies for postprocessing. If you encounter issues, try npm install --legacy-peer-deps.

2. Development

npm run dev

Open http://localhost:5173

3. Build

npm run build

📦 Asset Pipeline

• Models: Place your .glb files in public/models/.
• Compression: Use gltf-pipeline to Draco compress your models for production:

  gltf-pipeline -i input.glb -o bottle-draco.glb -d

• Fallback: The project uses a procedural cylinder fallback (src/scene/BottleModel.tsx) if no GLTF is loaded, ensuring the dev server works immediately.

🎥 Exporting Video

To capture a promotional video or OG image:

npm run capture

This runs a Headless Chrome instance via Puppeteer to screenshot the landing state.

🧪 Testing

Run the utility test suite:

npm run test