learningthreejs.com WebGL Earth Demo Clone

geovisualizer.js

// Adapted from http://learningthreejs.com/blog/2013/09/16/how-to-make-the-earth-in-webgl/
(function () {

    /**
     *  @typedef {GeoVizOptions}
     *  @type {Object}
     *  @property {} ...
     */

    /**
     *  @class
     *  @constructor
     *  @param {GeoVizOptions} options
     */
    var GeoVisualizer = function (options) {
            this.options = options || {};
            this.initScene(this.options.container, options.width, options.height);
        };

    /**
     *  @param {Object[]}
     */
    GeoVisualizer.prototype.setCurrentGeoData = function (geoData) {
        this.currentGeoData = geoData;
    };

    /**
     *  @param {Element} container
     *  @param {Number} width
     *  @param {Number} height
     */
    GeoVisualizer.prototype.initScene = function (container, width, height) {

        width = width || container.offsetWidth;
        height = height || container.offsetHeight;

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        container.appendChild(renderer.domElement);

        var renderStack = [];
        var scene = new THREE.Scene();

        // Actors

        var earthMaterial = new THREE.MeshPhongMaterial({
                map: THREE.ImageUtils.loadTexture('./earthmap1k.jpg'),
                bumpMap: THREE.ImageUtils.loadTexture('./earthmap1k.jpg'),
                bumpScale: 0.02,
                specularMap: THREE.ImageUtils.loadTexture('./earthspec1k.jpg'),
                specular: new THREE.Color('grey')
            });

        var earthMesh = new THREE.Mesh(new THREE.SphereGeometry(0.5, 32, 32),
                                        earthMaterial);

        renderStack.push(function (timeNow, delta) {
            earthMesh.rotation.y += (1 / 32 * delta) / 1000;
        });

        scene.add(earthMesh);

        var cloudMaterial = new THREE.MeshPhongMaterial({
                map: THREE.ImageUtils.loadTexture('./earthcloudmap.png'),
                side: THREE.DoubleSide,
                transparent: true,
                opacity: 0.8
            });

        var cloudMesh = new THREE.Mesh(new THREE.SphereGeometry(0.51, 32, 32),
                                        cloudMaterial);

        renderStack.push(function (timeNow, delta) {
            cloudMesh.rotation.y += (1 / 16 * delta) / 1000;
        });

        scene.add(cloudMesh);

        var starsMaterial = new THREE.MeshBasicMaterial({
                map: THREE.ImageUtils.loadTexture('./galaxy_starfield.png'),
                side: THREE.BackSide
            });

        scene.add(new THREE.Mesh(new THREE.SphereGeometry(90, 32, 32),
                                    starsMaterial));

        // Lights

        var light = new THREE.DirectionalLight(0xcccccc, 1);
        light.position.set(5, 3, 5);
        scene.add(light);

        scene.add(new THREE.AmbientLight(0x888888));

        // Camera

        var camera  = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
        camera.position.z = 1.5;
        camera.lookAt(scene.position);

        // renderStack.push(function (timeNow, delta) {
        //     // camera.position.x ...
        //     // camera.position.y ...
        //     camera.lookAt(scene.position);
        // });

        // Action

        renderStack.push(function () {
            renderer.render(scene, camera);
        });

        var timeLast = Date.now();

        var len = renderStack.length;

        var animate = function () {
                var timeNow = Date.now();
                for (var i = 0; i < len; i++) {
                    renderStack[i](timeNow, timeNow - timeLast);
                }
                timeLast = timeNow;
                requestAnimationFrame(animate);
            };

        requestAnimationFrame(animate);
    };

    window.GeoVisualizer = GeoVisualizer;

})();