https://global-hr.uz/js/globe.js

1if (document.getElementById("globe")) {
2    (function() {
3        const container = document.getElementById("globe");
4        const canvas = container.getElementsByTagName("canvas")[0];
5        const globeRadius = 100;
6        const globeWidth = 4098 / 2;
7        const globeHeight = 1968 / 2;
8        function convertFlatCoordsToSphereCoords(x, y) {
9            let latitude = ((x - globeWidth) / globeWidth) * -180;
10            let longitude = ((y - globeHeight) / globeHeight) * -90;
11            latitude = (latitude * Math.PI) / 180;
12            longitude = (longitude * Math.PI) / 180;
13            const radius = Math.cos(longitude) * globeRadius;
14            return {
15                x: Math.cos(latitude) * radius,
16                y: Math.sin(longitude) * globeRadius,
17                z: Math.sin(latitude) * radius,
18            };
19        }
20        function makeMagic(points) {
21            const {width, height} = container.getBoundingClientRect();
22            const scene = new THREE.Scene();
23            const camera = new THREE.PerspectiveCamera(45,width / height);
24            const renderer = new THREE.WebGLRenderer({
25                canvas,
26                antialias: true,
27            });
28            renderer.setSize(width, height);
29            const mergedGeometry = new THREE.Geometry();
30            const pointGeometry = new THREE.SphereGeometry(0.5,1,1);
31            const pointMaterial = new THREE.MeshBasicMaterial({
32                color: "#989db5",
33            });
34            for (let point of points) {
35                const {x, y, z} = convertFlatCoordsToSphereCoords(point.x, point.y, width, height);
36                if (x && y && z) {
37                    pointGeometry.translate(x, y, z);
38                    mergedGeometry.merge(pointGeometry);
39                    pointGeometry.translate(-x, -y, -z);
40                }
41            }
42            const globeShape = new THREE.Mesh(mergedGeometry,pointMaterial);
43            scene.add(globeShape);
44            container.classList.add("peekaboo");
45            camera.orbitControls = new THREE.OrbitControls(camera,canvas);
46            camera.orbitControls.enableKeys = false;
47            camera.orbitControls.enablePan = false;
48            camera.orbitControls.enableZoom = false;

49            camera.orbitControls.enableDamping = false;
50            camera.orbitControls.enableRotate = true;
51            camera.orbitControls.autoRotate = true;
52            camera.position.z = -265;
53            function animate() {
54                camera.orbitControls.update();
55                requestAnimationFrame(animate);
56                renderer.render(scene, camera);
57            }
58            animate();
59        }
60        function hasWebGL() {
61            const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
62            if (gl && gl instanceof WebGLRenderingContext) {
63                return true;
64            } else {
65                return false;
66            }
67        }
68        function init() {
69            if (hasWebGL()) {
70                window;
71                window.fetch("/js/points.json").then((response)=>response.json()).then((data)=>{
72                    makeMagic(data.points);
73                }
74                );
75            }
76        }
77        init();
78    }
79    )();
80}else{
81    console.log("not found globe");
82}