githubGlobe

Add in Head

Copy Code

Copied


<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>

Add Code Embed in Body

Copy Code

Copied


// 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>