🥤 3D Drink Cup Customizer

A sleek, modern web application that allows users to customize a 3D drink cup in real-time. Built with Next.js 14, this app features a stunning Dark Glassmorphism & Warm Neon (Orange/Yellow) aesthetic, complete with an interactive 3D canvas and a powerful AI-powered design generator.

✨ Features

• Interactive 3D Viewer: Powered by three.js & @react-three/fiber, providing a high-quality, real-time 3D inspection of the cup.
• AI Design Generator: Generate stunning patterns and logos using OpenRouter AI (Model: sourceful/riverflow-v2-pro).
• Dynamic Texture Mapping: Instantly apply generated AI designs or uploaded .png images onto the cup's surface as a decal.
• IndexedDB Persistent Gallery: High-res designs and 3D screenshots are automatically saved and persistent even after page refreshes.
• Premium UI/UX: A dark-themed glassmorphism design with responsive neon lighting effects and smooth micro-animations.
• Save & Export: High-quality 2D renders of your final 3D design can be exported directly to your device.

🛠️ Tech Stack

• Framework: Next.js 14 (App Router)
• 3D Core: Three.js + React Three Fiber + @react-three/drei
• Generative AI: OpenRouter API
• Storage: IndexedDB (via idb-keyval)
• Styling: Tailwind CSS v3
• Icons: lucide-react

---

🚀 Getting Started

1. Prerequisites

• Node.js (v18.0.0 or higher recommended)
• OpenRouter API Key

2. Installation

# Clone the repository
git clone https://github.com/ideapedyudi/cup-customizer.git

# Navigate to directory
cd cup-customizer

# Install dependencies
npm install

3. Environment Configuration

Create a .env.local file in the root directory and add the following:

OPENROUTER_API_KEY="your_api_key_here"
OPENROUTER_MODEL="sourceful/riverflow-v2-pro"

Important

Since the project uses OpenRouter for image generation, ensure your API key has sufficient credits for the selected model.

4. Running Locally

npm run dev

Open http://localhost:3000 to see your app in action!

📜 License

Built for creative prototyping. Feel free to use and adapt this for your own projects.