ROCKET LANDER:
A THREE.JS 3D ROCKET LANDING GAME

What Is Rocket Lander?

Rocket Lander is a free portrait 3D physics arcade game for phones and desktop. A little red and white rocket drops toward a cratered moon, and your job is to fire the thruster, steer onto a moving landing pad and touch down softly and upright. Wind gusts push you sideways, the pad slides faster and shrinks after every landing, and your fuel tank only refills a little each time. Slow, centered landings score PERFECT combos.

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, where you can play it at indieforgestudio.com/games/rocket-lander/. It is free with no download.

How to Play Rocket Lander

• Thrust: hold anywhere on the screen to fire the engine. Let go and gravity takes over.
• Steer: while holding, drag left or right from where you pressed. The rocket tilts toward your drag and the angled thrust pushes it sideways.
• Land softly: keep the SPEED gauge green or yellow and the rocket upright as your feet touch the pad.
• Read the wind: the WIND arrows show which way gusts are pushing you and how hard.
• Watch your fuel: every landing refuels part of the tank, but an empty tank means a crash.
• Go for PERFECT: land slow, straight and near the white target ring to build a combo bonus.

How Rocket Lander Is Built with Three.js

Rocket Lander 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 one THREE.WebGLRenderer. Every model is built in code from Three.js primitives. Here is what the game code does:

• Scene and camera: an OrthographicCamera keeps the world exactly 9 units wide, and a ResizeObserver recalculates the visible height from the portrait frame, so the ground, pad and HUD line up on every phone. The sky is a gradient CanvasTexture with stars, plus a ringed SphereGeometry planet and a small moon far back on the z axis.
• The rocket: a Group of a CylinderGeometry body, a ConeGeometry nose, box fins, thin cylinder landing legs and a glassy porthole, lit by a HemisphereLight and a DirectionalLight. The group pivots at its centre of mass, and the landing feet sit a fixed distance below it.
• Thruster effects: two nested open cones with AdditiveBlending flicker in length every frame, a PointLight under the nozzle lights the pad as you descend, and exhaust puffs are small additive spheres that grow and fade.
• Physics: each frame adds gravity, a wind force and, while you hold, thrust along the rocket's tilt (sin for sideways, cos for up). Velocity is integrated with the frame time, and gravity, wind and pad speed all ramp up with every landing.
• Input: pointer events give one code path for touch and mouse. Pressing starts the thruster and stores the touch position; dragging from that point sets a target tilt, and the rocket eases toward it. The keyboard maps Space/Up to thrust and the arrows to tilt.
• HUD: score, best and combo sit in a thin top bar with pause and mute, and the FUEL bar, WIND arrows and color-coded SPEED readout are plain HTML over the ground at the bottom, so the sky stays clear. Sound effects are Web Audio oscillators, and your best score and mute setting are kept in localStorage.

Code from Rocket Lander

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

Relative drag steering

The tilt comes from how far your finger has moved since you pressed, not from where it is, so you can steer from anywhere on the screen.

// relative drag: finger right of where you pressed tilts the rocket right
window.addEventListener('pointermove', (e) => {
  if (!input.hold || core.mode !== 'play') return;
  const fw = $('frame').clientWidth; const d = (e.clientX - input.anchorX) / (fw * 0.22);
  input.dragTilt = Math.max(-1, Math.min(1, d)) * 0.62;
});

From games/rocket-lander/game.js, lines 134–139

Gravity, wind and angled thrust

The rocket eases toward the target tilt, then the thrust vector is split into sideways and upward parts with Math.sin and Math.cos and added to gravity and wind before the velocity is integrated.

      S.tilt += (S.tiltT - S.tilt) * Math.min(1, dt * (wantThrust || S.auto ? 7 : 2.5));
      thrust = wantThrust && S.fuel > 0;
      let ax = S.wind * 0.55, ay = -gravity();
      if (thrust) { const A = 7.2; ax += Math.sin(S.tilt) * A; ay += Math.cos(S.tilt) * A; S.fuel -= 12.5 * dt; if (S.fuel <= 0) { S.fuel = 0; core.float('OUT OF FUEL', 50, 40, '#f87171'); core.beep(200, 0.3, 'square', 0.06, -100); } }
      S.vx += ax * dt; S.vy += ay * dt; S.vx *= 1 - 0.15 * dt;
      S.x += S.vx * dt; S.y += S.vy * dt;

From games/rocket-lander/game.js, lines 215–220

Judging the landing

When the feet reach the pad the game checks three things: falling speed, tilt and sideways drift relative to the moving pad. Pass all three and you land (PERFECT if you were slow, straight and centered); fail one and the crash message tells you which.

      const feetY = S.y - FEET * Math.cos(S.tilt);
      const onPad = Math.abs(S.x - S.padX) <= S.padW / 2 + 0.05;
      if (onPad && feetY <= PAD_TOP && S.vy <= 0) {
        const soft = -S.vy <= SAFE_VY, upright = Math.abs(S.tilt) <= SAFE_TILT, drift = Math.abs(S.vx - S.padVx) <= SAFE_DRIFT;
        if (soft && upright && drift) {
          const perfect = -S.vy <= 1.1 && Math.abs(S.tilt) < 0.13 && Math.abs(S.x - S.padX) < S.padW * 0.22;
          S.y = PAD_TOP + FEET; S.tilt = 0; S.landOff = S.x - S.padX;
          land(perfect);
        } else crash(S.fuel <= 0 ? 'OUT OF FUEL!' : !soft ? 'TOO FAST!' : !upright ? 'TIPPED OVER!' : 'SKIDDED OFF!');
      } else if (feetY <= GROUND + 0.05) crash(S.fuel <= 0 ? 'OUT OF FUEL!' : 'MISSED THE PAD!');

From games/rocket-lander/game.js, lines 224–233

Built for Mobile and Portrait Play

Rocket Lander is designed for phones held upright. It runs in a 9:16 portrait frame and needs just one finger: hold to thrust, drag to steer. Pause, score and mute live in a thin bar at the top, and the gauges sit over the moon surface at the bottom, so the sky where the rocket flies stays clear. On desktop it plays in a centered portrait frame with keyboard controls.

To stay smooth on phones the renderer caps the device pixel ratio, and the game pauses itself when you switch tabs or apps.

Frequently Asked Questions