Three.js: breve explicación

Three.js es un motor 3D ligero en Javascript, el cual se está volviendo popular entre la comunidad de desarrolladores de juegos y animaciones, para ello solo necesitas Javascript y HTML5.

Se pueden crear animaciones 3D realmente impresionantes y de gran calidad, aunque creo no se compara a aquello que puedes crear con Maya o 3DMax, no hay duda de que puedes lograr diseños increibles, un ejemplo de ello es este auto, al cual puedes cambiarle el material en tiempo real; no imagino siquiera la cantidad de líneas de código y la forma en que fue creado.

Todo depende de tu imaginación y dedicación que le dediques a aprender Three.js, únicamente te dejaré una breve explicación (no soy experta) y un ejemplo para que inicies con este motor 3D.

Lo que te mostraré en este post son los principios básicos, los elementos que necesitas, crear una esfera, hacerlo de manera dinámica y agregarlo a la escena.

Primero descarga three.js de aquí y crea la estructura básica de una página Web (html, body, head)  y el siguiente paso es incluir tu archivo js:

<script src="Three.js"></script>

El siguiente paso será crear los elementos básicos que requieres para una animación 3D, estos son: una cámara, escena y tu renderizador, también puedes agregar luz a tu escena u objetos pero esto lo dejaremos para otra ocasión.

La cámara de compone de la definición de un ángulo, el aspecto (tamaño), que tan lejos se podrá encontrar y lo más cercano que podrá estar de los objetos, es decir:

camera = new THREE.PerspectiveCamera(Angulo, Window.innerWidth / Window.innerHeight, Near, Far);

Lo siguiente que hago en este ejemplo es indicarle la posición en la cual se encontrará con respecto a Z en el plano cartesiano, es decir camera.positon.z = X.

Debo mencionarte que requerirás imaginarte tu espacio no solo en X y Y sino también en la posición Z, tal vez parece un poco complicado pero puedes hacer pruebas para ver como cambia tu escena conforme vas cambio los valores a cada posición.

Una vez que ya tenemos la cámara ahora toca el turno de la escena, es más sencillo pues solo debes crear tu objeto y agregar tu cámara:

scene = new THREE.Scene();
scene.add(camera);

Y el último elemento esencial es tu renderizador, al cual le debes indicar el ancho y alto que contendrá tus elementos, para ello escribes:

renderer = new THREE.CanvasRenderer();
renderer.setSize( XX, YY);

Lo siguiente es indicarle que elemento contendrá tus elementos y para este ejemplo hago la llamada a mi función makespheres(); y actualizo (update) en cierto periodo de tiempo, hasta el momento tu código debe ir así:

La función update() se encarga de actualizar las esferas y renderizar la escena, es decir renderer.render(scene, camera);

Lo más importante ocurre en makespheres() y trataré de explicarlo a detalle a continuación:

Realizo un for de manera que los elementos sean creados durante la iteración, como deseamos que las esferas sean de diferente tamaño el radio de la misma será de manera dinámica (Math.random() * 50), el segmento y el número de anillos serán estáticos.

Lo siguiente será asignarle también un color de manera dinámica por lo que concateno los valores y los asigno a la variable newColor.

Lo siguiente que debemos hacer es crear el materia para la «sphere», es decir el color dinámico que acabamos de obtener y después crear el objeto «sphere» el cual tendrá como propiedades el radio, los segmentos, el número de anillos y el material, es decir:

var sphere = new THREE.Mesh(new THREE.SphereGeometry(radius, segments, rings), sphereMaterial);

Ahora posicionaremos en X y Y de manera dinámica con una escala de 5 tanto para X como para Y; por ultimo agregamos el objeto a la escena.

Y por último updatespheres() que se encarga de posicionar tus esferas creadas. Como siempre lo hago les recomiendo lean la documentación oficial de Three.js en caso de que tengan dudas pueden dejar un comentario o enviarme una mención en Twitter (@silvercorp)

Gracias @marco_garay y @LaloilFigo por sus comentarios 🙂

Three.js | Sitio Oficial
Código Fuente | Download
Esferas | En funcionamiento