Graficación Avanzada Con Webgl

Three.js

J. Fco. Jafet Pérez López

Primera escena.

En nuestro primer ejercicio definiremos algunos elementos mínimos que se requieren para conformar una escena 3D (Una referencia a la escena, una cámara y una referencia a un objeto para el renderizado).

El objetivo de la actividad es lograr una escena como la siguiente:

Necesitaremos una variable que haga referencia a la escena y nos permita almacenar y realizar un seguimiento de todos los objetos que se agregarán a dicha escena.

También creamos una variable para acceder a una cámara. La variable cámara define lo que veremos cuando se muestre la escena, es decir, veremos la escena a través del ojo de la cámara.

Vamos a definir un objeto de renderizado. El renderizador se encarga de calcular la escena que veremos en el navegador basándose en el ángulo de la cámara. Vamos a crear un objeto de la clase WebGLRenderer que va a utilizar la tarjeta gráfica para renderizar la escena.

//Crear una escena, que contendrá todos los elementos como objetos, cámaras y luces.

var escena = new THREE.Scene();

//Crear una cámara, que define hacia dónde estamos mirando.

var camara = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

//Crear un objeto render y establecer su tamaño

var renderizador = new THREE.WebGLRenderer();

renderizador.setClearColor(new THREE.Color(0xEEEEEE));

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

Aquí establecemos el color de fondo del render a casi blanco (0xEEEEEE) con la operación setClearColorHex() y decimos al renderizador qué tan grande será la escena mediante el uso de la función setSize(). Hasta el momento, tenemos una escena básica vacía, un renderizador y una cámara.

El siguiente código agrega los ejes auxiliares que nos ayudarán a comprender un mundo 3D y el plano sobre el que se colocarán los objetos de la escena (el cubo y la esfera).

var ejes = new THREE.AxisHelper( 20 );

escena.add(ejes);

//Crear el plano que simula el suelo

var geometriaDelPlano = new THREE.PlaneGeometry(60,20);

var materialDelPlano = new THREE.MeshBasicMaterial({color: 0xcccccc});

var plano = new THREE.Mesh(geometriaDelPlano,materialDelPlano);

//Rotar y posicionar el plano

plano.rotation.x=-0.5*Math.PI;

plano.position.x=15

plano.position.y=0

plano.position.z=0

//Agregar el plano a la escena

escena.add(plano);

Como puedes ver, hemos creado un objeto ejes y se utiliza la operación escena.add() para agregar estos ejes a nuestra escena.

Después se crea el plano. Esto se realiza en dos pasos. Primero definimos la forma del plano establecida mediante un ejemplar de la clase PlaneGeometry: THREE.PlaneGeometry(60,20). En este caso, tiene una anchura de 60 y una altura de 20 unidades. También tenemos que especificar la apariencia del plano (por ejemplo, su color y su transparencia). En Three.js hacemos esto mediante la creación de un objeto material. Para este ejemplo vamos a crear un material básico (usando un objeto de la clase MeshBasicMaterial) con el color 0xCCCCCC (gris). En seguida combinamos estos dos en un objeto malla (de la clase Mesh) llamado plano.

Antes de añadir este plano a la escena tenemos que ponerlo en la posición correcta; lo giramos 90 grados alrededor del eje x y definimos su posición en la escena utilizando la propiedad position. El último paso que tenemos que hacer es agregar este plano a la escena, tal como lo hicimos con los ejes.

El cubo y la esfera se añaden de la misma manera, pero estableceremos la propiedad alambre (wireframe) a true, ya que en este ejercicio no utilizaremos luces y los objetos no son visibles sin una luz que incida sobre ellos.

//Crear un cubo

var geometriaDelCubo = new THREE.CubeGeometry(4,4,4);

var materialDelCubo = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});

var cubo = new THREE.Mesh(geometriaDelCubo, materialDelCubo);

//Posicionar el cubo

cubo.position.x=-4;

cubo.position.y=3;

cubo.position.z=0;

//Agregar el cubo a la escena

escena.add(cubo);

//Crear una esfera

var geometriaDeLaEsfera= new THREE.SphereGeometry(4,20,20);

var materialDeLaEsfera = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});

var esfera = new THREE.Mesh(geometriaDeLaEsfera, materialDeLaEsfera);

//Posición de la esfera

esfera.position.x=20;

esfera.position.y=4;

esfera.position.z=2;

//Agregar la esfera a la escena

escena.add(esfera);

En este punto todos los elementos que queremos mostrar se añaden a la escena en las posiciones correctas.

Ya se mencionó que la cámara define lo que podrá verse. En este fragmento de código posicionamos la cámara utilizando los valores de sus ejes x, y, z para que flote por encima de nuestra escena. Para asegurarse de que la cámara está mirando nuestros objetos, utilizamos la operación lookAt(), para hacer que la cámara mire hacia el centro de nuestra escena.

//Posicionamos la cámara y hacemos que apunte al centro de la escena.

camara.position.x = -30;

camara.position.y = 40;

camara.position.z = 30;

camara.lookAt(escena.position);

Por último anexamos la salida desde el renderizador al elemento <div> de nuestro esqueleto HTML; usamos jQuery para seleccionar el elemento correcto, y le decimos al renderizador que calcule la escena usando

...