Create globe animation effect using three.js




Here is the code

Html 


<!DOCTYPE html>
<html lang="en"> 
<head> 
 <!-- meta elements start -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <!-- meta elements end -->
 <title></title>
  
  
</head>
<body style="background-color: #000; overflow: hidden">
 <div id="ourintro"  > 
  <div id="webgl-canvas"></div> 
 </div>
  
 <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> 
 <script src="js/three.js" type="text/javascript"></script> 
 <script src="js/animation.js" type="text/javascript"></script>
</body> 
</html> 

Download jquery-1.11.3.min.js from jquery website and three.js from three js website

Animation.js


function webglWave(e, t) {
    return  void("init" == e ? "page404" == t ? (initGlobeError(t), addRemoveListeners(!0), animateGlobeError()) : (animation_type = Math.floor(2 * Math.random() + 0), 0 == animation_type ? (initGlobe(t), addRemoveListeners(!0), animateGlobe()) : 1 == animation_type && (initGlobe(t), addRemoveListeners(!0), animateGlobe())) : "kill" == e ? "page404" == t ? (stopAnimationGlobeError(animation_id), killAnimationGlobeError(), addRemoveListeners(!1)) : 0 == animation_type ? (stopAnimationWave(animation_id), killAnimationWave(), addRemoveListeners(!1)) : 1 == animation_type && (stopAnimationGlobe(animation_id), killAnimationGlobe(), addRemoveListeners(!1)) : "play" == e ? "page404" == t ? (addRemoveListeners(!0), animateGlobeError()) : 0 == animation_type ? (addRemoveListeners(!0), animateGlobe()) : 1 == animation_type && (addRemoveListeners(!0), animateGlobe()) : "stop" == e)
}
 
function onWindowResize() {
    windowHalfX = window.innerWidth / 2, windowHalfY = window.innerHeight / 2, camera.aspect = window.innerWidth / window.innerHeight, camera.updateProjectionMatrix(), renderer.setSize(window.innerWidth, window.innerHeight)
}
 
function renderWave() {
    camera.position.x += .01 * (mouseX - camera.position.x), camera.position.y += .005 * (mouseY - camera.position.y), camera.lookAt(scene.position);
    for (var e = 0, t = 0; AMOUNTX > t; t++)
        for (var i = 0; AMOUNTY > i; i++) particle = particles[e++], particle.position.y = 50 * Math.sin(.3 * (t + count)) + 50 * Math.sin(.5 * (i + count)), particle.scale.x = particle.scale.y = 4 * (Math.sin(.3 * (t + count)) + 1) + 4 * (Math.sin(.5 * (i + count)) + 1), opacity = Math.abs(particle.position.y) / 100, opacity < .5 && (opacity = .5), opacity > 1 && (opacity = 1), particle.material.opacity = opacity;
    renderer.render(scene, camera), count += .03
}
  
function initGlobe(e) {
    objTo = document.getElementById(e), container = document.getElementById("webgl-canvas"), objTo.appendChild(container), camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1e4), camera.position.z = 500, scene = new THREE.Scene;
    for (var t = 2 * Math.PI, i = function(e) {
            e.beginPath(), e.arc(0, 0, 25, 0, t, !0), e.fill()
        }, t = 2 * Math.PI, n = 0; 500 > n; n++) {
        var o = new THREE.SpriteCanvasMaterial({
            color: 16777215,
            transparent: !0,
            program: function(e) {
                e.beginPath(), e.arc(0, 0, .5, 0, t, !0), e.fill()
            }
        });
        particle = new THREE.Sprite(o), particle.position.x = 2 * Math.random() - 1, particle.position.y = 2 * Math.random() - 1, particle.position.z = 2 * Math.random() - 1, particle.position.normalize(), particle.position.multiplyScalar(10 * Math.random() + 450), particle.scale.multiplyScalar(4 + 2 * Math.random()), particle.material.opacity = .1, scene.add(particle), particles_globe.push(particle)
    }
    for (var n = 0; 500 > n; n++) {
        var s = new THREE.Geometry,
            r = new THREE.Vector3(2 * Math.random() - 1, 2 * Math.random() - 1, 2 * Math.random() - 1);
        r.normalize(), r.multiplyScalar(450), s.vertices.push(r);
        var a = r.clone();
        a.multiplyScalar(.3 * Math.random() + 1), s.vertices.push(a);
        var l = new THREE.Line(s, new THREE.LineBasicMaterial({
            color: 16777215,
            opacity: .3
        }));
        scene.add(l)
    }
    renderer = new THREE.CanvasRenderer({
        alpha: !0
    }), renderer.setClearColor(0, 0), renderer.setSize(window.innerWidth, window.innerHeight), container.appendChild(renderer.domElement)
}

function animateGlobe() {
    animation_id = requestAnimationFrame(animateGlobe), renderGlobe()
}

function renderGlobe() {
    var e = $("body:hover"),
        t = camera.position.x,
        i = camera.position.y,
        n = camera.position.z;
    0 != e.length && null != timeout ? camera.position.x += .05 * (mouseX - camera.position.x) : (camera.position.x = t * Math.cos(rotation_speed) - n * Math.sin(rotation_speed), camera.position.z = n * Math.cos(rotation_speed) + t * Math.sin(rotation_speed)), camera.position.y += .05 * (-mouseY + 200 - camera.position.y), $viewPort.on("mousemove", function() {
        null !== timeout && clearTimeout(timeout), timeout = setTimeout(function() {
            timeout = null
        }, 600)
    }), camera.lookAt(scene.position);
    for (var o = 0, o = 0; o < particles_globe.length; o++) particle = particles_globe[o++], temp = 50 * Math.sin(.3 * (o + count)) + .5 * Math.sin(.5 * (o + count)), opacity = Math.abs(temp) / 50 + .1, opacity > 1 && (opacity = 1), particle.material.opacity = opacity;
    renderer.render(scene, camera), count += .1, renderer.render(scene, camera)
}

function killAnimationGlobe() {
    if (scene)
        for (; scene.children.length > 0;) scene.remove(scene.children[scene.children.length - 1]);
    $("#webgl-canvas > canvas").remove()
}

function stopAnimationGlobe(e) {
    cancelAnimationFrame(e)
}

function initGlobeError(e) {
    objTo = document.getElementById(e), container = document.getElementById("webgl-canvas"), objTo.appendChild(container), camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1e4), camera.position.z = 500, scene = new THREE.Scene;
    for (var t = 2 * Math.PI, i = function(e) {
            e.beginPath(), e.arc(0, 0, 25, 0, t, !0), e.fill()
        }, t = 2 * Math.PI, n = 0; 250 > n; n++) {
        var o = new THREE.SpriteCanvasMaterial({
            color: 16777215,
            transparent: !0,
            program: function(e) {
                e.beginPath(), e.arc(0, 0, .5, 0, t, !0), e.fill()
            }
        });
        particle = new THREE.Sprite(o), particle.position.x = 2 * Math.random() - 1, particle.position.y = 2 * Math.random() - 1, particle.position.z = 2 * Math.random() - 1, particle.position.normalize(), particle.position.multiplyScalar(10 * Math.random() + 450), particle.scale.multiplyScalar(4 + 2 * Math.random()), particle.material.opacity = .1, scene.add(particle), particles_globe.push(particle)
    }
    renderer = new THREE.CanvasRenderer({
        alpha: !0
    }), renderer.setClearColor(0, 0), renderer.setSize(window.innerWidth, window.innerHeight), container.appendChild(renderer.domElement)
}

function animateGlobeError() {
    animation_id = requestAnimationFrame(animateGlobeError), renderGlobeError()
}

function renderGlobeError() {
    var e = .002,
        t = camera.position.x,
        i = camera.position.y,
        n = camera.position.z;
    camera.position.x = t * Math.cos(e) + n * Math.sin(e), camera.position.z = n * Math.cos(e) - t * Math.sin(e), camera.lookAt(scene.position), renderer.render(scene, camera), count += .1, renderer.render(scene, camera)
}

function killAnimationGlobeError() {
    if (scene)
        for (; scene.children.length > 0;) scene.remove(scene.children[scene.children.length - 1]);
    $("#webgl-canvas > canvas").remove()
}

function stopAnimationGlobeError(e) {
    cancelAnimationFrame(e)
}

function addRemoveListeners(e) {
    e ? (document.addEventListener("mousemove", onDocumentMouseMove, !1), document.addEventListener("touchstart", onDocumentTouchStart, !1), document.addEventListener("touchmove", onDocumentTouchMove, !1), window.addEventListener("resize", onWindowResize, !1)) : (document.removeEventListener("mousemove", onDocumentMouseMove, !1), document.removeEventListener("touchstart", onDocumentTouchStart, !1), document.removeEventListener("touchmove", onDocumentTouchMove, !1), window.removeEventListener("resize", onWindowResize, !1))
}

function onDocumentMouseMove(e) {
    mouseX = e.clientX - windowHalfX, mouseY = e.clientY + 150
}

function onDocumentTouchStart(e) {
    1 === e.touches.length && (e.preventDefault(), mouseX = e.touches[0].pageX - windowHalfX, mouseY = -e.touches[0].pageY)
}

function onDocumentTouchMove(e) {
    1 === e.touches.length && (e.preventDefault(), mouseX = e.touches[0].pageX - windowHalfX, mouseY = -e.touches[0].pageY)
} 
var SEPARATION = 125,
    AMOUNTX = 35,
    AMOUNTY = 35,
    container, stats, camera, scene, renderer, particles, particle, count = 0,
    particles_globe = [],
    mouseX = 0,
    mouseY = 0,
    objTo, windowHalfX = window.innerWidth / 2,
    windowHalfY = window.innerHeight / 2,
    animation_type, rotation_speed = .002,
    timeout = null,
    $viewPort = $(document);
function homepage(e) { 
    if (  _global_webGL_teste ? (webglWave("play", "ourintro"), _global_webGL_isAnimated = !0) : (webglWave("init", "ourintro"), _global_webGL_isAnimated = !0, _global_webGL_teste = !0)) {
        
    }
} 
_global_webGL_teste = !1, $(document).ready(function() { 
 $_window = $(window), $_body = $("body"), $_html = $("html"), homepage(!0)
});






Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.