Three.js Scroll Magnetic Field Lines — DrawRange Reveal Animation

<section class="mfl-stage" id="mflStage">
  <div class="mfl-intro-overlay"><p>Scroll ↓ to draw the magnetic field lines between the poles</p></div>
  <canvas id="mflCanvas"></canvas>
  <div class="mfl-hud"><span id="mflPct">0</span>% of field drawn</div>
</section>
<section class="mfl-bottom"><p>The full magnetic field, arcing from pole to pole.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#050508;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.mfl-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#9aa0c9;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 24px}
.mfl-stage{height:100vh;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#0c0c16 0%,#050508 70%)}
.mfl-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:#9aa0c9;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease;}
#mflCanvas{display:block;width:100%;height:100%}
.mfl-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#c9cfff;text-transform:uppercase;opacity:.85}

const canvas = document.getElementById('mflCanvas');
const pctEl = document.getElementById('mflPct');
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(50, 1, 0.1, 200);
camera.position.set(0, 3, 17);
camera.lookAt(0, 0, 0);
scene.add(new THREE.AmbientLight(0x2a2a44, 1.0));

const NORTH = new THREE.Vector3(0, 0, 4.5);
const SOUTH = new THREE.Vector3(0, 0, -4.5);

const poleGeo = new THREE.SphereGeometry(1.1, 32, 32);
const northMat = new THREE.MeshStandardMaterial({ color: 0xff4d4d, emissive: 0x5a0f0f, roughness: 0.4, metalness: 0.3 });
const southMat = new THREE.MeshStandardMaterial({ color: 0x4d8dff, emissive: 0x0f2a5a, roughness: 0.4, metalness: 0.3 });
const northPole = new THREE.Mesh(poleGeo, northMat);
northPole.position.copy(NORTH);
scene.add(northPole);
const southPole = new THREE.Mesh(poleGeo, southMat);
southPole.position.copy(SOUTH);
scene.add(southPole);

const northLight = new THREE.PointLight(0xff6666, 1.2, 30);
northLight.position.copy(NORTH);
scene.add(northLight);
const southLight = new THREE.PointLight(0x6699ff, 1.2, 30);
southLight.position.copy(SOUTH);
scene.add(southLight);

// Field lines: parametric arcs from north to south pole, varying in bow-out
// radius and rotation angle around the pole axis to fill out a 3D field
// pattern (like classic bar-magnet field-line diagrams, swept around in 3D).
const LINE_COUNT = 26;
const SEGMENTS = 48;
const lineMat = new THREE.LineBasicMaterial({ color: 0xbfc6ff, transparent: true, opacity: 0.75 });

const lineDefs = [];
for (let i = 0; i < LINE_COUNT; i++) {
  const angle = (i / LINE_COUNT) * Math.PI * 2;
  const bow = 2.2 + (i % 4) * 1.1;
  const points = [];
  for (let s = 0; s <= SEGMENTS; s++) {
    const u = s / SEGMENTS; // 0 at north, 1 at south
    // Parametric bulge: lerp north->south on the axis, with a sine bulge in
    // the perpendicular plane rotated by the line's angle around the axis.
    const axisZ = NORTH.z + (SOUTH.z - NORTH.z) * u;
    const bulge = Math.sin(u * Math.PI) * bow;
    const x = Math.cos(angle) * bulge;
    const y = Math.sin(angle) * bulge;
    points.push(new THREE.Vector3(x, y, axisZ));
  }
  const geo = new THREE.BufferGeometry().setFromPoints(points);
  geo.setDrawRange(0, 0);
  const line = new THREE.Line(geo, lineMat);
  scene.add(line);
  // Stagger each line's own reveal window across the overall scroll range so
  // lines draw themselves in sequence rather than all at once.
  const start = (i / LINE_COUNT) * 0.7;
  lineDefs.push({ line, geo, totalPoints: SEGMENTS + 1, start, span: 0.4 });
}

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

const form = { t: 0 };
gsap.to(form, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#mflStage',
    start: 'top top',
    end: '+=450%',
    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();
}

let spin = 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);

  for (let i = 0; i < lineDefs.length; i++) {
    const d = lineDefs[i];
    let local = (eased - d.start) / d.span;
    local = Math.max(0, Math.min(1, local));
    const drawCount = Math.floor(local * d.totalPoints);
    d.geo.setDrawRange(0, drawCount);
  }

  spin += 0.0016;
  camera.position.set(Math.sin(spin) * 17, 3 + Math.sin(spin * 0.4) * 1.5, Math.cos(spin) * 17);
  camera.lookAt(0, 0, 0);

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

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