Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="title">click on the globe to add a pointer</div>
<div class="demo">
    <div class="animation-wrapper">
        <canvas id="globe-3d"></canvas>
        <canvas id="globe-2d-overlay"></canvas>
        <div id="globe-popup-overlay">
            <div class="globe-popup"></div>
        </div>
    </div>
</div>


<script type="x-shader/x-fragment" id="fragment-shader-map">
    uniform vec3 u_color_main;

    varying float vOpacity;

    float circle(vec2 st, float r) {
        vec2 dist = st - vec2(.5);
        return 1. - smoothstep(.99 * r, 1.01 * r, dot(dist, dist) * 4.);
    }

    void main() {
        float dot = circle(gl_PointCoord.xy, .7);
        if (dot < 0.5) discard;
        gl_FragColor = vec4(u_color_main, dot * vOpacity);
    }
</script>

<script type="x-shader/x-vertex" id="vertex-shader-map">
    uniform sampler2D u_visibility;
    uniform float u_size;
    uniform float u_time_since_click;
    uniform vec3 u_clicked;

    varying float vOpacity;

    void main() {

        // mask with world map
        float visibility = 1. - step(.4, texture2D(u_visibility, uv).x);
        gl_PointSize = visibility * u_size;

        // add ripple
        float time = u_time_since_click;
        float dist = length(position - u_clicked);
        float damping = pow(1. - sin(min(time, 1.)), 5.);
        float wave = (1. + sin(3. * dist + 13. * time));
        float delta = -.025 * damping * wave;

        // make backside dots darker
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        vOpacity = (1. / length(mvPosition.xyz) - .7);
        vOpacity = clamp(vOpacity, 0., .5) + .01;

        gl_Position = projectionMatrix * modelViewMatrix * vec4(position * (1. + delta), 1.);
    }
</script>
              
            
!

CSS

              
                body {
  padding: 0;
  margin: 0;
}
.title {
	position: fixed;
	top: 7px;
	color: #ddd;
	font-family: sans-serif;
	width: 100%;
	text-align: center;
	opacity: 0;
}
.demo {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1C1C1E;
}
#globe-3d, #globe-2d-overlay, #globe-popup-overlay, .globe-popup {
  display: block;
  position: absolute;
}
#globe-2d-overlay, #globe-popup-overlay {
  pointer-events: none;
}
.globe-popup-overlay {
  width: 100%;
  height: 100%;
  opacity: 0;
}
.globe-popup {
  top: 0;
  left: 0;
  background-color: rgba(75, 192, 200, .9);
  opacity: 0;
  color: #111;
  font-family: sans-serif;
  font-weight: bold;
  padding: 5px 10px;
  font-size: 15px;
  border-radius: 3px;
}
              
            
!

JS

              
                import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.module.min.js';
import { OrbitControls } from 'https://unpkg.com/three@0.126.0/examples/jsm/controls/OrbitControls.js';

const demo = document.querySelector('.demo');
const container = document.querySelector('.animation-wrapper');
const globeCanvas = container.querySelector('#globe-3d');
const globeOverlayCanvas = container.querySelector('#globe-2d-overlay');
const popup = container.querySelector('.globe-popup');


document.addEventListener('DOMContentLoaded', () => {
    gsap.set(demo, {
        height: window.innerHeight
    });

    let surface = new Surface();

    new THREE.TextureLoader().load(
        'https://ksenia-k.com/img/demos-preview/earth-map.jpeg',
        (mapTex) => {
            surface.earthTexture = mapTex;
            surface.earthTexture.repeat.set(1, 1);
            surface.earthTextureData = surface.getImageData();
            surface.createGlobe();
            surface.addAnchor();
            surface.addCanvasEvents();
            surface.updateDotSize();
            surface.loop();
        });

    window.addEventListener('resize', () => {
        gsap.set(demo, {
            height: window.innerHeight
        });

        surface.updateSize();
        surface.setupOverlayGraphic();
        surface.updateDotSize();
        surface.addCanvasEvents();
    }, false);
	
	 gsap.to('.title', {
		 delay: 5,
		 duration: .2,
		 opacity: 1
	 })

});


class Surface {

    constructor() {
        this.renderer = new THREE.WebGLRenderer({canvas: globeCanvas, alpha: true});
        this.scene = new THREE.Scene();
        this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, .1, 2);
        this.camera.position.z = 1.1;
        this.updateSize();

        this.rayCaster = new THREE.Raycaster();
        this.rayCaster.far = 1.15;
        this.mouse = new THREE.Vector2();
        this.coordinates2D = [0, 0];

        this.setupOverlayGraphic();
        this.createOrbitControls();

        this.clock = new THREE.Clock();
        this.clickTime = 0;

        this.group = new THREE.Group();
        this.group.scale.setScalar(0.9);
        this.scene.add(this.group);

        this.selectionVisible = false;
    }

    createOrbitControls() {
        this.controls = new OrbitControls(this.camera, globeCanvas);
        this.controls.enablePan = true;
        this.controls.enableZoom = false;
        this.controls.enableDamping = true;
        this.controls.minPolarAngle = .35 * Math.PI;
        this.controls.maxPolarAngle = .65 * Math.PI;
        this.controls.autoRotate = true;
    }

    createGlobe() {
        const globeGeometry = new THREE.IcosahedronGeometry(1, 14);
        this.mapMaterial = new THREE.ShaderMaterial({
            vertexShader: document.getElementById('vertex-shader-map').textContent,
            fragmentShader: document.getElementById('fragment-shader-map').textContent,
            uniforms: {
                u_visibility: {type: 't', value: this.earthTexture},
                u_size: {type: 'f', value: 0},
                u_color_main: {type: 'v3', value: new THREE.Color(0xc1c1c2)},
                u_clicked: {type: 'v3', value: new THREE.Vector3(.0, .0, 1.)},
                u_time_since_click: {value: 3.},
            },
            alphaTest: false,
            transparent: true
        });

        const globe = new THREE.Points(globeGeometry, this.mapMaterial);
        this.group.add(globe);

        this.blackGlobe = new THREE.Mesh(globeGeometry, new THREE.MeshBasicMaterial({
            color: 0x2C2C2E,
            transparent: true,
            opacity: 0.2
        }));
        this.blackGlobe.scale.setScalar(0.99);
        this.group.add(this.blackGlobe);
    }

    addAnchor() {
        const geometry = new THREE.SphereGeometry(.02, 16, 16);
        const material = new THREE.MeshBasicMaterial({
            color: 0x4BC0C8,
            transparent: true,
            opacity: 1
        });
        this.anchor = new THREE.Mesh(geometry, material);
        this.group.add(this.anchor);
    }

    setupOverlayGraphic() {
        this.overlayCtx = globeOverlayCanvas.getContext('2d');
        this.overlayCtx.strokeStyle = '#4BC0C8';
        this.overlayCtx.lineWidth = 5;
        this.overlayCtx.lineCap = 'round';
    }

    updateOverlayGraphic() {
        if (this.anchor) {
            let activePointPosition = this.anchor.position.clone();
            activePointPosition.applyMatrix4(this.group.matrixWorld);
            const activePointPositionProjected = activePointPosition.clone();
            activePointPositionProjected.project(this.camera);
            this.coordinates2D[0] = (activePointPositionProjected.x + 1) * container.offsetWidth * .5;
            this.coordinates2D[1] = (-activePointPositionProjected.y + 1) * container.offsetHeight * .5;

            const matrixWorldInverse = this.controls.object.matrixWorldInverse;
            activePointPosition.applyMatrix4(matrixWorldInverse);

            if (activePointPosition.z > -1) {
                if (this.selectionVisible === false) {
                    this.selectionVisible = true;
                    this.showPopupAnimation(false);
                }

                let popupX = this.coordinates2D[0];
                let popupY = this.coordinates2D[1];
                popupX -= (activePointPositionProjected.x * container.offsetWidth * .3);
                const upDown = (activePointPositionProjected.y > .6);
                popupY += (upDown ? 20 : -20);
                gsap.set(popup, {
                    x: popupX,
                    y: popupY,
                    xPercent: -50,
                    yPercent: upDown ? 0 : -100
                });

                popupY += (upDown ? -10 : 10);
                const curveStartX = this.coordinates2D[0];
                const curveStartY = this.coordinates2D[1];
                let curveMidX = popupX + activePointPositionProjected.x * 100;
                const curveMidY = popupY + (upDown ? -.5 : .1) * this.coordinates2D[1];

                this.drawPopupConnector(curveStartX, curveStartY, curveMidX, curveMidY, popupX, popupY);

            } else {
                if (this.selectionVisible) {
                    this.hidePopupAnimation();
                }
                this.selectionVisible = false;
            }
        }
    }

    addCanvasEvents() {
        container.addEventListener('mousemove', (e) => {
            updateMousePosition(e.clientX, e.clientY, this);
        });

        function updateMousePosition(eX, eY, surface) {
            const x = eX - container.offsetLeft;
            const y = eY - container.offsetTop;
            surface.mouse.x = x / container.offsetWidth * 2 - 1;
            surface.mouse.y = -(y / container.offsetHeight) * 2 + 1;
        }

        container.addEventListener('click', (e) => {
            updateMousePosition(
					e.targetTouches ? e.targetTouches[0].pageX : e.clientX,
					e.targetTouches ? e.targetTouches[0].pageY : e.clientY,
					this);
            this.checkIntersects();
            if (this.landIsHovered) {
                const intersects = this.rayCaster.intersectObject(this.blackGlobe);
                if (intersects.length) {
                    this.anchor.position.set(intersects[0].face.normal.x, intersects[0].face.normal.y, intersects[0].face.normal.z);
                    this.mapMaterial.uniforms.u_clicked.value = this.anchor.position;
                    popup.innerHTML = this.getLatLong();
                    this.showPopupAnimation(true);
                    gsap.delayedCall(.15, () => {
                        this.clickTime = this.clock.getElapsedTime();
                    })
                }
            }
        });
    }

    drawPopupConnector(startX, startY, midX, midY, endX, endY) {
        this.overlayCtx.clearRect(0, 0, container.offsetWidth, container.offsetHeight);
        this.overlayCtx.beginPath();
        this.overlayCtx.shadowOffsetX = startX > endX ? -4 : 4;
        this.overlayCtx.moveTo(startX, startY);
        this.overlayCtx.quadraticCurveTo(midX, midY, endX, endY);
        this.overlayCtx.stroke();
    }

    showPopupAnimation(lifted) {
        let positionLifted = this.anchor.position.clone();
        if (lifted) {
            positionLifted.multiplyScalar(1.1);
        }
        gsap.timeline({ })
            .fromTo(this.anchor.position, {
                x: positionLifted.x,
                y: positionLifted.y,
                z: positionLifted.z,
            }, {
                duration: .35,
                x: this.anchor.position.x,
                y: this.anchor.position.y,
                z: this.anchor.position.z,
                ease: 'back(4).out'
            }, 0)
            .to(this.anchor.material, {
                duration: .2,
                opacity: 1,
            }, 0)
            .fromTo(globeOverlayCanvas, {
			  		 opacity: 0
		  		}, {
                duration: 0.3,
                opacity: 1
            }, .15)
            .fromTo(popup, {
                opacity: 0,
                scale: .9,
                transformOrigin: 'center bottom'
            }, {
                duration: 0.1,
                opacity: 1,
                scale: 1,
            }, .15 + .1)
    }

    hidePopupAnimation() {
        gsap.timeline({ })
            .to(this.anchor.material, {
                duration: .1,
                opacity: .2,
            }, 0)
            .to(globeOverlayCanvas, {
                duration: 0.15,
                opacity: 0
            }, 0)
            .to(popup, {
                duration: 0.15,
                opacity: 0,
                scale: 0.9,
                transformOrigin: 'center bottom'
            }, 0);
    }

    getImageData() {
        const image = this.earthTexture.image;
        const canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        const context = canvas.getContext( '2d' );
        context.drawImage(image, 0, 0);
        return context.getImageData(0, 0, image.width, image.height);
    }

    getLatLong() {
        const pos = this.anchor.position;
        const lat = 90 - (Math.acos(pos.y)) * 180 / Math.PI;
        const lng = ((270 + (Math.atan2(pos.x, pos.z)) * 180 / Math.PI) % 360) - 180;
        return lat.toFixed(6) + ',&nbsp;' + lng.toFixed(6);
    }

    checkIntersects() {
        let isLand = (imageData, x, y) => {
            x = Math.floor(x * imageData.width);
            y = Math.floor((1 - y) * imageData.height);
            const position = (x + imageData.width * y) * 4;
            const data = imageData.data;
            return data[position] < 100;
        };
        this.rayCaster.setFromCamera(this.mouse, this.camera);
        const intersects = this.rayCaster.intersectObject(this.blackGlobe);
        if (intersects.length) {
            this.landIsHovered = isLand(this.earthTextureData, intersects[0].uv.x, intersects[0].uv.y);
            document.body.style.cursor = this.landIsHovered ? 'pointer' : 'auto';
        } else {
            document.body.style.cursor = 'auto';
        }
    }

    render() {
        this.mapMaterial.uniforms.u_time_since_click.value = this.clock.getElapsedTime() - this.clickTime;
        this.updateOverlayGraphic();
        this.controls.update();
        this.checkIntersects();
        this.renderer.render(this.scene, this.camera);
    }

    loop() {
        this.render();
        requestAnimationFrame(this.loop.bind(this));
    }

    updateSize() {
        const minSide = .85 * Math.min(window.innerWidth, window.innerHeight);
        container.style.width = minSide + 'px';
        container.style.height = minSide + 'px';
        this.renderer.setSize(minSide, minSide);
        this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        this.camera.updateProjectionMatrix();
        globeOverlayCanvas.width = minSide;
        globeOverlayCanvas.height = minSide;
    }

    updateDotSize() {
        this.mapMaterial.uniforms.u_size.value = .03 * container.offsetWidth;
    }
}
              
            
!
999px

Console