script.html

<script type="module">
    import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
    import { CSS2DRenderer } from 'three/addons/renderers/CSS2DRenderer.js';

    // Declare the scene variable
    const scene = new THREE.Scene();

    const markerSvg = `<svg viewBox="-4 0 36 36">
        <path fill="currentColor" d="M14,0 C21.732,0 28,5.641 28,12.6 C28,23.963 14,36 14,36 C14,36 0,24.064 0,12.6 C0,5.641 6.268,0 14,0 Z"></path>
        <circle fill="black" cx="14" cy="14" r="7"></circle>
    </svg>`;


    // Your special ISS SVG content
    const issSvg = `
<svg
   version="1.1"
   id="svg2"
   width="106.66667"
   height="74.666664"
   viewBox="0 0 106.66667 74.666664"
   sodipodi:docname="iss3.svg"
   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs6" />
  <sodipodi:namedview
     id="namedview4"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     showgrid="false"
     inkscape:zoom="5.3035716"
     inkscape:cx="53.360268"
     inkscape:cy="37.427608"
     inkscape:window-width="1920"
     inkscape:window-height="951"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1"
     inkscape:current-layer="g8" />
  <g
     inkscape:groupmode="layer"
     inkscape:label="Image"
     id="g8">
    <image
       width="106.66667"
       height="74.666664"
       preserveAspectRatio="none"
       style="image-rendering:optimizeQuality"
       xlink:href="data:image/png;base64,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
fhuSBfJFUPWEGvNN6yp0njnxEsZvxfpPCcCIAf4NAjD59tZ/TwDmfQ3sewKQVvkG6r8ifbyy5iMG
ofpxR/kRqAHbdA3g44WuJ74ALLXxBZPNkfHLz+wlMToOCd2U48UeMHDYHzYTPgOfeUDuyjKZiP8A
5jS/2c1HW45Ku4tZnNHM/wOGVg8l16N0pwAAAYVpQ0NQSUNDIHByb2ZpbGUAAHicfZE9SMNQFIVP
W6UilQ52EBGaobpoQVTEUatQhAqhVmjVweSlf9CkIUlxcRRcCw7+LFYdXJx1dXAVBMEfEGcHJ0UX
KfG+pNAixguP93HePYf37gP8jQpTza5xQNUsI51MCNncqhB8hQ9RhDGKqMRMfU4UU/Csr3vqprqL
8yzvvj+rT8mbDPAJxLNMNyziDeLpTUvnvE8cYSVJIT4nHjPogsSPXJddfuNcdNjPMyNGJj1PHCEW
ih0sdzArGSrxFHFMUTXK92ddVjhvcVYrNda6J39hKK+tLHOd1hCSWMQSRAiQUUMZFViI066RYiJN
5wkP/6DjF8klk6sMRo4FVKFCcvzgf/B7tmZhcsJNCiWA7hfb/hgGgrtAs27b38e23TwBAs/Aldb2
VxvAzCfp9bYWOwLC28DFdVuT94DLHWDgSZcMyZECtPyFAvB+Rt+UA/pvgd41d26tc5w+ABmaVeoG
ODgERoqUve7x7p7Ouf3b05rfD6KkcrpMcgs/AAANGmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAA
PD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6
eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAt
RXhpdjIiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIy
LXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1s
bnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICB4bWxuczpzdEV2
dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIgogICAg
eG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6R0lN
UD0iaHR0cDovL3d3dy5naW1wLm9yZy94bXAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFk
b2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFw
LzEuMC8iCiAgIHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDo3OGUyMWQ1MS01YjQ2
LTQzYWQtYTc0MC0wZWVlZWEyNGRiMTUiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M2Fh
NjNmYWItZjhiYS00YmRmLTg5ODAtZDcxMDJkMjk3YjA1IgogICB4bXBNTTpPcmlnaW5hbERvY3Vt
ZW50SUQ9InhtcC5kaWQ6YjA1ZTY5ZWYtM2FmNS00ZGUxLWI3ZmQtNDVjMTBjMzI5ZjU0IgogICBk
YzpGb3JtYXQ9ImltYWdlL3BuZyIKICAgR0lNUDpBUEk9IjIuMCIKICAgR0lNUDpQbGF0Zm9ybT0i
TGludXgiCiAgIEdJTVA6VGltZVN0YW1wPSIxNzA2NzE3OTE1ODYwOTU4IgogICBHSU1QOlZlcnNp
b249IjIuMTAuMzAiCiAgIHRpZmY6T3JpZW50YXRpb249IjEiCiAgIHhtcDpDcmVhdG9yVG9vbD0i
R0lNUCAyLjEwIj4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxp
CiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAg
IHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NmY2OTczM2QtZDFjZS00NWVhLTk3OGItMjRmNmNm
MzRlNmMyIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKExpbnV4KSIKICAg
ICAgc3RFdnQ6d2hlbj0iMjAyNC0wMS0zMVQxNzoxODozNSswMTowMCIvPgogICAgPC9yZGY6U2Vx
PgogICA8L3htcE1NOkhpc3Rvcnk+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+Cjwv
eDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAK
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAg
ICAgICAgCjw/eHBhY2tldCBlbmQ9InciPz5JdpaaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJ
TUUH6AEfEBIjxWz/5wAAEUVJREFUeNrdm2t0VtWZx//7vJfwJgESCYFwK+GuELkHrSLgBYstVsHW
YaztKGvqzCyt4+qMM36YWX6Y+eZyrXbubWdWlx2lY6fCtNqijlKKAlLBFsFi5C5IIgkJCbm973nP
ng/5bdgc3kgCQRn2Wu9Kzn3v//4/z/N/nn2OiaLoqxrQFgVSEF3MHdrb24vr6+urJKm7u3vQhg0b
7nv00UdLHn/8cc2YMSMqKyt7t7y8/GAymcwaYyRJ1lplMpnWysrKjwrdMwzDlPs/nU5nKyoqmvre
ozAp5YOz93VmguCq7xsNcLM2GRgTXjCAxpiMtXaqpKSkmZIekFRZ6FGSjks6xPZ6SSMl7ZbUIqlB
Us47Py3JeM9psNa29m1MJiXZZGx3qTE6ntRl1IwxxdbaKYA3S9Jf+oOOnw6wlZI+lnSPpKu943lA
zko6JqkLUD+U9HNJ0UD0OXkZgVdmrZ0IMJ87D3h+y0k6EQNPkhLeGCfy/3RJP5ZUIin1/xrAIAhS
URRNYCBJa0+bSErSN/oInjt/Wh/PbZX0ev97OyiUOhOF+hR8xuAVwYaZkiokjZG0rI+A5CT9ph+P
zUr6L0ndmHau79bRaaWMu+6zZWA6nQ6y2awD7ypJfy9pOAM8WCBgnOBvN8FhEgN5VtLn8W9NkoYx
GYMIGPH2IfeXpKwxptta67uQ09cZY7qiKMpKqcSxY+FgY2QaGrqUTCoxbJiKuCQjfcpBBPCqAa9a
0mOA1yXpfxn8BO+SPZK2SJovaQ3BIukFh7GSaiSFAP0+UbmI+w6VdI2kYvzgX/OTtXaQY6ExptRa
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
AAAAAElFTkSuQmCC
"
       id="image10" />
  </g>
</svg>
`;


    $(document).ready(function () {
        // Fetch ISS position
        const fetchISS = fetchISSPosition();

        // Fetch visitor location
        const fetchLocation = new Promise((resolve, reject) => {
            $.getJSON('https://geolocation-db.com/json/')
                .done(resolve)
                .fail(reject);
        });

        // Wait for both promises to resolve
        Promise.all([fetchISS, fetchLocation])
            .then(([issPosition, location]) => {
                if (issPosition) {
                    // Create a custom marker for the visitor
                    const visitorMarker = createCustomMarker();
                    scene.add(visitorMarker);

                    // Set the position of the visitor marker based on latitude and longitude
                    const visitorPosition = latLongToVector3(location.latitude, location.longitude);
                    visitorMarker.position.copy(visitorPosition);

                    // Display geolocation data
                    $('#country').html(location.country_name);
                    $('#state').html(location.state);
                    $('#city').html(location.city);
                    $('#ip').html(location.IPv4);

                    // Fetch and update ISS position
                    fetchISSPosition().then(issPosition => {
                        if (issPosition) {
                               // Create a custom marker for the ISS with SVG texture
                               const issMarker = createCustomSvgMarker(issSvg);
                            scene.add(issMarker);

                            // Set the position of the ISS marker based on latitude and longitude
                            const issPositionVector = latLongToVector3(issPosition.latitude, issPosition.longitude);
                            issMarker.position.copy(issPositionVector);


                            // Calculate haversine distance
                            const haversineDist = haversineDistance(
                                location.latitude,
                                location.longitude,
                                issPosition.latitude,
                                issPosition.longitude
                            );

                            // Display haversine distance with style
                            $('#distance').html(`Distance to ISS: ${haversineDist.toFixed(2)} km`);
                            $('#distance').css({
                                'font-size': '18px',
                                'font-weight': 'bold',
                                'margin-top': '10px',
                                'color': 'blue'
                            });

                            //arc iss/visitor
                            const arcsData = [{
                                startLat: issPosition.latitude,
                                startLng: issPosition.longitude,
                                endLat: location.latitude,
                                endLng: location.longitude,
                                color: 'blue', // Choose the color you prefer
                            }];

                            const Globe = new ThreeGlobe()
                                .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
                                .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
                                .arcsData(arcsData)
                                .arcColor('color')
                                .arcDashLength(0.5) // Set a specific dash length
                                .arcDashGap(0.2) // Set a specific gap length
                                .arcDashAnimateTime(2000); // Set a specific animation time or remove if not needed

                            // Setup renderers
                            const renderers = [new THREE.WebGLRenderer({ alpha: true }), new CSS2DRenderer()];

                            renderers.forEach((r, idx) => {
                                r.setSize(window.innerWidth, window.innerHeight);
                                if (idx > 0) {
                                    // overlay additional on top of the main renderer
                                    r.domElement.style.position = 'absolute';
                                    r.domElement.style.top = '0px';
                                    r.domElement.style.pointerEvents = 'none';
                                }
                                document.getElementById('globeViz').appendChild(r.domElement);
                            });

                            // Setup scene
                            scene.add(Globe);
                            scene.add(new THREE.AmbientLight(0xcccccc, Math.PI));
                            scene.add(new THREE.DirectionalLight(0xffffff, 0.6 * Math.PI));

                            // Setup camera
                            const camera = new THREE.PerspectiveCamera();
                            camera.aspect = window.innerWidth / window.innerHeight;
                            camera.updateProjectionMatrix();
                            camera.position.z = 500;

                            // Add camera controls
                            const tbControls = new TrackballControls(camera, renderers[0].domElement);
                            tbControls.minDistance = 101;
                            tbControls.rotateSpeed = 5;
                            tbControls.zoomSpeed = 0.8;

                            // Update pov when camera moves
                            Globe.setPointOfView(camera.position, Globe.position);
                            tbControls.addEventListener('change', () => Globe.setPointOfView(camera.position, Globe.position));

                            // Kick-off renderers
                            function animate() {
                                tbControls.update();
                                renderers.forEach(r => r.render(scene, camera));
                                requestAnimationFrame(animate);
                            }

                            animate();
                        }
                    }).catch(error => console.error('Error:', error));

                    // Function to create a custom marker
                    function createCustomMarker(color = 0xff0000) {
                        const markerGeometry = new THREE.SphereGeometry(5, 32, 32);
                        const markerMaterial = new THREE.MeshBasicMaterial({ color: color });
                        const marker = new THREE.Mesh(markerGeometry, markerMaterial);
                        return marker;
                    }
                     // Function to create a custom marker for the ISS with SVG texture
                     function createCustomSvgMarker(svgContent) {
                        // Create a canvas element and set its size
                        const canvas = document.createElement('canvas');
                        canvas.width = 256;
                        canvas.height = 256;

                        // Create a texture from the canvas
                        const texture = new THREE.CanvasTexture(canvas);

                        // Use SVG content to draw on the canvas
                        const ctx = canvas.getContext('2d');
                        ctx.fillStyle = 'white'; // Set background color
                        ctx.fillRect(0, 0, canvas.width, canvas.height);

                        // Draw the SVG content on the canvas
                        const img = new Image();
                        img.src = 'data:image/svg+xml;base64,' + btoa(svgContent);
                        img.onload = () => {
                            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                            texture.needsUpdate = true;
                        };

                        // Create a mesh with the texture
                        const markerGeometry = new THREE.SphereGeometry(5, 32, 32);
                        const markerMaterial = new THREE.MeshBasicMaterial({ map: texture, transparent: true });
                        const marker = new THREE.Mesh(markerGeometry, markerMaterial);
                        return marker;
                    }

                    // Function to convert latitude and longitude to Three.js vector3 position
                    function latLongToVector3(lat, lon) {
                        const radius = 200; // Adjust the radius as needed
                        const phi = (90 - lat) * (Math.PI / 180);
                        const theta = (lon + 180) * (Math.PI / 180);

                        const x = radius * Math.sin(phi) * Math.cos(theta);
                        const y = radius * Math.cos(phi);
                        const z = radius * Math.sin(phi) * Math.sin(theta);

                        return new THREE.Vector3(x, y, z);
                    }

                    // Haversine distance calculation
                    function haversineDistance(lat1, lon1, lat2, lon2) {
                        const R = 6371; // Radius of the Earth in kilometers
                        const dLat = (lat2 - lat1) * (Math.PI / 180);
                        const dLon = (lon2 - lon1) * (Math.PI / 180);
                        const a =
                            Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                            Math.cos(lat1 * (Math.PI / 180)) * Math.cos(lat2 * (Math.PI / 180)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
                        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                        const distance = R * c; // Distance in kilometers
                        return distance;
                    }
                }
            }).catch(error => console.error('Error:', error));

        // Function to fetch ISS position
        async function fetchISSPosition() {
            try {
                const response = await fetch('https://corsproxy.io/?http://api.open-notify.org/iss-now.json');
                const data = await response.json();
                const issPosition = {
                    latitude: parseFloat(data.iss_position.latitude),
                    longitude: parseFloat(data.iss_position.longitude),
                };

                return issPosition;
            } catch (error) {
                console.error('Error fetching ISS position:', error);
                return null;
            }
        }
    });
</script>