Orbit — every active satellite, live

A 3D globe showing every active satellite (~16 000 objects) propagated in real time from CelesTrak orbital elements with SGP4. No build framework: plain HTML + three.js + satellite.js.

• public/ — the static site (index.html, bundled app.js / worker.js, coastline data)
• api/tles.js — Vercel serverless function that fetches & caches the CelesTrak catalog
• public/models/ — NASA glTF spacecraft models (compressed with gltf-transform), fetched on demand
• public/tex/ — Blue Marble day imagery, VIIRS city lights and a cloud layer for the globe
• src/groundpatch.js — streams ground imagery from NASA GIBS in a resolution ladder of shells while flying with a low-orbit satellite: a wide one out to the horizon, a sharp one below (VIIRS, 250 m, today), and — only when the display would magnify VIIRS past 1:1 — a Landsat shell at 30 m (1999 composite, cloud-free), with today's clouds keyed over the top from VIIRS
• src/patchtest.js — verification harness: renders a place from straight above with and without the streamed patch, to check the imagery lines up with the globe
• src/ — source for the bundles (npm run build regenerates public/app.js and public/worker.js)
• dev-server.mjs — local preview: npm run dev then open http://localhost:4173

Deploy: npx vercel deploy --prod (needs a Vercel token or login).

Adding a spacecraft model

Drop a .glb in public/models/ and add one line to REAL_MODELS in src/app.js: a name pattern, the file stem, and the real spacecraft's largest dimension in metres. Centring, scaling and orientation are derived from the model's bounding box. Compress first: npx gltf-transform optimize in.glb public/models/Out.glb --compress meshopt --texture-compress webp --texture-size 1024.

Models courtesy of NASA (3D Resources / VTAD).

Imagery: NASA Blue Marble / VIIRS, streamed live from NASA GIBS (WMTS, EPSG:4326).