STACK TOWER 3D:
A THREE.JS BLOCK STACKING GAME

What Is Stack Tower 3D?

Stack Tower 3D is a free portrait 3D stacking game for phones and desktop. Blocks slide in from alternating sides and you tap to drop each one onto the tower. Any overhang gets sliced off, so the next block is smaller, while perfect drops build combos and can even regrow the block. Your best height 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 Stack Tower 3D

• Drop blocks: tap (or press Space) to drop the sliding block onto the tower.
• Trim the overhang: any part hanging past the block below is sliced off and falls away, so the next block is smaller.
• Go for perfect: land it almost exactly on top for a PERFECT bonus. Two or more perfects in a row slightly regrow the block.
• Do not miss: drop a block completely off the tower and it is game over. Tap to restart instantly.
• Speed up: blocks slide faster as the tower grows.

Controls: Phones: tap anywhere to drop · Desktop: Space or Enter · P pause · M mute

How Stack Tower 3D Is Built with Three.js

Stack Tower 3D 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 scene uses a THREE.PerspectiveCamera, a HemisphereLight plus DirectionalLight, and THREE.Fog to fade the purple backdrop into the distance.
• Every block reuses one shared BoxGeometry(1, 1, 1). The game sets each block's width and depth with mesh.scale, so trimming an overhang only changes the scale instead of building new geometry.
• The sliced-off piece becomes its own mesh with simple gravity and spin, so it tumbles away each frame until it disappears.
• The tower sits on a 7-sided CylinderGeometry base over a low-poly PlaneGeometry ground, using flat-shaded Lambert and Phong materials.
• 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 Stack Tower 3D

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

Scene and camera setup

A gradient sky texture, purple THREE.Fog and a 9:16 perspective camera set up the portrait scene. setupRenderer comes from the shared core.

const scene = new THREE.Scene();
scene.background = skyTexture(THREE, [[0, '#0b0322'], [0.55, '#2a0d5e'], [1, '#5b1f8f']], 260);
scene.fog = new THREE.Fog(0x1c0840, 30, 70);
const camera = new THREE.PerspectiveCamera(42, 9 / 16, 0.1, 200);
const renderer = setupRenderer(THREE, $('c'), camera, 2);

From games/stack-tower/game.js, lines 5–9

The drop and slice mechanic

When you tap, the game measures how far the moving block is off the top block. No overlap means game over. A near-exact drop snaps into place, grows the combo and can regrow the block.

function drop() {
  const b = S.moving, t = top(); if (!b) return;
  const ax = S.axis, size = ax === 'x' ? 'w' : 'd';
  const delta = b[ax] - t[ax], overlap = t[size] - Math.abs(delta);
  const col = b.mesh.material.color.clone();
  if (overlap <= 0) { // complete miss
    scene.remove(b.mesh); addFalling(b.x, b.y, b.z, b.w, b.d, col, ax === 'x' ? Math.sign(delta) * 1.5 : 0, ax === 'z' ? Math.sign(delta) * 1.5 : 0);
    S.moving = null; S.shake = 0.5; core.gameOver(); return;
  }
  let pts = 1;
  if (Math.abs(delta) < PERFECT) {
    b[ax] = t[ax]; S.combo++; pts += Math.min(S.combo, 10);
    if (S.combo >= 2) { b[size] = Math.min(START, t[size] + REGROW); } else b[size] = t[size];

From games/stack-tower/game.js, lines 48–60

Touch and mouse input (shared core.js)

One pointerdown listener on the game frame handles taps and clicks alike, ignoring the pause and mute buttons, and wakes the Web Audio context on the first touch.

  frame.addEventListener('pointerdown', (e) => { if (e.target.closest('.icon-btn')) return; C.audio(); e.preventDefault(); primary(); });

From games/stack-tower/core.js, lines 51–51

Built for Mobile and Portrait Play

Stack Tower 3D 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