Three.js es una librería bastante liviana y muy eficiente para generar y animar gráficos en 3D dentro del navegador, aprovechando las grandes novedades que nos ofrece HTML5 para la generación de contenidos multimedia. Aprovecha tanto las capacidades de HTML5 que es capaz de generar escenas 3D con WebGL, Canvas (2D) y SVG.

Su código está disponible en GitHub y en su web podemos encontrar ejemplos alucinantes de lo que se puede a llegar a hacer con Three.js.

Posibilidades de diseño

Three.js no es popular solo porque es simple a la hora de usarlo a través de JavaScript, sino porque tiene un equilibrio perfecto entre el diseño y la programación.

Permite, entre otras cosas, importar archivos 3D a partir de Blender o Maya, pudiendo generar terrenos u objetos totalmente complejos y de gran calidad.

La librería también incorpora potentísimos shaders que se pueden personalizar con OpenGL Shading Language (GLSL). Y sin duda incorpora todo lo necesario para crear escenas 3D, como son la posibilidad de manipular luces, cámaras, animar objetos, perspectivas, control de visualizaciones y mucho más.

Conceptos básicos

Antes de empezar, vemos el siguiente ejemplo simple que podremos realizar fácilmente tras haber visto los conceptos básicos.

Lo primero que tenemos que tener es nuestro archivo HTML listo para insertar la ventana donde se visualizará todo el 3D, de una forma muy simple, ya que el objeto del Canvas nos los genera Three.js.

Lo primero es descargar la librería para poderla usar, que pesa unos 300kb. Para realizar la prueba haremos que la visualización ocupe toda el espacio del navegador y lo haremos mediante CSS. Seguir leyendo Introducción a Three.js, la librería 3D número uno para HTML5 →