[ES] Three.js 101 : Hola Mundo! (Parte 1)

Una introducción a Three.js desde la perspectiva de un Creative Coder.

5 min readJan 19, 2017

Estoy usando Three.js todos los días, desde hace más de un año, creando proyectos artísticos. No me considero experto, ni mucho menos, estos artículos son para ayudar a los que lo necesiten.

Qué es Three.js?

Three.js es una librería de Javascript desarrollada por Ricardo Cabello (@mrdoob) en 2010 (actualmente cuenta muchos contribuidores en Github). Esta increíble herramienta nos permite trabajar con gráficos 3D en el navegador, utilizando WebGL, de una manera muy sencilla e intuitiva. Esta explicación podría ser mas extensa pero para resumir, Three.js es excelente para llevar el Creative Coding al navegador.

Algunos proyectos increíbles creados con Three.js (Links al final)

Hoy en día WebGL nos permite crear experiencias interactivas en una gran variedad de plataformas y dispositivos.

Qué necesitamos?

Un navegador web actualizado (yo prefiero usar Chrome).
Conocimiento básico de Javascript (quizás esto te resulte útil).
Ganas de divertirse :).

Estructura básica

Bueno es hora de arrancar, respira hondo y abrí tu editor favorito. Vamos a crear dos archivos (por motivos de legibilidad).

index.html (aquí importamos Three.js desde un CDN).
script.js (aquí va a ir nuestro código).

Eso parece mucho código, pero no lo es, vamos a analizarlo parte por parte. Si todo salió bien, deberías estar viendo algo así:

Para ser sincero, no es muy emocionante, pero mas adelante vamos a agregarle la chispa que le falta, por ahora analicemos que es lo que esta sucediendo.

Un WebGlRenderer, una escena y una cámara

El primer patrón común que vamos a ver en todas las aplicaciones de Three.js es:

Crear un renderer.
Crear una escena.
Crear una cámara.

El renderer es el lugar donde vamos a volcar el resultado de nuestras escenas. En Three.js podemos tener múltiples escenas y cada una puede tener diferentes objetos dentro.

Aquí creamos nuestro WebGLRenderer, le damos el tamaño total de la ventana y asignamos el renderer al DOM:

var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Creamos una escena vacía, es donde agregaremos nuestros objetos:

var scene = new THREE.Scene();

Y por último creamos una cámara, pasando como parámetros el FOV, el aspect ratio, el near plane y el far plane:

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

Una vez terminado esto ya tenemos agregados los 3 elementos fundamentales de una aplicación en Three.js.

Geometría, Material y Mesh

El segundo patrón común es agregar objetos a la escena, los pasos son los siguientes:

Crear un Geometry.
Crear un Material
Crear un Mesh.
Agregar el mesh a la escena.

Un Mesh en Three.js es la composición de una geometría y un material.

Un Geometry es la fórmula matemática de un objeto, en Three.js tenemos muchas geometrías, algunas las exploraremos en los próximos capítulos. Una geometría nos da los vértices del objeto que queremos agregar a la escena.

Las demás geometrías están disponibles en la documentación, en el apartado Geometries.

Un Material podemos definirlo como las propiedades de un objeto y su comportamiento con respecto a las fuentes de luz de la escena. Como se puede ver en la siguiente imagen hay diferentes tipos de materiales.

Los demás materiales están disponibles en la documentación, en el apartado Materials.

Ahora que ya sabemos lo que es un Mesh, un Geometry y un Material, los vamos a agregar a la escena. En este caso vamos a crear un cubo con un material básico.

// Creamos el Geometry, pasando el tamaño
var geometry = new THREE.BoxGeometry( 1, 1, 1 );// Creamos el Material, pasando el color
var material = new THREE.MeshBasicMaterial( { color: "#433F81" } );// Creamos el Mesh
var cube = new THREE.Mesh( geometry, material );// Agregamos el Mesh a la escena
scene.add( cube );

RequestAnimationFrame

La última pieza de código es la que nos permite animar la escena, para esto utilizamos requestAnimationFrame, que nos permite tener una función que corre a 60 frames por segundo (en el mejor de los casos).

// Render Loop
var render = function () {
  requestAnimationFrame( render );  // El código animado  renderer.render(scene, camera);
};

render();

Animando el cubo

Para animar el cubo dentro de nuestro render loop, vamos a tener que cambiar sus propiedades. Cuando creamos un Mesh tenemos acceso a un conjunto de propiedades que son muy útiles al momento de animar.

// Rotación(XYZ) en radianes. 
cube.rotation.x
cube.rotation.y
cube.rotation.z// Posición (XYZ)
cube.position.x
cube.position.y
cube.position.z// Escala (XYZ) 
cube.scale.x
cube.scale.y
cube.scale.z

En nuestro ejemplo animamos la rotación en X e Y del cubo:

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

La consola es tu amiga

Una herramienta fundamental cuando estamos trabajando con Three.js es la consola, personalmente me gusta utilizar la de Chrome, pero actualmente todos los navegadores tienen una consola decente.

Para terminar de entender como funcionan las propiedades de los Mesh me parece que la mejor forma es hacerlo con la consola en tiempo real.

Mejoremos nuestro ejemplo

Ahora que ya comprendemos la lógica del ejemplo, voy a agregar mas piezas a la escena, para generar una composición mas compleja

A modo de ejercicio partiendo de este ejemplo podes crear tu propia versión. No tengas miedo de romper el código, forkea y compartilo. Me encantaría ver sus resultados.

Me interesa tu opinión

Mi idea es seguir haciendo esta serie de artículos, me gustaría saber si les son útiles y si les gustaría que escriba sobre algún tema en particular. Por favor, no dudes en dejar un comentario o mandarme un mensaje.

Te invito a pasar por mi web personal y seguirme en Instagram para ver más trabajos hechos en Three.js, me ayudarías mucho ❤.