Three.js Scroll Paper Plane Flight — Curve-Path Camera Follow

<section class="ppf-stage" id="ppfStage">
  <div class="ppf-intro-overlay"><p>Scroll ↓ to send the paper plane climbing and diving through the clouds</p></div>
  <canvas id="ppfCanvas"></canvas>
  <div class="ppf-hud"><span id="ppfPct">0</span>% of route flown</div>
</section>
<section class="ppf-bottom"><p>The paper plane completes its curved flight through the sky.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#dff0fb;color:#264b5c;font-family:system-ui,-apple-system,sans-serif}
.ppf-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#5a8ca3;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 24px;background:#eaf5fc}
.ppf-stage{height:100vh;position:relative;overflow:hidden;background:linear-gradient(180deg,#bfe0f5 0%,#eaf5fc 100%)}
.ppf-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:#3d6f85;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease;}
#ppfCanvas{display:block;width:100%;height:100%}
.ppf-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#2c5468;text-transform:uppercase;opacity:.85}

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

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(52, 1, 0.1, 200);
scene.add(new THREE.AmbientLight(0xffffff, 1.1));
const sun = new THREE.DirectionalLight(0xfff6e0, 1.1);
sun.position.set(10, 14, 8);
scene.add(sun);

// Clouds: soft, low-poly puff clusters made from overlapping spheres, placed
// once around the flight path. Static geometry, cheap to render.
const cloudMat = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 1, metalness: 0, transparent: true, opacity: 0.88 });
function makeCloud(x, y, z, scale) {
  const group = new THREE.Group();
  const puffCount = 4 + Math.floor(Math.random() * 3);
  for (let i = 0; i < puffCount; i++) {
    const geo = new THREE.SphereGeometry(0.6 + Math.random() * 0.5, 8, 8);
    const puff = new THREE.Mesh(geo, cloudMat);
    puff.position.set((Math.random() - 0.5) * 2.2, (Math.random() - 0.5) * 0.6, (Math.random() - 0.5) * 1.2);
    group.add(puff);
  }
  group.position.set(x, y, z);
  group.scale.setScalar(scale);
  return group;
}
for (let i = 0; i < 22; i++) {
  const cloud = makeCloud(
    (Math.random() - 0.5) * 60,
    (Math.random() - 0.5) * 20 - 2,
    -Math.random() * 90,
    1 + Math.random() * 1.8
  );
  scene.add(cloud);
}

// Low-poly paper plane: a folded dart shape built from a handful of flat
// triangles sharing one BufferGeometry.
function makePlaneGeometry() {
  const geo = new THREE.BufferGeometry();
  const v = new Float32Array([
    // right wing top
    0, 0, 1.6,   1.4, -0.15, -1.2,   0, 0.3, -1.0,
    // left wing top
    0, 0, 1.6,   0, 0.3, -1.0,   -1.4, -0.15, -1.2,
    // right wing bottom
    0, 0, 1.6,   0, -0.35, -1.0,   1.4, -0.15, -1.2,
    // left wing bottom
    0, 0, 1.6,   -1.4, -0.15, -1.2,   0, -0.35, -1.0,
  ]);
  geo.setAttribute('position', new THREE.BufferAttribute(v, 3));
  geo.computeVertexNormals();
  return geo;
}
const planeMat = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.55, metalness: 0.05, side: THREE.DoubleSide, emissive: 0x24343c, emissiveIntensity: 0.08 });
const plane = new THREE.Mesh(makePlaneGeometry(), planeMat);
scene.add(plane);

// Flight path: a smooth Catmull-Rom curve climbing, banking, and diving
// through the sky.
const curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(0, -4, 14),
  new THREE.Vector3(-6, 2, 2),
  new THREE.Vector3(6, 8, -14),
  new THREE.Vector3(-4, 3, -32),
  new THREE.Vector3(8, -3, -50),
  new THREE.Vector3(0, 6, -68),
  new THREE.Vector3(-6, 1, -84),
], false, 'catmullrom', 0.4);

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

const form = { t: 0 };
gsap.to(form, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#ppfStage',
    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();
}

const pos = new THREE.Vector3();
const ahead = new THREE.Vector3();
const up = new THREE.Vector3(0, 1, 0);
const camOffset = new THREE.Vector3();

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);
  const clamped = Math.min(0.999, Math.max(0.001, eased));

  curve.getPointAt(clamped, pos);
  curve.getPointAt(Math.min(0.999, clamped + 0.01), ahead);

  plane.position.copy(pos);
  plane.lookAt(ahead);
  // Bank into turns: roll around the plane's own forward axis proportional to
  // how sharply the path is curving laterally at this point.
  const prevT = Math.max(0.001, clamped - 0.01);
  curve.getPointAt(prevT, camOffset);
  const turnDelta = ahead.x - camOffset.x;
  plane.rotateZ(-turnDelta * 2.2);

  // Camera trails slightly behind and above the plane, looking toward it.
  const behindT = Math.max(0.001, clamped - 0.045);
  const camPos = curve.getPointAt(behindT);
  camera.position.set(camPos.x, camPos.y + 1.4, camPos.z + 3.5);
  camera.lookAt(pos);

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

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