JavaScript 3D! aprendiendo Three.js

Image may be NSFW.
Clik here to view.

Vamos a aprender a programar objetos 3D y para eso nos vamos a ayudar con una de las librerías más conocidas en el entorno 3D de JavaScript, estoy hablando de

Three.js

Para aprender a usar Three.js primero debemos entender como funciona

Image may be NSFW.
Clik here to view.

Three.js renderiza una Escena 3D dentro de nuestro Canvas (o svg) utilizando un Renderizador y una Cámara, a la vez las Escenas a renderizar están compuestas por Luces y Formas(meshes), las Formas están compuestas por Geometrías y Materiales y finalmente las Geometrías poseen Vertices y Caras.

Bien dicho esto solamente de teoría podemos comenzar a crear nuestra primer escena.

Primero por supuesto debemos incluir la librería, es recomendable utilizar algún build ya minificado

<script src=”three.min.js”></script>

Luego creamos nuestro renderizador, en este caso voy a usar WebGL, por lo tanto

var renderer = new THREE.WebGLRenderer();

Ahora vamos a crear nuestra cámara, para la cual necesitamos algunos parámetros, es recomendable usar estos prefijados (obviamente el alto y ancho pueden definirlo ustedes)

var WIDTH = 400,
HEIGHT = 300;

var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;

var camera =
new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR);

Luego comenzamos a definir nuestra Escena

var scene = new THREE.Scene();

agregamos la cámara y la posicionamos en nuestra escena 3d utilizando posicionamiento en X, Y y Z

scene.add(camera);
camera.position.z = 300;

seteamos el tamaño de nuestro renderizador y pedimos que nos devuelva el nodo HTML donde va a renderizar para insertarlo dentro de nuestro árbol DOM

renderer.setSize(WIDTH, HEIGHT);

// attach the render-supplied DOM element
$container.append(renderer.domElement);

el ejemplo presupone que usamos jQuery para insertar elementos en el DOM pero podríamos utilizar directamente document.body.appendChild(renderer.domElement);

Si renderizaramos ahora no veríamos absolutamente nada ya que no hay objetos que mostrar, así que vamos a crear uno

Primero definimos un Material para nuestro objeto, aunque en Three.js hay distintos tipos de materiales vamos a utilizar uno de los más sencillos para mantener simple nuestro ejemplo, el MeshLambertMaterial puede recibir solamente un color (en hexadecimal) y con eso tiene información suficiente para renderizarse

var sphereMaterial =
new THREE.MeshLambertMaterial(
{
color: 0xCC0000
});

Ahora vamos a crear nuestro objeto

var radius = 50,
segments = 16,
rings = 16;

var sphere = new THREE.Mesh(

new THREE.SphereGeometry(
radius,
segments,
rings),

sphereMaterial);

atención que el Objeto Mesh necesita tanto de una Geometría como de un Material para poder crearse.

y finalmente agregamos el objeto a nuestra escena 3d

scene.add(sphere);

Ahora éste sería un mundo muy obscuro si no agregamos algo de iluminación asi que vamos a agregar una luz

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

// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;

// add to the scene
scene.add(pointLight);

nuevamente definimos el color de nuestro punto de luz utlizando hexadecimal

Finalmente…. RENDERIZAMOS