Add in Head
Copy Code
Copied
x
1
2
<style> body { margin: 0; } </style>
3
4
<script src="https://unpkg.com/three@0.149.0/build/three.js"></script>
5
<script src="https://unpkg.com/three-globe@2.25.1/dist/three-globe.min.js"></script>
6
7
Add Code Embed in Body
Copy Code
Copied
xxxxxxxxxx
84
1
2
// loading three.module.js
3
<script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js"</script>
4
5
// Define controls for the globe
6
<script type="module">
7
import { TrackballControls } from "https://cdn.jsdelivr.net/gh/thindHarminder/3dgobe@37e4ec444038532e5e38159ae8bc46f83e180291/track.js";
8
Object.assign(THREE , { TrackballControls });
9
10
// Gen random data for lines
11
const N = 20;
12
13
const arcsData = [...Array(N).keys()].map(() => ({
14
startLat: (Math.random() - 0.5) * 180,
15
startLng: (Math.random() - 0.5) * 360,
16
endLat: (Math.random() - 0.5) * 180,
17
endLng: (Math.random() - 0.5) * 360,
18
// Change these HEX color codes to customize color of lines
19
color: [ '#ffffff', '#f6805a', '#D4C2FC'][Math.round(Math.random() * 6)]
20
}));
21
22
const Globe = new ThreeGlobe()
23
.globeImageUrl('https://uploads-ssl.webflow.com/63b855e6f731d94be1d23ced/63e7017fdb85c2c68e6e386c_Frame%20312.jpg')
24
.arcsData(arcsData)
25
.arcColor('color')
26
.arcDashLength(0.4)
27
.arcDashGap(4)
28
// Control visibility of atmosphere
29
.showAtmosphere(true)
30
// Control color of atmosphere
31
.atmosphereColor('black')
32
.arcDashInitialGap(() => Math.random() * 5)
33
.arcDashAnimateTime(2000);
34
35
36
37
38
// Setup renderer
39
const renderer = new THREE.WebGLRenderer();
40
const factor = 0.5; // percentage of the screen
41
// replace "globeViz" with the ID of div where you want to render the globe
42
const globeDiv = document.getElementById("globeViz");
43
let w = globeDiv.offsetWidth;
44
let h = globeDiv.offsetHeight;
45
46
47
renderer.setSize(w,h );
48
// Control color of renderer
49
renderer.setClearColor( 0x000000, 0 );
50
// replace "globeViz" with the ID of div where you want to render the globe
51
document.getElementById('globeViz').appendChild(renderer.domElement);
52
53
// Setup scene
54
const scene = new THREE.Scene();
55
scene.add(Globe);
56
scene.add(new THREE.AmbientLight(0xbbbbbb));
57
58
59
60
61
62
// Setup camera
63
const camera = new THREE.PerspectiveCamera();
64
camera.aspect = w/h;
65
camera.updateProjectionMatrix();
66
camera.position.z = 350;
67
68
// Add camera controls
69
const tbControls = new THREE.TrackballControls(camera, renderer.domElement);
70
tbControls.minDistance = 101;
71
tbControls.rotateSpeed = 1;
72
tbControls.zoomSpeed = 0.8;
73
let rotation = 0;
74
// Kick-off renderer
75
(function animate() { // IIFE
76
// Frame cycle
77
rotation += 0.01;
78
Globe.rotation.y = rotation;
79
tbControls.update();
80
renderer.render(scene, camera);
81
requestAnimationFrame(animate);
82
})();
83
</script>
84