Three.js Scroll Voxel Tower Build — GSAP Block Drop

<section class="vxl-stage" id="vxlStage">
  <div class="vxl-intro"><p>Scroll ↓ to build the tower</p></div>
  <canvas id="vxlCanvas"></canvas>
  <div class="vxl-hud"><span id="vxlCount">0</span> / <span id="vxlTotal">0</span> BLOCKS</div>
</section>
<section class="vxl-bottom"><p>Topped out.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#0d1017;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.vxl-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#8a93a8;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.vxl-stage{height:100vh;position:relative;overflow:hidden;background:#0d1017}
.vxl-intro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;pointer-events:none;z-index:5;color:#8a93a8;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease}
#vxlCanvas{display:block;width:100%;height:100%}
.vxl-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#4ade80;text-transform:uppercase;opacity:.85}

const canvas = document.getElementById('vxlCanvas');
const countEl = document.getElementById('vxlCount');
const totalEl = document.getElementById('vxlTotal');
const introEl = document.querySelector('.vxl-intro');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0d1017);
scene.fog = new THREE.Fog(0x0d1017, 60, 140);
const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 300);

scene.add(new THREE.AmbientLight(0xffffff, 0.55));
const sun = new THREE.DirectionalLight(0xfff1d6, 1.0);
sun.position.set(30, 50, 20);
scene.add(sun);

// Ground plate the tower rises from.
const ground = new THREE.Mesh(
  new THREE.CylinderGeometry(26, 26, 1, 48),
  new THREE.MeshLambertMaterial({ color: 0x161b26 })
);
ground.position.y = -0.5;
scene.add(ground);

// Build the voxel plan: a tapering tower with setbacks, a spire, and side
// wings — enough silhouette variation that the build order stays readable.
function rand(seed) {
  const x = Math.sin(seed * 91.7 + 47.3) * 24634.6345;
  return x - Math.floor(x);
}

const V = 1.6, plan = [];
function ring(cx, cz, half, y) {
  for (let x = -half; x <= half; x++) for (let z = -half; z <= half; z++) {
    if (Math.abs(x) === half || Math.abs(z) === half) plan.push({ x: cx + x, y, z: cz + z });
    else if (y === 0) plan.push({ x: cx + x, y, z: cz + z });
  }
}
let level = 0;
for (let h = 0; h < 5; h++) ring(0, 0, 4, level++);
for (let h = 0; h < 5; h++) ring(0, 0, 3, level++);
for (let h = 0; h < 4; h++) ring(0, 0, 2, level++);
for (let h = 0; h < 4; h++) plan.push({ x: 0, y: level + h, z: 0 });
// Side wings
for (let h = 0; h < 3; h++) { ring(6, 0, 1, h); ring(-6, 0, 1, h); }

// Sort bottom-up, shuffling within a level via the seeded hash so courses
// fill in a scattered mason-like order rather than sweeping row by row.
plan.sort((a, b) => a.y - b.y || rand(a.x * 31 + a.z * 7 + a.y) - rand(b.x * 31 + b.z * 7 + b.y));

const palette = [0x334155, 0x475569, 0x3f6212, 0x4d7c0f, 0x1e40af];
const blocks = plan.map((c, i) => {
  const shade = palette[Math.floor(rand(i + 999) * palette.length)];
  const m = new THREE.Mesh(
    new THREE.BoxGeometry(V, V, V),
    new THREE.MeshLambertMaterial({ color: shade })
  );
  m.position.set(c.x * V, c.y * V + V / 2, c.z * V);
  m.scale.setScalar(0.001);
  scene.add(m);
  // Each block drops from above its slot; drop height varies for life.
  return { m, targetY: c.y * V + V / 2, dropFrom: c.y * V + 14 + rand(i) * 10, level: c.y };
});
totalEl.textContent = blocks.length;
const maxLevel = Math.max.apply(null, plan.map(c => c.y));

gsap.registerPlugin(ScrollTrigger);
const build = { p: 0 };
gsap.to(build, {
  p: 1,
  ease: 'none',
  scrollTrigger: { trigger: '#vxlStage', start: 'top top', end: '+=500%', scrub: 0.5, pin: true },
});

function resize() {
  const w = canvas.clientWidth, h = canvas.clientHeight;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

const clock = new THREE.Clock();
function easeOutBack(x) {
  const c1 = 1.70158, c3 = c1 + 1;
  return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);
}

function animate() {
  requestAnimationFrame(animate);
  const t = clock.getElapsedTime();
  const p = build.p;
  if (introEl) introEl.style.opacity = p > 0.02 ? '0' : '1';

  // Each block owns a slice of the scroll: block i animates across
  // [i/n, i/n + win]. A wide window keeps several blocks airborne at once.
  const n = blocks.length, win = 14 / n;
  let placed = 0;
  for (let i = 0; i < n; i++) {
    const start = (i / n) * (1 - win);
    const lp = Math.min(1, Math.max(0, (p - start) / win));
    const b = blocks[i];
    if (lp <= 0) { b.m.scale.setScalar(0.001); continue; }
    if (lp >= 1) placed++;
    const e = easeOutBack(Math.min(1, lp));
    b.m.scale.setScalar(Math.min(1, lp * 3));
    b.m.position.y = b.dropFrom + (b.targetY - b.dropFrom) * e;
  }
  countEl.textContent = placed;

  // The camera cranes upward tracking the current build front.
  const front = (p * (maxLevel + 4)) * V;
  const ang = 0.6 + t * 0.06 + p * 1.4;
  camera.position.set(Math.sin(ang) * 34, 8 + front * 0.8, Math.cos(ang) * 34);
  camera.lookAt(0, Math.min(front * 0.7, maxLevel * V * 0.6) + 3, 0);

  renderer.render(scene, camera);
}

resize();
window.addEventListener('resize', resize);
animate();