DRIFT DASH:
A THREE.JS 3D DRIFT RACING GAME

What Is Drift Dash?

Drift Dash is a free portrait 3D drift racing game for phones and desktop. A little red sports car speeds along a zig-zag road that hops across floating grass-and-rock islands high above the clouds at sunset. The car drives itself on the straights. Your only job is timing: press and hold to throw the car into a drift through the next corner, then let go to snap it straight down the new road.

Clean drifts grab coins and grow a multiplier up to x10, but hold too long and the car spins past the corner and flies off the edge. It speeds up after every corner. Drift Dash is a Three.js game that runs as a 3D browser game on WebGL, developed by Shane Brumback and hosted by Indie Forge Studio, where you can play it at indieforgestudio.com/games/drift-dash/. It is free with no download.

How to Play Drift Dash

• Drift: press and hold anywhere on the screen just before a corner. The car slides into the turn shown by the orange arrows on the road.
• Straighten: let go once the nose points down the new road. The car snaps straight to the nearest road direction.
• Timing: start too early and you cut the inside edge, start too late and you slide off the outside, hold too long and you spin off.
• Multiplier: a PERFECT drift (exit near the middle of the road) adds x1 up to x10, a GOOD drift keeps it and a CLOSE CALL resets it.
• Coins: coins are worth 5 times your multiplier, and the coin on the perfect drift line through each corner counts double. P pauses and M mutes.

How Drift Dash Is Built with Three.js

Drift Dash is a single self-contained ES module on a self-hosted Three.js build. Everything is made from Three.js primitives with flat-shaded Lambert materials, so it loads fast on phones with no model files.

• The road is generated on the fly as straight segments that turn left or right toward the top of the screen. Each segment is one shared unit BoxGeometry scaled into asphalt, a grass rim and an upside-down six-sided ConeGeometry rock, which makes the floating-island look.
• Corners are the overlapping square where two segments meet. Staying on the road is a simple test of the car's position in each nearby segment's local along/sideways coordinates.
• Holding turns the heading at speed divided by a fixed radius, so the drift arc stays the same size as the car speeds up and only the timing window gets shorter.
• The car body yaws further into the turn than its path while drifting, rear-wheel skid marks and smoke puffs come from fixed pools, and coins and sparks are pooled too so nothing is allocated during play.
• A canvas gradient sky, distant floating islands and low-poly clouds below wrap around the camera as it chases the car up the screen.

Built for Mobile and Portrait Play

Drift Dash is designed for one thumb on a phone held upright. It runs in a centered 9:16 portrait frame on every screen, uses a high chase camera so you can see the next two or three corners coming, and keeps the score and drift multiplier in small corner chips. Pointer events give touch and mouse one hold-to-drift code path. How to Play opens a scrollable help panel that pauses rendering, and the pause menu offers Resume or Main Menu.

To stay smooth on phones the renderer caps the device pixel ratio, old road segments are removed as you pass them, and the game pauses itself when you switch tabs or apps.

Code from Drift Dash

Steering is one rule. Holding keeps turning the heading toward the corner, and letting go eases it back to the closest road direction (a multiple of 90 degrees):

// steering: hold = drift toward the next corner; release = straighten to the nearest road direction
if (S.hold) S.a += S.turnSign * (S.v / R) * dt;
else { const target = Math.round(S.a / HALF_PI) * HALF_PI; S.a += (target - S.a) * Math.min(1, dt * 12); }
S.drift += ((S.hold ? S.turnSign * 0.5 : 0) - S.drift) * Math.min(1, dt * 9);
const [dx, dz] = dirVec(S.a);
S.x += dx * S.v * dt; S.z += dz * S.v * dt;

From games/drift-dash/game.js

Each corner is judged by how far from the middle of the new road the car comes out. PERFECT grows the multiplier and the car speeds up after every corner:

function judgeCorner(s, lat) {
  run.corners++;
  const off = Math.abs(lat);
  let label, color;
  if (off < 0.5) { S.mult = Math.min(10, S.mult + 1); label = 'PERFECT x' + S.mult; color = '#ffcf33'; beep(880, 0.1, 'triangle', 0.06, 440); setTimeout(() => beep(1320, 0.12, 'triangle', 0.05, 300), 70); }
  else if (off < 1.05) { label = 'GOOD'; color = '#7dd3fc'; beep(660, 0.1, 'triangle', 0.05, 200); }
  else { S.mult = 1; label = 'CLOSE CALL'; color = '#ff8a5b'; beep(300, 0.14, 'square', 0.04, -80); }
  const pts = 10 * S.mult; S.score += pts;
  floatText(label + '  +' + pts, S.x, S.z, color);
  if (run.corners % 10 === 0) showBanner('FASTER!');
  S.v = Math.min(21, 9 + run.corners * 0.22);
}

From games/drift-dash/game.js

Frequently Asked Questions