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 puts you in full control of the viewing angle. Three.js OrbitControls handles all mouse and touch input out of the box, giving you a smooth, inertia-dampened camera that pivots around the car from any direction. No keyboard shortcuts or extra setup are needed — open the page and start dragging.
Camera Setup
The scene uses a standard PerspectiveCamera configured for a natural wide-angle field of view:
const camera = new THREE.PerspectiveCamera(
45, // vertical field of view (degrees)
window.innerWidth / window.innerHeight, // aspect ratio, updated on resize
0.1, // near clipping plane
1000 // far clipping plane
);
camera.position.set(5, 3.5, 9);
| Parameter | Value | Effect |
|---|
| FOV | 45° | Moderate perspective — avoids the fish-eye distortion of wider angles |
| Near | 0.1 | Geometry closer than 0.1 units is clipped (prevents z-fighting on the car body) |
| Far | 1000 | Geometry further than 1000 units is culled (the scene is well within this range) |
(5, 3.5, 9) places the camera to the right of, slightly above, and in front of the car, producing the classic three-quarter view you see on load.
OrbitControls Setup
OrbitControls is imported from Three.js’s add-ons bundle via the importmap declared in the 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>
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.target.set(0, 0.5, 0);
| Option | Value | Effect |
|---|
enableDamping | true | Adds inertia so the camera glides to a stop rather than halting instantly |
target | (0, 0.5, 0) | The point the camera orbits around — 0.5 units above ground, centred on the car |
controls.update() is called once every frame inside the render loop so that damping is applied continuously:
function renderLoop() {
requestAnimationFrame(renderLoop);
controls.update(); // must be called every frame when enableDamping is true
renderer.render(scene, camera);
}
renderLoop();
OrbitControls maps mouse buttons and touch gestures to camera actions automatically.
Mouse
| Action | Result |
|---|
| Left-button drag | Rotate (orbit) around the target |
| Right-button drag | Pan (translate) the camera and target together |
| Scroll wheel | Zoom in / out |
Touch
| Gesture | Result |
|---|
| Single-finger drag | Rotate (orbit) |
| Two-finger pinch | Zoom in / out |
| Two-finger drag | Pan |
OrbitControls enables both input types by default.
Responsive Handling
When the browser window is resized, the camera aspect ratio and renderer dimensions are updated to match:
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
updateProjectionMatrix() must be called after changing camera.aspect; without it the projection matrix retains the old ratio and the scene appears stretched. renderer.setSize resizes the underlying <canvas> element and its WebGL viewport in one call.
Renderer Setup
The WebGLRenderer is created with antialiasing enabled so that diagonal edges on the car body and road geometry are smooth:
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
shadowMap.enabled = true activates shadow rendering globally. Individual meshes and lights opt in by setting castShadow = true and receiveShadow = true. The directional light, spot headlight, and point headlight all cast shadows; the road plane, grass, and car body all receive them.
The default camera position (5, 3.5, 9) gives a classic three-quarter front view — you can see the car’s front, driver’s side, and roof simultaneously. If you orbit too far or lose track of the car, refresh the page to return to this starting angle. There is no reset button, but because the scene is a single HTML file with no persistent state, a hard reload (Ctrl+Shift+R / Cmd+Shift+R) restores everything to its defaults instantly.