Configurando la Escena

Preparando la estructura html

Para utilizar three.js es necesario usar un canvas en la estructura html.

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>Configurando la escena</title>
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                margin: 0px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <script src="three.min.js"></script>
        <script src="index.js"></script>
    </body>
</html>

La escena

Una escena es el espacio 3D en el cual puedes poner objetos, camaras y luces. Este espacio puede se tan grande o pequeño como necesites que este sea.

Una escena se declara de la siguiente forma

var scene = new THREE.Scene();

La Camara

La funcion de una camara es simular el comportamiento de una camara de filmación real. La posición de la camara y la dirección hacia donde este mirando determina las partes de tu escena que sera renderizada. Para configurar la camara necesitas enviar 4 valores, fov, aspect, near, far. Estos 4 aspectos determinan que sera capturado por tu camara.

fov: FOV viene de (field of view) que significa campo de visión. Es la extensión del mundo observable en un momento dado. En nuestro caso se refiere al ángulo que se puede percibir del mundo virtual genrado en el dispositivo. aspect: esta es la relación de aspecto utilizada para crear el campo horizontal de visión basada en el campo vertical. near: Este es el plano más cercano de visión, donde la visión de la camara comienza. far: Este es el plano más lejano, donde la cámara ya no ve.

threeJs camera

Cuando los objetos estan dentro de frustum ellos aparecen renderizados en su pantalla. Hablando de renderizado, necesitamos agregar un renderizador Three.js, una vista que contiene la imagen de tu cámara.

Añadiendo una cámara y un renderizador

// Agregando una cámara sintaxis
// THREE.PerspectiveCamera(fov, aspect, near, far)
var camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth/window.innerHeight,
    0.1,
    1000
);

// Colocar la camara en el eje z al 100
camera.position.z = 100;

// agregar un renderizador
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight);

// Agregar el renderizador al DOM
document.body.appendChild( renderer.domElement );

Iluminacion

Puedes imaginar tu escena ahora como una habitación con una cámara y sin ninguna luz en absoluto. Si tu colocas un objeto en la habitación, no podrás var nada en absoluto. Al contrario del mundo natural, por cuestiones de optimización en el mundo de los graficos por computadoras se utilizan diversos algoritmos de iluminación.

Por cuestiónes pedagogicas puedes estudiar este tema en profundidad aquí.

De momento THREE.JS trabaja con los siguientes tipos de luces:

/**
 * Vamos a crear un cubo así tendremos algo que observar dentro
 * de nuestra escena.
 */
var geometry = new THREE.BoxGeometry( 20, 20, 20);
var material = new THREE.MeshLambertMaterial({color: 0xfd59d7});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

/**
 * Añadimos una luz así podemos ver el cubo
 */
var light = new THREE.PointLight(0xFFFF00);
light.position.set(10, 0, 25);
scene.add(light);

Renderizando la escena

El proceso de renderizado de la escena esta pensado para trabajar en un loop, por ello es necesario ser explicito a la hora de solicitar que se renderice la escena.

// Configurando el loop de renderizado
var render = function(){
    requestAnimationFrame(render);
    renderer.render(scene, camera);
};

// que comienze el renderizado
render();

Conclusión

Para cerrar el capitulo nuestro archivo index.js debería verse así:

// Creando la escena
var scene = new THREE.Scene();

// Agregando una cámara
// THREE.PerspectiveCamera(fov, aspect, near, far)
var camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth/window.innerHeight,
    0.1,
    1000
);

// Colocar la camara en el eje z al 100
camera.position.z = 100;

// agregar un renderizador
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight);

// Agregar el renderizador al DOM
document.body.appendChild( renderer.domElement );

/**
 * Vamos a crear un cubo así tendremos algo que observar dentro
 * de nuestra escena.
 */
var geometry = new THREE.BoxGeometry( 20, 20, 20);
var material = new THREE.MeshLambertMaterial({color: 0xfd59d7});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

/**
 * Añadimos una luz así podemos ver el cubo
 */
var light = new THREE.PointLight(0xFFFF00);
light.position.set(10, 0, 25);
scene.add(light);

// Configurando el loop de renderizado
var render = function(){
    requestAnimationFrame(render);
    renderer.render(scene, camera);
};

// que comienze el renderizado
render();