Hola Mundo en ThreeJS

/*

	Aquí comprobamos con la clase Detector si el navegador soporta WebGL. 

	Si no lo soporta se muestra un mensaje predeterminado. 

*/

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

/*

	Esta variable la utilizamos para mostrar el rendimiento de lo aplicación en tiempo real. 

*/

var stats;

/*

	Variables generales de la escena 3d.

	-renderer: objeto que renderiza todos los objetos de la escena teniendo en cuenta el punto de vista de la cámara

	-scene: objeto que contiene todos los objetos 3d de la escena. 

	-camera: objeto situado en la escena (posición/rotación) con un campo de visión a través del que se ven los objetos

*/

var renderer, scene, camera;

/*

	object: aquí almacenaremos el cubo que vamos a crear

	material: material con el que vamos a crear el cubo

*/

var object;

var material;

init();

animate();

function init() {

	//Creamos la escena

	scene = new THREE.Scene();

	/*

		Creamos la cámara. El constructor es: function ( fov, aspect, near, far )

		-fov: field of view, ángulo de visión de la cámara

		-aspect: aspect ratio de la cámara

		-near, far: visión mínima y máxima de la cámara

		una vez creada la cámara la añadimos a la escena. 

	*/

	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );

	camera.position.z = 100;

	scene.add(camera);

	/*

		Creamos el material. En esta ocasión es uno de tipo MeshLambertMaterial, que admite luces

	*/

	material = new THREE.MeshLambertMaterial({

      	color: 0xff3426

      });

			/*

		Creamos un nuevo objeto de tipo Mesh. La clase Mesh recibe dos parámetros: 

		-geometría: un cubo, un plano, etc...

		-material: el material que vamos a utilizar para "vestir" nuestra geometría

		En este caso como primer parámetro hemos creado un cubo. El constructor del cubo tiene el siguiente formato: 

		function ( width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides ) {

		-width, height, depth: ancho, alto y profundidad  del cubo.

		-segmentsWidth, segmentsHeight, segmentsDepth: número de segmentos de cada cara

		-materials: materiales (opcional)

	*/

	object = new THREE.Mesh(new THREE.CubeGeometry(20,5,10,4,4,4),material);

	scene.add( object );

	/*

		Punto de luz que añadimos y colocamos en la escena. Hay varios tipos de luces, PointLIghts, AmbientLight, SpotLight, etc...

	*/

	var pointLight = new THREE.PointLight(0xFFFFFF);

	pointLight.position.x = 10;

	pointLight.position.y = 50;

	pointLight.position.z = 130;

	scene.add(pointLight);

	/*

		Hay varios tipos de renderer que veremos en otros post. En este caso hemos creado un renderer WebGL para la escena.

		Los dos parámetros que pasamos son el color de fondo y su opacidad. 

	*/

	renderer = new THREE.WebGLRenderer( { clearColor: 0xcccccc, clearAlpha: 1 } );

	renderer.setSize( window.innerWidth, window.innerHeight );

	/*

		Por último añadimos el renderer a nuestro documento y añadimos la ventana de estadísticas

	*/

	var container = document.getElementById( 'container' );

	container.appendChild( renderer.domElement );

	stats = new Stats();

	stats.domElement.style.position = 'absolute';

	stats.domElement.style.top = '0px';

	container.appendChild( stats.domElement );

	window.addEventListener( 'resize', onWindowResize, false );

}

/*

	Función que se ejecuta en cada fotograma. Desde ella renderizamos la escena (render()) y actualizamos estadísticas

*/

function animate() {

	requestAnimationFrame( animate );

	render();

	stats.update();

}

/*

	Rotamos el objeto y le decimos al renderer que actualice lo que está pasando en escena

*/

function render() {

	object.rotation.y += .01;

	object.rotation.x += .015;

	renderer.render( scene, camera );

}

/*

	Si la ventana se reescala, actualizamos el aspect ratio de la cámara y el tamaño del renderer. 

*/

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;

	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}