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’s entire 3D environment lives in a single index.html — there is no build step, no bundler, and no external configuration file. Every scene tweak described below is made by opening index.html in any text editor, making the change, and refreshing the page.
All changes take effect immediately on page refresh. Because index.html is self-contained, you can simply open it directly from your filesystem (file://) or serve it with any static server — no build or compilation step is ever required.

​
Car color

The car body is a MeshStandardMaterial defined alongside the car geometry: 
const bodyMat = new THREE.MeshStandardMaterial({ color: 0xe34234, metalness: 0.7 });
Replace 0xe34234 with any hex color value to repaint the body. For example, to use a vivid blue: 
const bodyMat = new THREE.MeshStandardMaterial({ color: 0x00aaff, metalness: 0.7 });
The metalness: 0.7 value controls how reflective the paint appears under dirLight. Increase it toward 1.0 for a mirror-like finish, or lower it toward 0.0 for a matte look.

​
Driving speed

The constant speed at the top of the scroll update loop controls how fast road markings and the landscape scroll toward the camera: 
const speed = 0.12;
This single value is consumed by both the road line recycling loop and the landscapeGroup recycling loop inside updateScenery(), so changing it once updates the perceived speed for every moving element. Increase the value for a faster drive; decrease it for a leisurely cruise.

​
Adding scene objects

Any mesh added to landscapeGroup is automatically recycled by the updateScenery() animation loop — objects that scroll past z = -48 are teleported forward by roadLength + 16 units, creating a seamless infinite loop. To add a custom mesh, insert the following code anywhere after addScenery() is called: 
// Add after addScenery() is called
const myMesh = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshStandardMaterial({ color: 0xffaaff })
);
myMesh.position.set(5, 0, 10); // X, Y, Z
landscapeGroup.add(myMesh);
The object will scroll with the rest of the scenery and loop back just like the built-in trees, hills, and stones. Place objects at |X| > 2.5 to keep them off the road surface.

​
Fog density

The scene uses exponential fog, initialized alongside the scene background: 
scene.fog = new THREE.FogExp2(0x0a1030, 0.005);
The second argument (0.005) is the fog density exponent. Reducing it (e.g., to 0.002) lets distant scenery remain visible longer; increasing it (e.g., to 0.012) creates a thick, atmospheric haze. The fog color (0x0a1030) is blended with the sky background color dynamically by updateTime() as the time-of-day slider changes.

​
Shadow quality

Shadows are globally enabled on the renderer: 
renderer.shadowMap.enabled = true;
Shadow resolution is controlled by dirLight.shadow.mapSize. The default inherits Three.js’s standard 512×512. To increase quality at the cost of GPU memory: 
dirLight.shadow.mapSize.width = 1024;
dirLight.shadow.mapSize.height = 1024;
Lower values (256×256) can improve performance on low-end hardware at the cost of softer shadow edges.

​
Road width

The road surface is a single PlaneGeometry: 
const roadPlane = new THREE.Mesh(
    new THREE.PlaneGeometry(4.5, 80),
    new THREE.MeshStandardMaterial({ color: 0x2c2e3a, roughness: 0.6 })
);
Change the first argument (4.5) to widen or narrow the road. If you widen the road, also update the curb positions so they align with the new edges: 
// Default curb X positions — update both to match new half-width
curbLeft.position.set(-2.35, -0.15, 0);
curbRight.position.set(2.35, -0.15, 0);
For a road width of 6.0, move the curbs to ±3.15. The grass plane (PlaneGeometry(60, 120)) is wide enough to accommodate a wider road without further changes.

Build docs developers (and LLMs) love

Get started for freeTalk to us