Three.js Scroll Crystal Cave Descent — Flythrough Tunnel Effect

<section class="ccd-stage" id="ccdStage">
  <div class="ccd-intro-overlay"><p>Scroll ↓ to descend deeper into the glowing crystal cave</p></div>
  <canvas id="ccdCanvas"></canvas>
  <div class="ccd-hud"><span id="ccdPct">0</span>m descended</div>
</section>
<section class="ccd-bottom"><p>The bottom of the crystal cavern, glowing in every direction.</p></section>

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

const canvas = document.getElementById('ccdCanvas');
const pctEl = document.getElementById('ccdPct');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x02040a, 0.028);
const camera = new THREE.PerspectiveCamera(62, 1, 0.1, 300);
camera.position.set(0, 0, 0);

scene.add(new THREE.AmbientLight(0x1a2a4a, 0.7));
const headlamp = new THREE.PointLight(0xbfe0ff, 1.4, 40);
scene.add(headlamp);

// Crystal clusters are placed along a slightly winding path (z depth with a
// gentle sine offset in x/y) so the tunnel feels hand-carved rather than a
// straight pipe. Clusters grow larger and denser the deeper they sit.
const CLUSTER_COUNT = 42;
const DEPTH = 260;
const clusterGeo = new THREE.IcosahedronGeometry(1, 0);
const hueDeep = new THREE.Color(0x2255ff);
const hueShallow = new THREE.Color(0x66d9ff);
const hueAccent = new THREE.Color(0xd88bff);

const clusters = [];
for (let i = 0; i < CLUSTER_COUNT; i++) {
  const depthT = i / (CLUSTER_COUNT - 1);
  const z = -depthT * DEPTH;
  const ringAngle = (i * 2.4) % (Math.PI * 2);
  const ringRadius = 6 + Math.sin(i * 0.7) * 2.5;
  const x = Math.cos(ringAngle) * ringRadius + Math.sin(depthT * 6) * 3;
  const y = Math.sin(ringAngle) * ringRadius * 0.7 + Math.cos(depthT * 5) * 2;
  const scale = 0.6 + depthT * 2.6 + Math.random() * 0.8;

  const color = new THREE.Color();
  if (i % 5 === 0) color.copy(hueAccent);
  else color.copy(hueShallow).lerp(hueDeep, depthT);

  const mat = new THREE.MeshStandardMaterial({
    color: color.clone().multiplyScalar(0.5),
    emissive: color,
    emissiveIntensity: 0.9 + depthT * 0.6,
    roughness: 0.35,
    metalness: 0.1,
    flatShading: true,
  });
  const mesh = new THREE.Mesh(clusterGeo, mat);
  mesh.position.set(x, y, z);
  mesh.scale.setScalar(scale);
  mesh.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI);
  scene.add(mesh);
  clusters.push({ mesh, depthT, baseScale: scale });
}

const introEl = document.querySelector('.ccd-intro-overlay');
gsap.registerPlugin(ScrollTrigger);

const form = { t: 0 };
gsap.to(form, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#ccdStage',
    start: 'top top',
    end: '+=500%',
    scrub: 0.7,
    pin: true,
  },
});

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

let clock = 0;

function animate() {
  requestAnimationFrame(animate);
  if (introEl) introEl.style.opacity = (form.t > 0.03) ? '0' : '1';

  const t = form.t;
  const eased = t * t * (3 - 2 * t);
  clock += 0.01;

  // Camera flies forward (negative z) along the same winding path used to
  // place clusters, so the descent always threads between formations rather
  // than clipping through them.
  const camZ = -eased * DEPTH;
  const camDepthT = eased;
  const camX = Math.sin(camDepthT * 6) * 1.4;
  const camY = Math.cos(camDepthT * 5) * 1.0;
  camera.position.set(camX, camY, camZ + 4);
  camera.lookAt(camX * 0.6, camY * 0.6, camZ - 10);

  headlamp.position.set(camX, camY, camZ + 2);

  for (let i = 0; i < clusters.length; i++) {
    const c = clusters[i];
    c.mesh.rotation.y += 0.0011 * (1 + c.depthT);
    c.mesh.rotation.x += 0.0007;
    const pulse = 1 + Math.sin(clock * 1.4 + i) * 0.04;
    c.mesh.scale.setScalar(c.baseScale * pulse);
  }

  pctEl.textContent = Math.round(eased * DEPTH);
  renderer.render(scene, camera);
}

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