Three.js Scroll Sand Dune Drift — Procedural Terrain Flyover

<section class="dune-stage" id="duneStage">
  <div class="dune-intro-overlay"><p>Scroll ↓ to fly low over drifting desert dunes</p></div>
  <canvas id="duneCanvas"></canvas>
  <div class="dune-hud"><span id="dunePct">0</span>% flight</div>
</section>
<section class="dune-bottom"><p>Golden ridgelines, drifting to the horizon.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#2a1508;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.dune-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#c99a5e;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 24px}
.dune-stage{height:100vh;position:relative;overflow:hidden;background:linear-gradient(180deg,#ffcf8a 0%,#ff9a52 40%,#8a3d1e 100%)}
.dune-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:#3a1c08;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease;text-shadow:0 1px 6px rgba(255,220,170,.6)}
#duneCanvas{display:block;width:100%;height:100%}
.dune-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#fff0da;text-transform:uppercase;opacity:.85}

const canvas = document.getElementById('duneCanvas');
const pctEl = document.getElementById('dunePct');
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.Fog(0xffb066, 8, 70);
const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 300);

// Golden-hour lighting: a low warm directional "sun" plus soft warm ambient.
scene.add(new THREE.AmbientLight(0xffcf9a, 0.55));
const sun = new THREE.DirectionalLight(0xffdca0, 1.4);
sun.position.set(-30, 8, -10);
scene.add(sun);

// --- Procedural dune heightmap ------------------------------------------
// A hashed-sine pseudo-noise lattice (no external noise library) drives
// vertex height. Several octaves of sine ridges at different frequencies
// and a phase offset create long rolling dune ridgelines that can be
// "drifted" simply by shifting the phase used to evaluate them.
function dune(x, z, phase) {
  const r1 = Math.sin(x * 0.08 + phase * 1.0) * Math.cos(z * 0.05 - phase * 0.6);
  const r2 = Math.sin(x * 0.22 + z * 0.11 + phase * 1.8) * 0.4;
  const r3 = Math.sin((x + z) * 0.35 - phase * 2.4) * 0.18;
  return (r1 * 3.2 + r2 + r3) * 1.4;
}

const SIZE = 140, SEGS = 130;
const geo = new THREE.PlaneGeometry(SIZE, SIZE, SEGS, SEGS);
geo.rotateX(-Math.PI / 2);
const posAttr = geo.getAttribute('position');
const baseX = new Float32Array(posAttr.count);
const baseZ = new Float32Array(posAttr.count);
for (let i = 0; i < posAttr.count; i++) {
  baseX[i] = posAttr.getX(i);
  baseZ[i] = posAttr.getZ(i);
}

const material = new THREE.MeshStandardMaterial({
  color: 0xe8a25c,
  roughness: 0.95,
  metalness: 0.0,
  flatShading: false,
});
const terrain = new THREE.Mesh(geo, material);
scene.add(terrain);

function updateTerrain(phase) {
  for (let i = 0; i < posAttr.count; i++) {
    const x = baseX[i], z = baseZ[i];
    posAttr.setY(i, dune(x, z, phase));
  }
  posAttr.needsUpdate = true;
  geo.computeVertexNormals();
}
updateTerrain(0);

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

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

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

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);

  // The ripple phase drifts continuously with progress, so the dune pattern
  // visibly migrates as the camera advances, and reverses cleanly since it
  // is a pure function of t.
  const phase = eased * 6.0;
  updateTerrain(phase);

  // Camera flies from a high distant establishing shot down to a low pass
  // skimming just above the ridgelines, moving forward along -Z.
  const flyZ = 55 - eased * 95;
  const camHeight = 24 - eased * 20;
  const groundY = dune(0, flyZ + 6, phase);
  camera.position.set(Math.sin(eased * 2.0) * 4, Math.max(camHeight, groundY + 3.5), flyZ);
  camera.lookAt(Math.sin(eased * 2.0) * 2, groundY, flyZ - 20);

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

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