Crear diseños 3d con JavaScript y Zdog

En este artículo veremos que crear alucinantes diseños 3d con JavaScript es posible gracias a la librería Zdog. Aprovecha las características de HTML5, creando gráficos en SVG y canvas.

https://zzz.dog/ “Round, flat, designer-friendly pseudo-3D engine for canvas & SVG”

Éste artículo contiene una parte teórica y otra práctica, en la segunda te enseño a implementar la librería. Haz click en la siguiente imagen para ver el resultado final en una ventana nueva:

Ejercicio con ZDog
Haz click sobre la imagen para abrir el ejercicio en una ventana nueva. Ejercicio con ZDog

¿Quieres aprender a hacer este ejercicio? Saltar directamente al tutorial

Crea diseños 3d espectaculares con JavaScript y Zdog

ZDog está orientada a crear gráficos 3D mediante la superposición de formas geométricas sencillas. Da como resultado un look “flat”, ideal para modelar iconos o logotipos y dotarlos de volumen y animaciones sencillas.

Esta librería fué creada por David DeSandro, desarrollador del popular generador de layouts en cascada llamado Masonry.

Actualmente esta librería ocupa 24KB minificada. Y tiene más de 8800 estrellas en GitHub. Puede ser instalada en nuestro proyecto rápidamente, mediante el comando “npm install zdog –save”.

Su sitio web atrapa des del primer segundo. Especialmente tras descubrir que el propio logotipo de la librería no es una simple ilustración. Sino que se trata de un elemento interactivo 3D que gira en los tres ejes al ser arrastrado con el cursor.

Tampoco dejan indiferente los ejemplos que ilustran el potencial de ZDog en la página web, todos muy coloridos y con un tratamiento iconográfico “flat”.

Sin embargo, es el contraste generado por la combinación de volúmenes 3D con colores planos, lo que provoca el efecto sorpresa. Eso, por supuesto, llama poderosamente la atención al usuario.

¿Como empezar a utilizar ZDog?

Un vistazo al apartado API del sitio web, nos permite entender rápidamente cómo implementar la librería. Los principales conceptos que hay que entender son los siguientes. Los modelos basados en formas simples, el instanciado de las clases principales y el conjunto de formas que vienen pre-cargadas en la librería.

A partir de ahí, vemos que para iniciar ZDog, tenemos que instanciar la clase Illustration. Pasándo como argumento, un objeto JSON con la propiedad “element”. Y Un selector de CSS que apunta a un elemento del DOM de tipo canvas o svg. Esta instancia actuará como nivel superior de la escena.

A continuación, se pueden instanciar objetos de las clases Shape o Anchor. Y lo agregamos a nuestro objeto illustration. Esto nos va a permitir ir modelando progresivamente nuestra ilustración.

Finalmente, hay que tener en cuenta que la escena solo se renderiza tras llamar al método updateRenderGraph. Si se quiere que la animación resultante sea fluída, habrá que integrar esa llamada dentro de un loop. Por ejemplo, generado por la API del navegador requestAnimationFrame.

Vamos a crear nuestro icono pseudo-3d

Para ilustrar un poco las funcionalidades básicas de ZDog, vamos a crear un icono 3D. Y lo vamos a dota de una pequeña interacción.

Por lo general, necesitaremos preparar un proyecto con una parte de HTML, otra de CSS y otra de JavaScript.

Sin embargo, para este ejercicio en concreto, dejaremos “body” vacío.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Librerias js - ZDog</title>
</head>
  <body>
    
  </body>
</html>

Los estilos CSS solo se encargarán de centrar el contenido en vertical y horizontal. Y definir un estado de “grab” o “grabbing” del cursor.

html,
body {
  height: 100vh;
}
body {
  margin: 0;
  padding: 0;
  background-color: rgb(236, 236, 236);
  display: flex;
  justify-content: center;
  align-items: center;
}
.zdog-container {
  cursor: grab;
  &:active {
    cursor: grabbing;
  }
}

El código JavaScript no es especialmente complejo de entender, pero vamos a ir por partes igualmente.

Después de importar la librería, empezamos por generar un elemento de tipo “canvas”. Le asignamos las propiedades de altura y ancho. Y tras añadir una clase CSS, lo integramos en el DOM.

A partir de aquí empezamos a crear los diseños 3d con JavaScript y Zdog

import Zdog from "zdog";
const container = document.createElement("canvas");
container.width = 500;
container.height = 500;
container.classList.add("zdog-container");
document.body.appendChild(container);

Seguidamente, declaramos algunas variables de control. Éstas guardarán colores, valores de diseño del icono, y parámetros relativos a la animación.

const colors = {
  blue: "#00dbff",
  black: "#000",
};
const distanceFromCenter = 45;
const wStroke = 8;
const cycleCount = 1000;
let ticker = 0;
let rafId = undefined;

Para crear el cubo con ZDog, empezamos instanciando la subclase “Illustration” guardándola con el nombre “zDogIcon”. En el momento de generla, pasamos el siguiente conjunto de propiedades.

const zDogIcon = new Zdog.Illustration({
  element: container,
  zoom: 1,
  dragRotate: true,
  scale: true,
  rotate: {
    x: 1,
    z: Zdog.TAU / 8,
  },
});

El punto azul central, es muy sencillo de crear. Instanciamos la subclase Shape, y en el objeto de parámetros pasamos “zDogIcon” en la propiedad “addTo”. Por supuesto, añadimos otros valores de configuración, por ejemplo, el color.

new Zdog.Shape({
  addTo: zDogIcon,
  stroke: 40,
  color: colors.blue,
});

En el siguiente bloque de código, creamos un ancla, para cada una de las seis caras del cubo. Seguidamente, definimos las características comunes de todas las caras, y generamos rectángulos asociados a cada ancla.

const anchorFaceFront = new Zdog.Anchor({
  addTo: zDogIcon,
  translate: { z: distanceFromCenter },
});
const anchorFaceBack = new Zdog.Anchor({
  addTo: zDogIcon,
  translate: { z: -distanceFromCenter },
});
const anchorFaceTop = new Zdog.Anchor({
  addTo: zDogIcon,
  translate: { y: distanceFromCenter },
});
const anchorFaceLeft = new Zdog.Anchor({
  addTo: zDogIcon,
  translate: { x: distanceFromCenter },
});
const anchorFaceRight = new Zdog.Anchor({
  addTo: zDogIcon,
  translate: { x: -distanceFromCenter },
});
const face = {
  addTo: anchorFaceFront,
  width: 90,
  height: 90,
  stroke: wStroke,
  color: colors.black,
};
new Zdog.Rect({ ...face, addTo: anchorFaceFront });
new Zdog.Rect({ ...face, addTo: anchorFaceBack });
new Zdog.Rect({ ...face, addTo: anchorFaceTop, rotate: { x: Zdog.TAU / 4 } });
new Zdog.Rect({ ...face, addTo: anchorFaceLeft, rotate: { y: Zdog.TAU / 4 } });
new Zdog.Rect({ ...face, addTo: anchorFaceRight, rotate: { y: Zdog.TAU / 4 } });

Por último, programamos la animación de rotación, asegurándonos que en cada iteración, se llama al método “updateRenderGraph()”.

zDogIcon.updateRenderGraph();
const play = () => {
  const progress = ticker / cycleCount;
  const tween = Zdog.easeInOut(progress % 1, 3);
  zDogIcon.rotate.y = tween * Zdog.TAU;
  zDogIcon.updateRenderGraph();
  ticker++;
  rafId = requestAnimationFrame(play);
};
play();

ZDog me parece un ejemplo de microlibrería fantástico. Aporta un elemento de “engagement” al sitio web que integra esta funcionalidad, y lo hace de una forma sencilla y aislada.

Una buena documentación y unos ejemplos alucinantes

La documentación es clara y concisa, sin salir del sitio web, se puede reproducir sin muchos problemas los ejemplos que se muestran en este. Y dicho sea de paso, unos ejemplos que brillan por su bonito diseño.

Es evidente que ZDog contribuye a crear sitios web más dinámicos, aportando elementos con un factor sorpresa. En esa misma línea, ya vimos otras librerías, una para disparar confeti. Y otra para agregar un efecto parallax espectacular.

Este ha sido un pequeño vistazo a la librería ZDog. A continuación os dejo enlaces a más recursos, así como el ejercicio subido al repositorio de Github de “Librerías Js”:

Nos vemos pronto, un abrazo desarrolladores!

Deja un comentario