Three.js Scroll Wireframe Globe Spin — Disk-to-Sphere Reveal

<section class="wgs-stage" id="wgsStage">
  <div class="wgs-intro-overlay"><p>Scroll ↓ to spin the flat disk up into a wireframe globe</p></div>
  <canvas id="wgsCanvas"></canvas>
  <div class="wgs-hud"><span id="wgsPct">0</span>% spun up · <span id="wgsCities">0</span> cities online</div>
</section>
<section class="wgs-bottom"><p>A fully rotating wireframe globe, cities lit across every continent.</p></section>

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

const canvas = document.getElementById('wgsCanvas');
const pctEl = document.getElementById('wgsPct');
const citiesEl = document.getElementById('wgsCities');
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(48, 1, 0.1, 200);
camera.position.set(0, 0, 13);
camera.lookAt(0, 0, 0);
scene.add(new THREE.AmbientLight(0x1a3a44, 1.2));
const key = new THREE.PointLight(0x6ee6d0, 1.2, 80);
key.position.set(8, 8, 10);
scene.add(key);

// The globe starts nearly flat (scale.y tiny) to read as a 2D disk, then
// scales up to a full sphere while spin-up ramps its rotation speed.
const globeGeo = new THREE.IcosahedronGeometry(4, 3);
const globeMat = new THREE.MeshBasicMaterial({ color: 0x5ee6d0, wireframe: true, transparent: true, opacity: 0.85 });
const globe = new THREE.Mesh(globeGeo, globeMat);
scene.add(globe);

// A thin disk edge ring reinforces the "flat disk" starting read, faded out
// once the globe has mostly spun up into 3D.
const edgeGeo = new THREE.RingGeometry(3.9, 4.05, 64);
const edgeMat = new THREE.MeshBasicMaterial({ color: 0x5ee6d0, transparent: true, opacity: 0.5, side: THREE.DoubleSide });
const edge = new THREE.Mesh(edgeGeo, edgeMat);
scene.add(edge);

// City markers: small glowing points placed on the sphere surface via
// lat/long, lit up progressively as scroll progresses.
const CITY_COUNT = 46;
const cityGeo = new THREE.SphereGeometry(0.07, 8, 8);
const cityMat = new THREE.MeshBasicMaterial({ color: 0xfff2b0 });
const cityMesh = new THREE.InstancedMesh(cityGeo, cityMat, CITY_COUNT);
scene.add(cityMesh);
const dummy = new THREE.Object3D();

const cityDirs = [];
for (let i = 0; i < CITY_COUNT; i++) {
  const lat = (Math.random() - 0.5) * Math.PI * 0.85;
  const lon = Math.random() * Math.PI * 2;
  const dir = new THREE.Vector3(
    Math.cos(lat) * Math.cos(lon),
    Math.sin(lat),
    Math.cos(lat) * Math.sin(lon)
  );
  cityDirs.push(dir);
}

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

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

  const flatness = 0.045 + eased * 0.955;
  globe.scale.set(1, flatness, 1);

  spin += 0.0014 * (0.15 + eased * eased * 1.4);
  globe.rotation.y = spin;
  globe.rotation.x = (1 - eased) * 1.35;

  edge.material.opacity = Math.max(0, 0.5 - eased * 0.9);
  edge.rotation.x = (1 - eased) * 1.35;

  let litCount = 0;
  for (let i = 0; i < CITY_COUNT; i++) {
    const dir = cityDirs[i];
    const cityT = i / CITY_COUNT;
    const litThreshold = 0.15 + cityT * 0.75;
    const lit = eased > litThreshold;
    if (lit) litCount++;

    dummy.position.set(dir.x * 4.02, dir.y * 4.02, dir.z * 4.02);
    dummy.scale.setScalar(lit ? (0.6 + Math.sin(spin * 6 + i) * 0.15) : 0.0001);
    dummy.updateMatrix();
    cityMesh.setMatrixAt(i, dummy.matrix);
  }
  cityMesh.instanceMatrix.needsUpdate = true;
  cityMesh.rotation.y = globe.rotation.y;
  cityMesh.rotation.x = globe.rotation.x;
  cityMesh.scale.copy(globe.scale);

  const camDist = 13 - eased * 2.5;
  camera.position.set(0, 0, camDist);
  camera.lookAt(0, 0, 0);

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

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