globe.js

document.addEventListener("DOMContentLoaded", function(e) {
   
    const renderer = new THREE.WebGLRenderer({
        powerPreference: "high-performance",
        antialias: true, 
        alpha: true
    });

    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement )
    renderer.setPixelRatio( window.devicePixelRatio );
    
    let geometry = new THREE.SphereGeometry(170, 1024, 1024);
    let material = new THREE.ShaderMaterial({
        uniforms: {
            u_color1: {type: 'v3', value: rgb(61, 142, 241)},
            u_color2: {type: 'v3', value: rgb(0, 46, 76)},
            u_time: {type: 'f', value: 0},
            getTexture1: { type: "t", value: new THREE.TextureLoader().load('earth-height.png') }
        },
        fragmentShader: document.querySelector('#fragment-shader').textContent,
        vertexShader: document.querySelector('#vertex-shader').textContent
    });

    // Now we add this to 
    let mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, -280);
    scene.add(mesh);
    
    // Time variable
    let t = 0;
    let movement = false;
    // We'll stop the globe moving if the user clicks
    document.body.addEventListener('pointerdown', function(e) {
        movement = true;
    })
    document.body.addEventListener('pointerup', function(e) {
        movement = false;
    });

    const animate = function () {
        requestAnimationFrame( animate );
        // This will create a new canvas element and add it to our HTML page
        composer.render();
        if(movement == false) {
            // We will rotate the object by a certain number of radians every time unit
            mesh.rotation.y = (Math.PI / 2) * (t / 12);
            mesh.rotation.x = (Math.PI / 2) * (t / 48);
            mesh.material.uniforms.u_time.value = t;
            // Increase t by a certain value every frame
            t = t + 0.05;
        }

    };
    animate();

});