Día 0 - Three.js - ¿Qué es three.js? + portfolio

Día 0 - Three.js - ¿Qué es three.js? + portfolio

¿Conoces la librería de JavaScript three.js? Se trata de una librería que aprovecha las ventajas de WebGL para renderizar gráficos, lo que la hace idónea para animaciones y experiencias interactivas en 3D. Si esto no te dice nada, te invito a consultar algunos de sus ejemplos o de los proyectos destacados en su página principal. […]

Categorías: Devlog

Adrián Garzón Ximénez - Desarrollador Fullstack


¿Conoces la librería de JavaScript three.js? Se trata de una librería que aprovecha las ventajas de WebGL para renderizar gráficos, lo que la hace idónea para animaciones y experiencias interactivas en 3D.

Si esto no te dice nada, te invito a consultar algunos de sus ejemplos o de los proyectos destacados en su página principal. ¿Lo has hecho?

La primera vez que visité la página de three.js tuve claro que quería aprender a utilizarla. El problema es que no controlo de diseño, 3D, matemáticas y todas esas cosas que parece requerir la librería. Esto hizo que tardara años en lanzarme a explorarla. Y, cuado por fin me decidí, mi sorpresa fue que se trata de una librería increíblemente fácil de utilizar.

¿Qué es three.js?

three.js se define como una librería que “trata de hacer tan fácil como sea posible disponer de contenido en 3D en una página web”. Y vaya si lo consigue.

Para ello se basa sobre WebGL, un eficiente pero complejo sistema de bajo nivel que dibuja puntos, líneas y triángulos en un lienzo (canvas) para producir dibujos tanto en 2D como en 3D que pueden alcanzar cierta complejidad con buen rendimiento. Esto se debe a que WebGL permite el aceleramiento del procesado de imágenes mediante GPU.

La principal ventaja de three.js es que se encarga de gestionar todos los detalles para que nuestro código sea relativamente ligero y descriptivo.

¿Cómo funciona three.js?

Para entender cómo utilizar three.js debemos familiarizarnos con unos pocos conceptos clave:

  • Renderer. Es el objeto principal de three.js, encargado de renderizar la escena dentro de nuestra pantalla. Para ello emplea algo así como un punto de vista (frustum). De modo que depende de dos objetos de gran importancia: la escena y la cámara.
  • Scene. Incluye objetos, como mallas 3D, luces, grupos de objetos, cámaras, etc. Básicamente define la escena que se va a renderizar.
  • Camera. Determina qué parte de la escena debe mostrarse en el render, lo que nos permite ocultar parcialmente nuestra escena, movernos por ella, etc.

Estas son las tres piezas básicas de una aplicación de three.js. La escena contiene objetos, y la cámara determina cuáles de ellos o qué partes de los mismos son visibles, cuáles son sus proporciones respecto al resto de objetos, etc. Por último, el renderer pinta en la pantalla la parte de la escena que la cámara hace visible.

La escena

En three.js, la escena no es más que un contenedor para objetos. Estos pueden ser, por ejemplo, luces (Light), que determinarán aspectos como el color de los elementos visibles.

Además de las luces, uno de los componentes básicos es la malla (Mesh).

Las mallas aúnan dos conceptos:

  • Geometry. La geometria es un objeto que determina la cantidad de vértices y aristas que conforman una figura, así como su distribución.
  • Material. El material configura las propiedades de la superficie de nuestra geometría. Por ejemplo, si refleja o no la luz, si tiene determinado color o si se le debe aplicar alguna textura (Texture).

Para crear una forma geométrica básica, por tanto, tan solo debemos utilizar una malla (Mesh). A esta malla le asignaremos una geometría (Geometry) y un material (Material), que a su vez podría tener asignada una textura (Texture).

Al distribuir las mallas en la Scene, indicando qué coordinadas ocupan, obtenemos una escena más o menos compleja, que podemos visualizar a través de nuestra Camera. Además, three.js incluye otras herramientas, como controles que nos permiten girar la cámara o desplazar su posición en la escena para explorar todos sus detalles.

Futuros pasos

Como no podía ser de otro modo, me he zambullido en el curso three.js journey de Bruno Simon, un referente en el sector. También he comenzado a experimentar con los proyectos de Wawa Sensei y otros desarrolladores especializados en three.js.

Quiero desarrollar un portfolio conforme vaya avanzando, porque llevo tiempo teniendo ganas de desarrollar un videojuego (sencillo) con JavaScript, y creo que lo haré con esta librería.

Por lo pronto he preparado un portfolio bastante sencillo, que iré actualizando poco a poco. La idea es que cada vez que termine un proyecto, se añada una nueva forma geométrica a las que flotan en torno a la palabra “porfolio”. Estas nuevas formas contendrán una representación del proyecto en cuestión, y al hacer click sobre ellas se podrá navegar a la dirección donde estén hospedadas.

Por supuesto, la escena actual se basa en el brillante portfolio de ilithya, utilizado como ejemplo en el curso de Bruno Simon (cuyo portfolio también conviene explorar). Pero la idea es que poco a poco se aleje de esta presentación inicial.

¡Estate pendiente a las nuevas entradas de este devlog para acompañarme en este viaje, o consulta mi three.js portfolio para comprobar si ya he subido algún proyecto nuevo! Si te interesa ver el código, también puedes echar un vistazo al repo. Si no has tocado nunca three.js te sorprenderá lo fácil que es trabajar con él.