Simple ThreeJS experiment

This is a simple use of ThreeJS : A basic rotating sphere

by aybalasubramanian

HTML

<div id="myPlanet"></div>

CSS

body {
    background : #000;
    padding : 50px;
    margin : 0;
}

#myPlanet {
    width : 400px;
    height: 400px;
    margin : auto;
}

JavaScript

/**
 * First, let's preapare some contexte
 */

// The WIDTH of the scene to render
var __WIDTH__  = 400,
    
// The HEIGHT ot the scene to render
    __HEIGHT__ = 400,

// The angle of the camera that will shox the scene
// It is express in degres
    __ANGLE__ = 45,

// The shortest distance the camera can see
    __NEAR__  = 1,
    
// The fartest distance the camera can see
    __FAR__   = 9999
    
// The basic hue used to color our object
    __HUE__   = 0;

/**
 * To reder a 3D scene, ThreeJS needs 3 elements :
 * A scene where to put all the objects
 * A camera to manage the point of view
 * A renderer place to show the result
 */
var scene  = new THREE.Scene(), 
    camera = new THREE.PerspectiveCamera(__ANGLE__, 
                                         __WIDTH__ / __HEIGHT__, 
                                         __NEAR__, 
                                         __FAR__),
    renderer = new THREE.WebGLRenderer();

/**
 * Let's preapare the scene
 */

// Add the camera to the scene
scene.add(camera);

// As all objects, the camera is put at the 0,0,0 coordonate, let's pull it back a little
camera.position.z = 300;

// We need to define the size of the renderer
renderer.setSize(__WIDTH__, __HEIGHT__);

// Let's attach our rendering zone to our page
document.getElementById("myPlanet").appendChild(renderer.domElement);

/**
 * Now we are ready, we can start building our planet
 * To do this, we need a mech define with :
 * A geometry (a sphere) 
 * A material
 */
var geometry, material, mesh;

// First let's build our geometry
// There is other parameters, but you basically just need to define the radius of the Sphere and the number of vertical and horizontal division.
// From the 2 last parameters depend the number of vertex that will be produce : the biger the smoother the form will be but also the slower it will be to render. Make a wise choice to balance the 2.
geometry = new THREE.SphereGeometry( 100, 20, 20 );

// Then, prepare our...