El diseño plano es excelente, pero los elementos 3D llevan los diseños de diseño web a un nuevo nivel. Los sitios web con gráficos 3D animados y escenas 3D interactivas se están volviendo más populares 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 conseguirá más clientes. Afortunadamente, los 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 todavía está aprendiendo a codificar, siga el tutorial paso a paso en el sitio web de Three.js desde el principio. Si la terminología de 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 mire algunos videos, tal vez tome un curso en Skillshare o Udemy para tener una idea real de cómo incorporar la biblioteca Three.js en sus diseños.
Hagámoslo.
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 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 requiere muchas líneas de código y muchos conocimientos matemáticos. Three.js hace que sea mucho más fácil crear una escena y renderizarla con WebGL.
Comprender 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 escenario 3D son los siguientes:
- La escena
- La Cámara
- el renderizador
La escena es donde configura todos los elementos 3D que mostrará Three.js. Visualmente se asemeja 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 de la escena. El renderizador lo junta todo y dibuja la escena. Si tiene fluidez en la animación 3D, seguramente reconocerá esto como un estándar para configurar una escena.
Una vez que la escena está configurada, los objetos se colocan en ella. Los objetos se construyen en tres pasos:
- la geometría
- El material
- la malla
La geometría de un objeto es el esqueleto o contorno básico de una forma. Para dar color o textura a la geometría, 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 su uso. No hay necesidad de construirlos desde cero. Solo tiene que llamarlos desde la biblioteca a su código y luego personalizarlos. Además de usar códigos hexadecimales para colores como material, puede crear texturas con imágenes o encontrarlas en bibliotecas de texturas.
Después de configurar la escena y agregar 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 de bibliotecas en línea o que cree en Blender .
Primeros pasos con Three.js
Sentirse cómodo con Three.js no podría ser más fácil. 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 de 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 puedes verlo funcionando en CodePen o Codesandbox.io
Le sugiero que siga los pasos del sitio web de Three.js para comprender realmente cómo funciona todo. Ya sea con Codepen, su Terminal o el software de codificación preferido. La biblioteca completa de Three.js está disponible en el sitio web Threejs.org para usar una vez que haya configurado su escena y haya comenzado a notar lo que se puede hacer. A continuación puede ver la aplicación básica Three.js trabajando 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 detectar 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 activos de la biblioteca, aquí hay un excelente curso sobre Skillshare que lo lleva a través de todos los pasos en 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 que al final tendrá fluidez en la creación de contenido 3D.
¿Buscas 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
Nada mejor que un poco de inspiración para empezar a diseñar tus propios diseños 3D con Three.js. Para ver algunas creaciones bastante increíbles de Three.js, simplemente 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 sus archivos de 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 usar 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é vas a crear con Three.js?
Imagen destacada a través de theromb / shutterstock.com