Creando tu primera escena 3D con Three.js

En los últimos años, los navegadores modernos han adquirido potentes funciones a las que se puede acceder directamente desde JavaScript. Puede agregar fácilmente video y audio con etiquetas HTML5 y crear componentes interactivos mediante el uso de HTML5 Canvas. Junto con HTML5, los navegadores modernos también admiten WebGL. Con WebGL, puede utilizar directamente los recursos de procesamiento de su tarjeta gráfica y crear gráficos de computadora 2D y 3D de alto rendimiento. Usar WebGL directamente desde JavaScript para crear y animar escenas 3D es un proceso muy complejo, detallado y propenso a errores. Three.js es una biblioteca que facilita mucho esto. La siguiente lista muestra algunas de las cosas que son muy fáciles de hacer con Three.js:

Crea geometrías 3D simples y complejas y renderízalas en cualquier navegador
Animar y mover objetos a través de una escena 3D
Aplica texturas y materiales a tus objetos
Utilice diferentes fuentes de luz para iluminar la escena.
Utilice modelos de software de modelado 3D y exporte los modelos generados a estos programas
Añade efectos de posprocesamiento avanzados a tu escena 3D
Crear y trabajar con sombreadores personalizados
Crear, visualizar y animar nubes de puntos
Crea escenas de realidad virtual (VR) y realidad aumentada (AR)

Con un par de líneas de JavaScript (o TypeScript, como veremos más adelante en este libro), puedes crear cualquier cosa, desde modelos 3D simples hasta escenas fotorrealistas, todo lo cual se renderiza en tiempo real en el navegador. Por ejemplo, la Figura 1.1 muestra un ejemplo de lo que se puede hacer con Three.js (puedes ver la animación tú mismo abriendo https://threejs.org/examples/webgl_animation_keyframes.html en tu navegador):

En este capítulo, nos sumergiremos directamente en Three.js y crearemos un par de ejemplos que te mostrarán cómo funciona Three.js y que puedes usar para experimentar y conocer un poco Three.js. No profundizaremos en todos los detalles técnicos todavía; aprenderás sobre ellos en los siguientes capítulos. Al final de este capítulo, podrás crear una escena y ejecutar y explorar todos los ejemplos de este libro.

Comenzaremos este libro con una breve introducción a Three.js y luego pasaremos rápidamente a los primeros ejemplos y muestras de código. Antes de comenzar, veamos rápidamente los navegadores más importantes que existen y su compatibilidad con WebGL (y WebGPU).

Nota

Actualmente, todos los navegadores de modelos en computadoras de escritorio y dispositivos móviles admiten WebGL. Las versiones anteriores de IE (las anteriores a la versión 11) no podrán ejecutar aplicaciones basadas en WebGL. En dispositivos móviles, la mayoría de los navegadores admiten WebGL. Por lo tanto, con WebGL, puede crear visualizaciones 3D interactivas que funcionan muy bien en computadoras de escritorio y dispositivos móviles.

En este libro, nos centraremos en el renderizador basado en WebGL que ofrece Three.js. Sin embargo, también existe un renderizador basado en CSS 3D, que proporciona una API sencilla para crear escenas 3D basadas en CSS 3D. Una gran ventaja de utilizar un enfoque basado en CSS 3D es que este estándar es compatible con todos los navegadores móviles y de escritorio y permite representar elementos HTML en un espacio 3D. No entraremos en detalles sobre este navegador, pero mostraremos un ejemplo en el Capítulo 7, Puntos y sprites.

Además de WebGL, se está desarrollando un nuevo estándar para usar la GPU para renderizar en el navegador, llamado WebGPU, que proporcionará un rendimiento aún mejor que WebGL y, en el futuro, se convertirá en el nuevo estándar. Cuando uses Three.js, no tendrás que preocuparte por este cambio. Three.js ya es parcialmente compatible con WebGPU y, a medida que ese estándar madure, también lo será el soporte de este estándar en Three.js. Por lo tanto, todo lo que crees con Threre.js también funcionará de inmediato con WebGPU.

En este primer capítulo, crearás directamente una escena 3D y podrás ejecutarla en un escritorio o dispositivo móvil. Explicaremos los conceptos básicos de Three.js y, si hay temas más avanzados, mencionaremos en qué capítulo los explicaremos con más detalle. En este capítulo, crearemos dos escenas diferentes. La primera mostrará una geometría básica renderizada en Three.js, como se muestra en la siguiente figura:

A continuación, le mostraremos rápidamente cómo cargar modelos externos y lo fácil que es crear escenas de aspecto realista. El resultado del segundo ejemplo se verá así:

Antes de comenzar a trabajar con estos ejemplos, en las siguientes secciones veremos las herramientas que necesitas para trabajar fácilmente con Three.js y cómo puedes descargar los ejemplos que se muestran en este libro.

En este capítulo cubriremos los siguientes temas:

Requisitos para utilizar Three.js
Descargar el código fuente y los ejemplos utilizados en este libro
Probando y experimentando con los ejemplos
Representación y visualización de un objeto 3D
Presentamos un par de bibliotecas auxiliares para estadísticas y control de la escena