Getting Started with Three.js (3D Earth) - Part II

Example/Demo 2

by mendesjuan

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/build/three.js"></script>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>

CSS

body {
    padding:0;
    margin: 0;
}

JavaScript

window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

function animate(lastTime, angularSpeed, three) {
    // update this frame
    var time = new Date().getTime();
    var timeDiff = time - lastTime;
    var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
    three.earth.rotation.y += angleChange;
    lastTime = time;

    // render this frame
    three.renderer.render(three.scene, three.camera);

    // next frame
    requestAnimFrame(function () {
        animate(lastTime, angularSpeed, three);
    });
}

    var angularSpeed = 0.005;
    var lastTime = 0;

    // load renderer
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // set a camera
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 700;

    // create a scene
    var scene = new THREE.Scene();

    // add a texture to a material
    var material = new THREE.MeshLambertMaterial({
        map: THREE.ImageUtils.loadTexture("https://joshcarllewis.com/static/articles/html5-3d-canvas-tutorial/earth.jpg")
    });

    // create an earth object
    var earth = new THREE.Mesh(new THREE.SphereGeometry(200, 50, 50), material);
    earth.overdraw = true;
    scene.add(earth);

    // add a directional light source
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(2, 1, 2).normalize();
    scene.add(directionalLight);

    // keep everything together to make passing it around easier
    var three = {
        renderer: renderer,
        camera: camera,
        scene: scene,
        earth: earth
    };

    //...