Uso de Three.js para agregar elementos 3D a sus sitios web

El diseño plano es genial, pero los elementos 3D llevan los diseños de diseño web a un nuevo nivel. Los sitios web con gráficos animados en 3D y escenas interactivas en 3D se están volviendo más comunes que nunca. Los clientes ahora quieren ese tipo de diseños en sus sitios web y te los pedirán. Aprender a incorporar el diseño 3D en sus proyectos de diseño web solo mejorará su trayectoria profesional y obtendrá más clientes. Afortunadamente, recursos como Three.js están fácilmente disponibles para que los diseñadores y desarrolladores de Divi agreguen elementos 3D personalizados a sus sitios web.

En esta publicación, veremos los conceptos básicos de Three.js y por qué es una buena opción para agregar elementos 3D a sus sitios web. Sí, incluso sus sitios web Divi. Para comenzar con Three.js, necesitará algunos conocimientos de codificación, específicamente HTML, CSS y Javascript. Si aún está aprendiendo a codificar, siga el tutorial paso a paso en el sitio web Three.js desde el principio. Si la terminología sobre dónde agregar el código es nueva para usted, hay muchos tutoriales disponibles para guiarlo a través de los pasos técnicos. Le sugiero que vea algunos videos, tal vez tome un curso en Skillshare o Udemy para realmente tener una idea de cómo incorporar la biblioteca Three.js en sus diseños.

Hagámoslo.

¿Qué es Three.js?

En primer lugar, ¿qué es Three.js?

Three.js es una biblioteca 3D de JavaScript que proporciona renderizadores <canvas>, <svg>, CSS3D y WebGL. Trae diseños 3D a su navegador sin la necesidad de un complemento. La biblioteca puede ayudarlo a crear elementos 3D simples, interacciones 3D complejas y juegos animados creativos. Three.js es una biblioteca de código abierto con un repositorio de Github donde los usuarios pueden compartir sus propias creaciones de Three.js.

De todos los renderizadores que cubre Three.js, el más utilizado es WebGL. La creación de elementos 3D solo con WebGL necesita muchas líneas de código y mucho conocimiento matemático. Three.js hace que sea mucho más fácil crear una escena y renderizarla con WebGL.

Comprensión de una escena 3D y la terminología de Three.js

Para crear una animación 3D con Three.js, primero debe comprender cómo se configura una escena 3D. Los tres elementos necesarios para construir un entorno 3D son los siguientes:

1. La escena
2. La Cámara
3. El renderizador

La escena es donde configura todos los elementos 3D que mostrará Three.js. Visualmente se parece a un escenario de teatro o un televisor. la cámara es el punto de vista de la escena y cómo un humano técnicamente vería los elementos en la escena. El renderizador lo junta todo y dibuja la escena. Si domina la animación 3D, seguramente reconocerá esto como un estándar para configurar una escena.

Una vez configurada la escena, se colocan objetos en ella. Los objetos se construyen en tres pasos:

1. La geometría
2. El material
3. La malla

La geometría de un objeto es el esqueleto o el contorno básico de una forma. Para darle a la geometría un color o textura, se aplica el material . La combinación de la geometría y el material se llama malla .

La biblioteca Three.js ya tiene muchas geometrías básicas para que las use. No es necesario construirlos desde cero. Solo tiene que llamarlos desde la biblioteca a su código y luego personalizarlos. Además de utilizar códigos hexadecimales para los colores como material, puede crear texturas con imágenes o encontrarlas en bibliotecas de texturas.

Una vez que se configura la escena y se agregan las geometrías, agrega funciones para iluminar la escena, animar los objetos y mucho más. Además de los objetos básicos disponibles en la biblioteca Three.js, también puede cargar otras imágenes 3D desde bibliotecas en línea o las que cree en Blender.

Introducción a Three.js

No podría ser más fácil sentirse cómodo con Three.js. El sitio web Three.js tiene toda la documentación que necesita para comprender cómo funciona la biblioteca y cómo puede usarla.

En el sitio web Three.js y en su Github, encontrará una versión en vivo del código para la aplicación Three.js más simple. Usan JSFiddle pero también puede verlo funcionando en CodePen o Codesandbox.io

Le sugiero que siga los pasos del sitio web Three.js para comprender realmente cómo funciona todo. Ya sea con Codepen, su Terminal o el software de codificación preferido. Toda la biblioteca Three.js está disponible en el sitio web Threejs.org para usar una vez que haya establecido su escenario y haya comenzado a darse cuenta de lo que se puede hacer. A continuación, puede ver la aplicación básica Three.js que funciona en JSFiddle. Haga clic en "Editar con JSFiddle" para jugar con el código.

Recursos de aprendizaje de Three.js

Dado que Three.js es una API de código abierto, siempre suceden cosas en su repositorio de GitHub. Lo que significa que siempre hay muchas cosas nuevas que aprender. Afortunadamente, han creado un manual digital que se actualiza constantemente para los cambios. Puede encontrarlo en discoverthreejs.com. Este es, con mucho, el mejor recurso que existe. Si necesita un tutorial paso a paso sobre cómo configurar la aplicación y usar los recursos de la biblioteca, aquí hay un excelente curso sobre Skillshare que lo guía a través de todos los pasos de la documentación de Three.js.

Del mismo modo, este tutorial de YouTube le muestra los conceptos básicos para configurar una escena con Three.js, pero espera que conozca las habilidades básicas de desarrollo web.

Si desea profundizar en Three.js y WebGL, este curso de Udemy lo explica todo y promete tener fluidez en la creación de contenido 3D al final.

¿Está buscando un tutorial detallado, rápido y sucio? Este tutorial de código paso a paso en CreativeBloq es justo lo que necesita.

Ejemplos de Three.js

No hay nada mejor que un poco de inspiración para comenzar a diseñar sus propios diseños en 3D con Three.js. Para ver algunas creaciones de Three.js bastante increíbles, solo vaya a su sitio web y explore.

Usando Three.js con Divi

Usar Three.js con Divi es bastante simple. Solo necesita agregar la biblioteca javascript a los archivos de su proyecto y agregarla a su HTML. Para agregar una aplicación a cualquier diseño Divi, primero cree el diseño 3D por separado en su software de codificación favorito o en la terminal de su computadora. Cuando la compilación esté lista, copie el javascript en un módulo de código. Asegúrese de utilizar etiquetas <script> de apertura y cierre.

Conclusión

Three.js es un recurso poderoso para agregar elementos 3D a un sitio web. En esta publicación, analizamos los conceptos básicos de cómo funciona Three.js. Hay tanto en la API que realmente tienes que profundizar y experimentar. Las posibilidades son realmente infinitas. Desde un simple cubo giratorio hasta un complejo juego interactivo dentro de un rico mundo digital. ¿Qué creará con Three.js?

Imagen destacada a través de theromb / shutterstock.com