Untitled

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="../libs/three.js"></script>
        <script src="../libs/OrbitControls.js"></script>
        <script src="../libs/dat.gui.min.js"></script>
        <script src="../libs/stats.min.js"></script>
        <style>
            body {
                /* set margin to 0 and overflow to hidden, to go fullscreen */
                margin: 0;
                overflow: hidden;
            }
        </style>
    </head>
    <script>

        // global variables
        var renderer;
        var scene;
        var camera;
        var control;
        var stats;
        var cameraControl;

        /**
         * Initializes the scene, camera and objects. Called when the window is
         * loaded by using window.onload (see below)
         */
        function init() {

            // create a scene, that will hold all our elements such as objects, cameras and lights.
            scene = new THREE.Scene();

            // create a camera, which defines where we're looking at.
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

            // create a render, sets the background color and the size
            renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0x000000, 1.0);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMapEnabled = true;

            // create a sphere
            var sphereGeometry = new THREE.SphereGeometry(15, 30, 30);
            var sphereMaterial = new THREE.MeshNormalMaterial();
            var earthMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
            earthMesh.name = 'earth';
            scene.add(earthMesh);

            // position and point the camera to the center of the scene
            camera.position.x = 35;
            camera.position.y = 36;
            camera.position.z = 33;
            camera.lookAt(scene.position);

            // add controls
            cameraControl = new THREE.OrbitControls(camera);


            // setup the control object for the control gui
            control = new function () {
                this.rotationSpeed = 0.005;
                this.opacity = 0.6;
            };

            // add extras
            addControlGui(control);
            addStatsObject();


            // add the output of the renderer to the html element
            document.body.appendChild(renderer.domElement);

            // call the render function, after the first render, interval is determined
            // by requestAnimationFrame
            render();
        }


        function addControlGui(controlObject) {
            var gui = new dat.GUI();
            gui.add(controlObject, 'rotationSpeed', -0.01, 0.01);
        }

        function addStatsObject() {
            stats = new Stats();
            stats.setMode(0);

            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.body.appendChild(stats.domElement);
        }


        /**
         * Called when the scene needs to be rendered. Delegates to requestAnimationFrame
         * for future renders
         */
        function render() {

            // update stats
            stats.update();

            // update the camera
            cameraControl.update();

            scene.getObjectByName('earth').rotation.y+=control.rotationSpeed;

            // and render the scene
            renderer.render(scene, camera);

            // render using requestAnimationFrame
            requestAnimationFrame(render);
        }


        /**
         * Function handles the resize event. This make sure the camera and the renderer
         * are updated at the correct moment.
         */
        function handleResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        // calls the init function when the window is done loading.
        window.onload = init;
        // calls the handleResize function when the window is resized
        window.addEventListener('resize', handleResize, false);

    </script>
    <body>
    </body>
    </html>