An interactive tool to control camera angles and generate consistent character/object views using Nano Banana.

• 🎮 Interactive 3D Camera Control - Drag to adjust azimuth, elevation, and distance
• 🖼️ Image Upload - Upload any character or object image
• 🤖 AI-Powered Generation - Uses Gemini 2.5 Flash to re-render images from new camera angles
• ⚡ Real-time Preview - See parameter changes instantly in the 3D visualizer

• Node.js (v18 or higher recommended)
• A Gemini API Key from Google AI Studio

1. Clone the repository:

   git clone https://github.com/luanluan-l/ControlCameraViews.git
   cd ControlCameraViews

2. Install dependencies:

   npm install

3. Set up environment variables:

   cp .env.example .env.local

   Then edit .env.local and add your Gemini API key:

   GEMINI_API_KEY=your_actual_api_key_here
   

4. Run the development server:

   npm run dev

5. Open http://localhost:3000 in your browser.

1. Enter your API Key - Paste your Gemini API key in the input field (top left)
2. Upload an Image - Click the upload box to select a character or object image
3. Adjust Camera - Use the 3D visualizer or sliders to set your desired camera angle
4. Generate - Click "Generate New View" to create a new perspective

• React 18 with TypeScript
• Three.js / React Three Fiber for 3D visualization
• Vite for fast development and building
• Tailwind CSS for styling
• Google Gemini API for AI image generation

This project is open source and available under the MIT License.

Contributions, issues, and feature requests are welcome! Feel free to open an issue or submit a pull request.