Three.js Scroll Möbius Ride — Camera on a One-Sided Surface

<section class="mob-stage" id="mobStage">
  <div class="mob-intro"><p>Scroll ↓ to ride the Möbius strip</p></div>
  <canvas id="mobCanvas"></canvas>
  <div class="mob-hud">LAP <span id="mobLap">0</span>%</div>
</section>
<section class="mob-bottom"><p>One surface. One edge. Two laps to come home.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#0b0714;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.mob-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#9d8fc2;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 20px}
.mob-stage{height:100vh;position:relative;overflow:hidden;background:#0b0714}
.mob-intro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;pointer-events:none;z-index:5;color:#9d8fc2;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease}
#mobCanvas{display:block;width:100%;height:100%}
.mob-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#c084fc;text-transform:uppercase;opacity:.85}

const canvas = document.getElementById('mobCanvas');
const lapEl = document.getElementById('mobLap');
const introEl = document.querySelector('.mob-intro');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0b0714);
scene.fog = new THREE.FogExp2(0x0b0714, 0.02);
const camera = new THREE.PerspectiveCamera(70, 1, 0.05, 300);

scene.add(new THREE.AmbientLight(0xbfa8ff, 0.55));
const key = new THREE.DirectionalLight(0xffffff, 0.8);
key.position.set(20, 30, 10);
scene.add(key);

// Möbius parametrization. u ∈ [0, 2π) runs around the ring; v ∈ [−1, 1]
// spans the strip width; the half-twist is the u/2 term.
const R = 14, W = 3.4;
function mobiusPoint(u, v, target) {
  const half = u / 2;
  const r = R + v * W * Math.cos(half);
  target.set(r * Math.cos(u), v * W * Math.sin(half), r * Math.sin(u));
  return target;
}

// Build the strip as an indexed BufferGeometry grid over (u, v).
const SEG_U = 260, SEG_V = 10;
const stripGeo = new THREE.BufferGeometry();
const verts = new Float32Array((SEG_U + 1) * (SEG_V + 1) * 3);
const tmp = new THREE.Vector3();
for (let i = 0; i <= SEG_U; i++) {
  const u = (i / SEG_U) * Math.PI * 2;
  for (let j = 0; j <= SEG_V; j++) {
    const v = (j / SEG_V) * 2 - 1;
    mobiusPoint(u, v, tmp);
    const k = (i * (SEG_V + 1) + j) * 3;
    verts[k] = tmp.x; verts[k + 1] = tmp.y; verts[k + 2] = tmp.z;
  }
}
const idx = [];
for (let i = 0; i < SEG_U; i++) for (let j = 0; j < SEG_V; j++) {
  const a = i * (SEG_V + 1) + j, b = a + SEG_V + 1;
  idx.push(a, b, a + 1, b, b + 1, a + 1);
}
stripGeo.setIndex(idx);
stripGeo.setAttribute('position', new THREE.BufferAttribute(verts, 3));
stripGeo.computeVertexNormals();
const strip = new THREE.Mesh(stripGeo, new THREE.MeshStandardMaterial({
  color: 0x4c1d95, roughness: 0.45, metalness: 0.35, side: THREE.DoubleSide,
}));
scene.add(strip);

// Edge glow: the single boundary edge of a Möbius strip is one closed
// loop that takes 4π of u to close — trace it with a Line.
const edgePts = [];
for (let i = 0; i <= SEG_U * 2; i++) {
  const u = (i / SEG_U) * Math.PI * 2; // 0 → 4π
  edgePts.push(mobiusPoint(u % (Math.PI * 2), (Math.floor(u / (Math.PI * 2)) % 2 === 0) ? 1 : -1, new THREE.Vector3()).clone());
}
const edge = new THREE.Line(
  new THREE.BufferGeometry().setFromPoints(edgePts),
  new THREE.LineBasicMaterial({ color: 0xd8b4fe, transparent: true, opacity: 0.9 })
);
scene.add(edge);

// Guide dashes on the centerline so speed is readable.
const dashes = [];
for (let i = 0; i < 36; i++) {
  const d = new THREE.Mesh(
    new THREE.BoxGeometry(0.8, 0.06, 0.28),
    new THREE.MeshBasicMaterial({ color: 0xe9d5ff, transparent: true, opacity: 0.7 })
  );
  scene.add(d);
  dashes.push(d);
}

gsap.registerPlugin(ScrollTrigger);
// The rider must travel u = 0 → 4π (two ring laps) to return to the
// start orientation — the point of a Möbius strip, and of this demo.
const ride = { u: 0 };
gsap.to(ride, {
  u: Math.PI * 4,
  ease: 'none',
  scrollTrigger: { trigger: '#mobStage', start: 'top top', end: '+=600%', scrub: 0.5, pin: true },
});

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

const clock = new THREE.Clock();
const P = new THREE.Vector3(), AHEAD = new THREE.Vector3(), NORM = new THREE.Vector3();
const T1 = new THREE.Vector3(), T2 = new THREE.Vector3();

function animate() {
  requestAnimationFrame(animate);
  const t = clock.getElapsedTime();
  const u = ride.u;
  if (introEl) introEl.style.opacity = u > 0.1 ? '0' : '1';

  // Rider frame: position on the centerline, look-ahead along the strip,
  // and the local surface normal from two nearby tangent samples. The
  // normal flips over one lap — the camera rolls upside down and back,
  // which IS the Möbius property, so never use a world up vector here.
  const um = u % (Math.PI * 2);
  mobiusPoint(um, 0, P);
  mobiusPoint((u + 0.14) % (Math.PI * 2), 0, AHEAD);
  mobiusPoint((u + 0.01) % (Math.PI * 2), 0, T1).sub(P);
  mobiusPoint(um, 0.01, T2).sub(P);
  NORM.crossVectors(T1, T2).normalize();
  // On the second lap the sampled v-direction is on the "other side":
  // flip the normal so the ride surface stays underfoot continuously.
  if (u > Math.PI * 2) NORM.negate();

  camera.position.copy(P).addScaledVector(NORM, 1.5);
  camera.up.copy(NORM);
  camera.lookAt(AHEAD.addScaledVector(NORM, 1.2));

  dashes.forEach((d, i) => {
    const du = (i / 36) * Math.PI * 2;
    mobiusPoint(du, 0, tmp);
    d.position.copy(tmp);
    d.lookAt(mobiusPoint((du + 0.05) % (Math.PI * 2), 0, T1));
    // Dashes near the rider glow brighter.
    const dist = Math.abs(((du - um + Math.PI * 3) % (Math.PI * 2)) - Math.PI);
    d.material.opacity = 0.25 + Math.max(0, 1 - dist * 1.5) * 0.7;
  });

  edge.material.opacity = 0.6 + Math.sin(t * 2) * 0.25;
  strip.rotation.y = 0; // strip is static; the ride supplies all motion

  lapEl.textContent = Math.round((u / (Math.PI * 4)) * 100);
  renderer.render(scene, camera);
}

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