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>