THREEjs Globe

Awesome globe

by secretgspot

HTML

<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/libs/stats.min.js"></script>

CSS

body {
                background-color: #ccc;
                margin: 0px;
                overflow: hidden;
            }

JavaScript

var SCREEN_WIDTH = window.innerWidth,
            SCREEN_HEIGHT = window.innerHeight,

            mouseX = 0, mouseY = 0,

            windowHalfX = window.innerWidth / 2,
            windowHalfY = window.innerHeight / 2,

            SEPARATION = 200,
            AMOUNTX = 10,
            AMOUNTY = 10,

            camera, scene, renderer;

            init();
            animate();

            function init() {

                var container, separation = 100, amountX = 50, amountY = 50,
                particles, particle;

                container = document.createElement('div');
                document.body.appendChild(container);

                camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
                camera.position.z = 1000;

                scene = new THREE.Scene();

                renderer = new THREE.CanvasRenderer();
                renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
                container.appendChild( renderer.domElement );

                // particles

                var PI2 = Math.PI * 2;
                var material = new THREE.ParticleCanvasMaterial( {

                    color: 0xffffff,
                    program: function ( context ) {

                        context.beginPath();
                        context.arc( 0, 0, 1, 0, PI2, true );
                        context.closePath();
                        context.fill();

                    }

                } );

                for ( var i = 0; i < 1000; i ++ ) {

                    particle = new THREE.Particle( material );
                    particle.position.x = Math.random() * 2 - 1;
                    particle.position.y = Math.random() * 2 - 1;
                    particle.position.z = Math.random() * 2 - 1;
                    particle.position.normalize();
                    particle.position.multiplyScalar( Math.random() * 10 + 450 );
                    scene.add( particle );

                }

      ...