LANE RUNNER DROP:
A THREE.JS 3D RUNNER GAME

What Is Lane Runner Drop?

Lane Runner Drop is a free portrait 3D runner for phones and desktop. Swipe between three lanes, scoop up gem lines, dodge striped barriers and keep your combo alive as the road gets faster. Your best score is saved on your device.

It is a Three.js game that runs as a 3D browser game on WebGL, developed by Shane Brumback and hosted by Indie Forge Studio. It is free with no download or sign-up.

How to Play Lane Runner Drop

• Switch lanes: swipe or tap left and right to move across the three lanes.
• Collect gems: every gem is worth 10 points times your multiplier.
• Build combos: 5 gems in a row raise your multiplier, up to x10. Skip a gem line and the combo resets.
• Avoid barriers: one hit ends the run. Tap anywhere to restart instantly.
• Go faster: the road speeds up the longer you survive.

Controls: Phones: swipe left / right, or tap the left / right half of the screen · Desktop: ← → or A / D · P pause · M mute

How Lane Runner Drop Is Built with Three.js

Lane Runner Drop is plain JavaScript with no build step. It loads Three.js r160 as an ES module from a local copy of three.module.min.js and draws everything with a single THREE.WebGLRenderer. All the 3D models are built in code from Three.js primitives, so there are no 3D model files to download. Here is what the game code actually does:

• The road, sand and lane markings are PlaneGeometry and thin BoxGeometry meshes, with THREE.Fog hiding where the road ends.
• The low-poly canyon is built from simple shapes: DodecahedronGeometry rocks, OctahedronGeometry crystals, cylinder-and-icosahedron trees and ConeGeometry mountains, all randomly scaled.
• The runner is a THREE.Group of box meshes for the torso, head and limbs, so the whole character moves between lanes as one object.
• Textures such as the barrier stripes are drawn into a CanvasTexture set to the sRGB color space, so no image files have to load.
• Sound effects are made on the fly with the Web Audio API (AudioContext oscillators) instead of audio files, and your best score and mute setting are stored in localStorage.

Code from Lane Runner Drop

These short snippets are copied straight from the game's source code.

Changing lanes

The runner's lane index is clamped to the three lanes (0 to 2).

function move(dir) { if (S.mode !== 'play') return; const n = Math.max(0, Math.min(2, S.lane + dir)); if (n !== S.lane) { S.lane = n; beep(660 + dir * 60, 0.05, 'triangle', 0.04); } }

From games/lane-runner-drop/game.js, lines 205–205

Swipe detection

A swipe is detected once the pointer has moved more than 28 pixels sideways, then the runner moves one lane in that direction.

frame.addEventListener('pointerdown', (e) => {
  if (e.target.closest('.icon-btn')) return;
  audio();
  touch = { x: e.clientX, y: e.clientY, used: false };
  if (S.mode !== 'play') primaryTap();
});
frame.addEventListener('pointermove', (e) => {
  if (!touch || touch.used || S.mode !== 'play') return;
  const dx = e.clientX - touch.x;
  if (Math.abs(dx) > 28) { move(dx > 0 ? 1 : -1); touch.used = true; }

From games/lane-runner-drop/game.js, lines 212–221

Built for Mobile and Portrait Play

Lane Runner Drop is designed for phones held upright. The game runs in a 9:16 portrait frame, and on desktop it plays in a centered portrait frame. Input uses pointer events, so the same code handles touch and mouse, with keyboard controls on desktop.

To keep it smooth on phones, the renderer caps the device pixel ratio, and the game pauses itself when you switch tabs or apps. Phones that support it give a short vibration as feedback.

Frequently Asked Questions