Decorate My BMW M5 - Car Customization Game

Seele01-Flash
By
Decorate My BMW M5 is a creative car customization game where you can transform a BMW M5 with various body kits, spoilers, and styling parts to create your dream sports car.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "**3D Ultimate Car Customizer**". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: High-fidelity "Tuning Garage" aesthetic. Use a dark, sleek gradient background (Midnight Blue to Black) similar to the reference image, but in a 3D space. * **The Car (Core Asset)**: Create a modular sedan model (representing a BMW M5) using geometric primitives (BoxGeometry, CylinderGeometry) or `GLTFLoader` placeholders. The car **must** be grouped into separate modify-able nodes: `Chassis`, `FrontBumper`, `RearBumper`, `Hood`, `Spoiler`, and `Wheels`. * **Materials**: Use `MeshStandardMaterial` for realistic PBR lighting. The car paint should be metallic and reflective. The floor should be a glossy plane with a `GridHelper` or reflection to simulate a showroom floor. * **Lighting**: Setup a "Studio Lighting" rig using a mix of `AmbientLight` (low intensity) and `SpotLights` (high intensity) to create dramatic highlights on the car curves. * **Optimization**: Use low-polygon base shapes for the procedural car parts to ensure 60FPS on mobile devices. Enable `antialias: true` in the renderer. ### 2. Audio Requirements * **BGM**: A loopable, mid-tempo "Urban/Garage" hip-hop instrumental beat (reminiscent of early 2000s racing games like NFS Underground). * **Sound Effects (SFX)**: * **Installation**: A heavy metallic "Clank" or pneumatic "Wrench" sound when a part is successfully attached. * **UI Interaction**: A subtle "Click" for selecting menus. * **Rotation**: A soft "Whoosh" air sound when spinning the camera quickly. ### 3. Gameplay Loop * **Mechanic**: The player starts with a stock "Base Model" car. * **Interaction**: Scattered around the car (or organized in a bottom tray UI) are various aftermarket parts (Body kits, Spoilers, Hood scopes). * **Action**: The player must drag a part from the tray/scene and drop it onto the specific zone of the car (e.g., Dragging a spoiler onto the trunk area). * **Logic**: Using a Raycaster, detect if the dragged part hovers over the correct "Snap Point" on the car. If released near the point, the part snaps into position and replaces the old part. * **Goal**: Create a unique custom car configuration. No win/loss state; pure creative sandbox. ### 4. Mobile Controls & Interaction * **Camera Control**: Implement `OrbitControls`. Single-finger drag to rotate the view around the car. Two-finger pinch to zoom in/out. * **Part Manipulation (Drag & Drop)**: * Implement a **Raycaster** system for touch events (`touchstart`, `touchmove`, `touchend`). * When the user touches a detached part, disable camera controls to allow dragging the object. * When the user releases the part, re-enable camera controls. * **Visual Feedback**: * When a part is being dragged and hovers over a valid slot, the slot on the car should highlight (change material emissive color to Green). * **Haptics**: Trigger `navigator.vibrate(50)` when a part successfully snaps into place. * **Orientation**: Force or optimize layout for **Landscape Mode**, placing the car in the center and the parts palette on the sides or bottom. UI buttons must be at least 44x44px. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Decorate My BMW M5 is an engaging car customization simulator that puts you in the driver's seat of automotive creativity. This free online game allows you to transform a sleek BMW M5 into your personalized dream machine using an extensive collection of aftermarket parts, body kits, and styling accessories.

Core Features

Authentic BMW M5 Customization

Work with a detailed BMW M5 model featuring accurate proportions and realistic styling. The game provides both front and rear views, allowing you to see how your modifications look from multiple angles.

Extensive Parts Collection

Choose from a wide variety of customization options including: - Aggressive body kits with aerodynamic front and rear bumpers - Performance spoilers and wing attachments - Custom exhaust systems with multiple outlet configurations - Stylish hood modifications for enhanced aesthetics - Side skirts and diffusers for a complete transformation

User-Friendly Interface

The intuitive drag-and-drop system makes customization simple and enjoyable. No complex menus or confusing controls - just pure creative freedom at your fingertips.

Cross-Platform Compatibility

Enjoy seamless gameplay on both desktop computers and mobile devices through your web browser. No downloads required - start customizing immediately.

Gameplay Experience

The game presents you with a stock BMW M5 and a selection of aftermarket parts displayed around the vehicle. Your mission is to create the most impressive and personalized version possible. Mix and match different components to achieve your ideal look, whether you prefer subtle elegance or aggressive street racing aesthetics.

Creative Freedom

There are no wrong choices in this customization playground. Experiment with different combinations to discover unique styles that reflect your automotive taste. The game encourages creativity and personal expression through car modification.

Operation Guide

Basic Controls

  • Mouse Drag : Click and hold the left mouse button on any part, then drag it to the desired position on the BMW M5
  • Part Selection : Browse available modifications by observing the parts displayed around the vehicle
  • Positioning : Carefully place each component to achieve the perfect fit and alignment
  • Preview : View your customized BMW from both front and rear angles to ensure satisfaction with your design

Tips for Success

  • Start with major components like front and rear bumpers before adding smaller details
  • Consider the overall aesthetic balance when combining multiple modifications
  • Experiment with different exhaust configurations to find your preferred sound and look
  • Take advantage of the multiple viewing angles to perfect your design

Why Play This Game

Perfect for Car Enthusiasts

If you've ever dreamed of owning and customizing a BMW M5, this game provides a risk-free environment to explore your modification ideas. Experience the satisfaction of creating a unique vehicle without the real-world costs and commitment.

Stress-Free Entertainment

Unlike racing games that require quick reflexes, this customization simulator offers a relaxing, creative experience. Take your time to perfect every detail and enjoy the process of automotive artistry.

Educational Value

Learn about different aftermarket parts and their effects on vehicle appearance. The game helps develop an understanding of automotive styling and modification principles.

Instant Gratification

See immediate results from your modifications without waiting for real-world installation times or dealing with compatibility issues. Every change happens instantly, allowing for rapid experimentation and iteration.

Frequently Asked Questions (FAQ)