​

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

​

  <script src="https://unpkg.com/three@0.149.0/build/three.js"></script>

  <script src="https://unpkg.com/three-globe@2.25.1/dist/three-globe.min.js"></script>

​

​

​

// loading three.module.js

<script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js"</script>

​

// Define controls for the globe

<script type="module">

     import { TrackballControls } from  "https://cdn.jsdelivr.net/gh/thindHarminder/3dgobe@37e4ec444038532e5e38159ae8bc46f83e180291/track.js";

    Object.assign(THREE , { TrackballControls });

​

// Gen random data for lines

    const N = 20;

​

    const arcsData = [...Array(N).keys()].map(() => ({

      startLat: (Math.random() - 0.5) * 180,

      startLng: (Math.random() - 0.5) * 360,

      endLat: (Math.random() - 0.5) * 180,

      endLng: (Math.random() - 0.5) * 360,

      // Change these HEX color codes to customize color of lines

      color: [ '#ffffff', '#f6805a', '#D4C2FC'][Math.round(Math.random() * 6)]

    }));

​

    const Globe = new ThreeGlobe()

      .globeImageUrl('https://uploads-ssl.webflow.com/63b855e6f731d94be1d23ced/63e7017fdb85c2c68e6e386c_Frame%20312.jpg')

      .arcsData(arcsData)

      .arcColor('color')

      .arcDashLength(0.4)

      .arcDashGap(4)

      // Control visibility of atmosphere

      .showAtmosphere(true)

      // Control color of atmosphere

      .atmosphereColor('black')

      .arcDashInitialGap(() => Math.random() * 5)

      .arcDashAnimateTime(2000);

​

    // Setup renderer

    const renderer = new THREE.WebGLRenderer();

    const factor = 0.5; // percentage of the screen

    // replace "globeViz" with the ID of div where you want to render the globe

    const globeDiv = document.getElementById("globeViz");

    let w = globeDiv.offsetWidth;

    let h = globeDiv.offsetHeight;

​

    renderer.setSize(w,h );

   // Control color of renderer

    renderer.setClearColor( 0x000000, 0 );

    // replace "globeViz" with the ID of div where you want to render the globe

    document.getElementById('globeViz').appendChild(renderer.domElement);

​

    // Setup scene

    const scene = new THREE.Scene();

    scene.add(Globe);

    scene.add(new THREE.AmbientLight(0xbbbbbb));

​

​

​

​

    // Setup camera

    const camera = new THREE.PerspectiveCamera();

    camera.aspect = w/h;

    camera.updateProjectionMatrix();

    camera.position.z = 350;

​

    // Add camera controls

    const tbControls = new THREE.TrackballControls(camera, renderer.domElement);

    tbControls.minDistance = 101;

    tbControls.rotateSpeed = 1;

    tbControls.zoomSpeed = 0.8;

let rotation = 0;

    // Kick-off renderer

    (function animate() { // IIFE

      // Frame cycle

        rotation += 0.01;

  Globe.rotation.y = rotation;

      tbControls.update();

      renderer.render(scene, camera);

      requestAnimationFrame(animate);

    })();

  </script>

​