example/satellites/index.html

<head>
  <style> body { margin: 0; } </style>

  <script src="//unpkg.com/aframe"></script>
  <script src="//unpkg.com/@ar-js-org/ar.js"></script>

  <script src="//unpkg.com/globe-ar"></script>
<!--  <script src="../../dist/globe-ar.js"></script>-->
</head>

<body>
  <div id="globeViz"></div>

  <script type="module">
    import * as THREE from 'https://esm.sh/three';
    import * as satellite from 'https://esm.sh/satellite.js';

    const EARTH_RADIUS_KM = 6371; // km
    const SAT_SIZE = 100; // km
    const TIME_STEP = 3 * 1000; // per frame

    const world = new GlobeAR(document.getElementById('globeViz'))
      .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
      .objectLat('lat')
      .objectLng('lng')
      .objectAltitude('alt')
      .objectFacesSurface(false);

    const satGeometry = new THREE.OctahedronGeometry(SAT_SIZE * world.getGlobeRadius() / EARTH_RADIUS_KM / 2, 0);
    const satMaterial = new THREE.MeshLambertMaterial({ color: 'palegreen', transparent: true, opacity: 0.7 });
    world.objectThreeObject(() => new THREE.Mesh(satGeometry, satMaterial));

    fetch('//unpkg.com/globe.gl/example/datasets/space-track-leo.txt').then(r => r.text()).then(rawData => {
      const tleData = rawData.replace(/\r/g, '').split(/\n(?=[^12])/).map(tle => tle.split('\n'));
      const satData = tleData.map(([name, ...tle]) => ({
        satrec: satellite.twoline2satrec(...tle),
        name: name.trim().replace(/^0 /, '')
      }))
      .slice(0, 1000);

      // time ticker
      let time = new Date();
      (function frameTicker() {
        requestAnimationFrame(frameTicker);

        time = new Date(+time + TIME_STEP);

        // Update satellite positions
        const gmst = satellite.gstime(time);
        satData.forEach(d => {
          const eci = satellite.propagate(d.satrec, time);
          if (eci.position) {
            const gdPos = satellite.eciToGeodetic(eci.position, gmst);
            d.lat = satellite.radiansToDegrees(gdPos.latitude);
            d.lng = satellite.radiansToDegrees(gdPos.longitude);
            d.alt = gdPos.height / EARTH_RADIUS_KM
          }
        });

        world.objectsData(satData);
      })();
    });
  </script>
</body>