Volver al proyecto

Librería Three.js

¿Qué es Three.js?

Según la página web de Three.js, es una librería JavaScript que contiene un conjunto de clases preparadas para crear y renderizar gráficos 3D interactivos en WebGL.

WebGL es una arquitectura de software para JavaScript que permite crear gráficos 3D que funcionan en los navegadores. Lo interesante de WebGL es que el código se modela directamente en el navegador. Para ello, WebGL utiliza el objeto canvas que se introdujo en HTML5.

Trabajar con WebGL es un proceso que requiere bastante tiempo. Durante el desarrollo, hay que describir cada punto, línea, arista, etc. Para renderizarlo todo, hay que escribir un código bastante largo. Para acelerar el proceso de desarrollo, se desarrolló Three.js.

Las partes principales de la aplicación WebGl. Fuente: Forasoft
Las partes principales de la aplicación WebGl. Fuente: Forasoft

¿Qué funcionalidades tiene Three.js?

Three.js permite crear gráficos 3D acelerados utilizando JavaScript como parte del sitio web sin necesidad de plugin específicos para el navegador.

La biblioteca Three.js, como ya se ha mencionado, facilita el trabajo con WebGL. El uso de Three.js elimina la necesidad de escribir shaders (código que puede ejecutarse en los procesadores de las tarjetas gráficas sin malgastar innecesariamente energía de la CPU) y proporciona una forma de operar sobre conceptos familiares.

La simulación gráfica con Three.js puede compararse con un plató de cine, ya que se pueden manipular conceptos como la escena, la luz, la cámara, los objetos y sus materiales.

¿Cuáles son los fundamentos de la librería?

Los tres fundamentos de Three.js son:

  • Escena – una especie de plataforma donde se colocan todos los objetos que creamos;
  • Cámara – básicamente un «ojo» que apuntará a la escena. La cámara captura y muestra los objetos que se encuentran en la escena;
  • Renderizado – una herramienta que nos permite mostrar la escena captada por la cámara.

La librería ofrece documentación detallada sobre su uso y diversas referencias para inspirarse.

image_pdfVersión en PDF
en_GBEnglish