HELIX DROP:
A THREE.JS HELIX TOWER BALL GAME

What Is Helix Drop?

Helix Drop is a free portrait 3D ball drop game for phones and desktop. Your ball bounces on its own, and you drag left and right to spin the helix tower so it falls through the gaps. Avoid the red danger zones, and drop through several floors in a row to become a fireball and smash straight through. 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 Helix Drop

• Spin the tower: drag left or right anywhere on the screen to rotate the helix. On a keyboard hold the arrow keys or A and D.
• Fall through gaps: line a gap up under the bouncing ball to drop to the next floor and score.
• Avoid red zones: landing on a red segment ends the run.
• Build a fireball: drop through 3 floors in a row without bouncing and the ball catches fire, smashing through the next platform, red zones included.
• Go deeper: floors get narrower gaps and more red zones the deeper you go, and each colour band marks 10 floors.

Controls: Phones: drag left / right to spin the tower · Desktop: drag, or hold ← → / A D · P pause · M mute

How Helix Drop Is Built with Three.js

Helix 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:

• Each floor is split into 12 wedge segments. Every wedge is a CylinderGeometry made with a thetaStart and thetaLength, so a floor can leave gaps and mark some wedges red.
• The tower is a tall CylinderGeometry pole. Spinning the tower just rotates the floor group, and the game works out which wedge is under the ball from that rotation.
• The ball is a shiny SphereGeometry followed by a trail of shrinking spheres, and smashed floors break into TetrahedronGeometry debris.
• THREE.Fog fades the lower floors into the purple background as the camera follows the ball down.
• 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 Helix Drop

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

Building a floor from wedges

Each floor is 12 wedge-shaped CylinderGeometry pieces made with a start angle and length, so any wedge can be a gap or a red danger zone.

const dangerMat = new THREE.MeshPhongMaterial({ color: 0xff2d55, emissive: 0x550010, shininess: 80 });
const segGeo = [];
for (let i = 0; i < SEG; i++) segGeo.push(new THREE.CylinderGeometry(PR, PR, 0.34, 4, 1, false, i * SA + 0.01, SA - 0.02));

From games/helix-drop/game.js, lines 17–19

Landing, falling through or smashing

When the ball reaches a floor, the wedge under it decides what happens: a gap lets it fall through, a 3+ streak smashes the floor, red ends the run, and anything else bounces.

    S.vy = Math.max(-15, S.vy - 30 * dt); const prevY = S.y; S.y += S.vy * dt;
    const p = plat(S.next);
    if (p) {
      const top = p.g.position.y + 0.17;
      if (S.y - BALL_R <= top) {
        const t = p.types[segUnder()];
        if (t === 1) passPlat(p, false);
        else if (S.streak >= 3) { passPlat(p, true); S.y = top + BALL_R; S.vy = 9.5; }
        else if (t === 2) { S.y = top + BALL_R; burst(ball.position, 0xffffff, 26, 7); ball.visible = false; core.gameOver(); }
        else { S.y = top + BALL_R; S.vy = 9.5; S.squash = 1; if (S.streak) { S.streak = 0; core.setCombo(''); } core.beep(300, 0.05, 'sine', 0.05, -80); }

From games/helix-drop/game.js, lines 83–92

Drag to spin

Dragging sideways turns the tower by the pointer's change in X.

fr.addEventListener('pointerdown', (e) => { dragX = e.clientX; });
fr.addEventListener('pointermove', (e) => { if (dragX === null || core.mode !== 'play') { dragX = e.buttons ? e.clientX : null; return; } S.rot += (e.clientX - dragX) * 0.013; dragX = e.clientX; });

From games/helix-drop/game.js, lines 69–70

Built for Mobile and Portrait Play

Helix 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