Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/JustADev1024/threejs-car/llms.txt

Use this file to discover all available pages before exploring further.

Dream Car is a browser-based infinite 3D driving simulator that lives entirely inside a single index.html file. Powered by Three.js 0.128.0, it renders a continuously scrolling road, a day/night sky cycle, a detailed car model with working headlights and exhaust particles, and a full music player — all without a build step, a package manager, or a local development server. Open the file in any modern browser and you are driving instantly.

​
Key Features

Dream Car ships with a complete feature set out of the box:
  • Infinite road — Road markings and the surrounding landscape are recycled in a seamless loop, creating the illusion of endless forward motion.
  • Day/Night cycle — A slider ranging from 0:00 to 24:00 smoothly transitions sky colour, fog, and the intensity of a sun or moon mesh in the scene.
  • Headlights — A toggleable front-light system combining a SpotLight and a PointLight casts real shadows and illuminates the road surface in darkness.
  • Exhaust particles — An animated Points cloud emitted from the car’s exhaust pipe is toggled on or off with a single button.
  • Built-in music player — Sixteen SoundHelix tracks (Creative Commons) are pre-loaded in a dropdown, and users can append their own direct MP3 links at runtime.
  • Orbit camera — OrbitControls lets you rotate, pan, and zoom around the car freely with mouse or touch input; damping is enabled for smooth movement.
  • Bilingual UI — The entire control panel can be switched between English and Russian by clicking the EN or RU buttons at the top of the overlay.
  • Zero build tooling — No npm install, no bundler, no transpiler. Everything is loaded from a public CDN via a native importmap declaration inside the HTML file itself.

​
How it Works

The application’s entire architecture fits inside one file. The <head> contains inline CSS that styles a dark, glass-morphism control panel (backdrop-filter: blur(12px) with a semi-transparent background and a rounded border). The <body> holds the control panel markup and two <script> blocks. The first script block is a native importmap that tells the browser where to resolve bare module specifiers:
index.html
<script type="importmap">
{
    "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.128.0/examples/jsm/"
    }
}
</script>
The second block — <script type="module"> — imports Three.js and OrbitControls using those bare specifiers, then builds the entire scene imperatively: a WebGLRenderer with shadow maps enabled, a PerspectiveCamera positioned at (5, 3.5, 9), ambient and directional lights, a road plane, curb meshes, looping lane-marking boxes, a procedural landscape group, a car Group made of BoxGeometry and CylinderGeometry primitives, and a Points-based exhaust system. The animation loop runs through four separate requestAnimationFrame callbacks — one for road and landscape scrolling (updateScenery), one for exhaust particles (updateExhaust), one for wheel rotation and car bob (animateCar), and one for the main render pass (renderLoop) — keeping each concern isolated within the same file.

​
Browser Requirements

Dream Car uses two modern platform features that every major browser now supports:
  • ES module importmaps — required to resolve "three" and "three/addons/" as bare specifiers. Supported in Chrome 89+, Firefox 108+, Safari 16.4+, and Edge 89+.
  • <script type="module"> — required to use import statements directly in the browser without a bundler.
An active internet connection is also required each time the page loads: Three.js and OrbitControls are fetched from cdn.jsdelivr.net, and the sixteen built-in music tracks stream from www.soundhelix.com. There are no local fallbacks for either dependency.
The live version of Dream Car is deployed at https://threejs-car.pages.dev/ — open it in any supported browser to try the simulator without downloading anything.

​
License

Dream Car is intended for educational and non-commercial use. The sixteen built-in audio tracks are provided by SoundHelix under a Creative Commons licence and stream directly from their servers. Custom MP3 links added through the UI are subject to the licence terms of whatever source you link to, as well as that server’s CORS policy.

Build docs developers (and LLMs) love

Get started for freeTalk to us