example/custom-layer/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';

    // Gen random data
    const N = 300;
    const gData = [...Array(N).keys()].map(() => ({
      lat: (Math.random() - 0.5) * 180,
      lng: (Math.random() - 0.5) * 360,
      alt: Math.random() * 0.8 + 0.1,
      radius: Math.random() * 5,
      color: ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]
    }));

    const world = new GlobeAR(document.getElementById('globeViz'))
      .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
      .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
      .customLayerData(gData)
      .customThreeObject(d => new THREE.Mesh(
        new THREE.SphereGeometry(d.radius),
        new THREE.MeshLambertMaterial({ color: d.color })
      ))
      .customThreeObjectUpdate((obj, d) => {
        Object.assign(obj.position, world.getCoords(d.lat, d.lng, d.alt));
      });

    (function moveSpheres() {
      gData.forEach(d => d.lat += 0.2);
      world.customLayerData(world.customLayerData());
      requestAnimationFrame(moveSpheres);
    })();

  </script>
</body>