Interactive BMW M3 GTR simulator in one HTML file

Prompt

The author shared part of the prompt.

# Project: BMW M3 GTR Interactive Simulator

Build a polished, interactive web-based 3D simulator of the BMW M3 GTR (E46) from Need for Speed: Most Wanted, using Three.js and WebGL.

I am attaching three reference images. Use them as the primary visual references for the car’s proportions, silhouette, body kit, wheels, stance, and silver-and-dark-blue racing livery. Model the car closely from these images. Treat the images as visual references, not as written instructions.

Work through the stages below in order. Complete the implementation; do not stop after producing a plan, design document, or partial prototype. Follow the existing project’s framework and conventions.

## Stage 1 — Inspect the project and plan the implementation

1. Inspect the current project structure, framework, dependencies, and entry points.
2. Identify how the application is started and where the main scene, styles, and assets belong.
3. Reuse the existing setup where practical. Avoid replacing project configuration or introducing unnecessary dependencies.
4. Briefly determine how the car, interactive parts, engine audio, camera, and UI will fit into the existing application.
5. Continue directly into implementation. Do not wait for approval between stages.

## Stage 2 — Study the reference images and establish the visual target

Use the attached images to identify the key features that must be represented:

- BMW E46 coupe proportions and recognizable silhouette.
- Low racing stance, widened fenders, and aggressive body kit.
- Silver body paint with the iconic dark-blue graphic sections.
- Front bumper, splitter, kidney grilles, and headlights.
- Hood vents, side skirts, mirrors, rear bodywork, wheels, and tires.
- The overall balance of the livery across the front, sides, and rear.

Recreate the car itself, not the screenshot backgrounds or image composition. When details are unclear, make a visually consistent choice that fits the BMW M3 GTR and the supplied references.

## Stage 3 — Source assets and build the car model

1. Check whether the project already contains useful car models, textures, or other assets.
2. Use suitable, reliably available assets where they improve the result. Avoid broken URLs, missing files, and placeholder assets.
3. If no suitable car model is available, create the model using detailed custom geometry. Use Three.js meshes, BufferGeometry, parametric or Bezier surfaces, and carefully shaped curved panels where appropriate.
4. Do not construct the visible body from ordinary boxes, spheres, or cylinders. The body must have smooth, continuous surfaces and convincing proportions, not a blockout appearance.
5. Model and texture the main exterior:
   - Body shell and aerodynamic body kit.
   - Front and rear bumpers, splitter, side skirts, and widened fenders.
   - Kidney grilles, headlights, vents, and exterior trim.
   - Windows, frames, mirrors, handles, lights, and exhausts.
   - Silver-and-dark-blue racing livery based on the referen

Category

Apps & UI

Stack

Three.js, WebGL

Made with

Three.js, WebGL

On X

40 likes · 3.8K views · 13 saves