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


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 animados en 3D y escenas interactivas en 3D se están volviendo más populares que nunca. Los clientes ahora quieren ese tipo de diseños en sus sitios web y se los pedirán. Aprender a incorporar el diseño 3D en sus proyectos de diseño web solo mejorará su trayectoria profesional y le dará más clientes. Afortunadamente, recursos como Three.js están fácilmente disponibles para los diseñadores y desarrolladores de Divi para agregar 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 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 vea algunos videos, tal vez tome un curso en Skillshare o Udemy para 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 , , CSS3D y renderizadores 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. Crear 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.

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 una configuración 3D son los siguientes:

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

los escena es donde configura todos los elementos 3D que mostrará Three.js. Visualmente se parece a un escenario de teatro o un televisor. el cámara es el punto de vista de la escena y cómo un humano técnicamente vería los elementos en la escena. los renderizador pone todo junto y dibuja la escena. Si domina la animación en 3D, seguramente lo reconocerá 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:

  1. La geometria
  2. El material
  3. La malla

los geometría de un objeto es el esqueleto o esquema básico de una forma. Para darle a la geometría un color o textura, el material Está aplicado. 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 utilizar códigos hexadecimales para los 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 desde bibliotecas en línea o las que cree en Blender.

Comenzando con 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 puedes verlo funcionando en CodePen o Codesandbox.io

Le sugiero que siga los pasos en el 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. Toda la biblioteca Three.js está disponible en Sitio web de Threejs.org para usar una vez que haya configurado su escena y haya comenzado a darse cuenta de 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 los cambios. Lo puedes encontrar 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 una excelente curso sobre Skillshare que lo lleva a través de todos los pasos en la documentación de Three.js.

Igualmente, 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.

(incrustar) https://www.youtube.com/watch?v=6oFvqLfRnsU (/ incrustar)

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ás buscando un tutorial básico, rápido y sucio? Esto paso a paso tutorial de código en CreativeBloq es justo lo que necesitas

Ejemplos de Three.js

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

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úrate de usar apertura y cierre

LATEST POSTS