En algún punto todos hemos querido crear modelos en 3D, y aunque suene complicado; ¡no lo es! En este taller, usaremos una simple librería de JavaScript llamada ZDog que nos dejará crear lo que queramos en cuestión de minutos. Al final de este taller, tendrás la capacidad de crear modelos 3D como este:
Aquí hay un demo en vivo de lo que vamos a hacer, también puedes encontrar el código final ahí. de lo que vamos a hacer, tambien puedes encontrar el codigo final ahi.
Configuración
Este taller requiere de unos conocimientos básicos en los siguientes lenguajes de programación: HTML y JavaScript. ¡No te preocupes si te quedas atascado en algún punto del taller, todo está explicado de la mejor manera posible!
Para este taller utilizaremos Repl.it, clic aquí para crear un entorno de programación para este taller.
Sección HTML
Está bien, ¡comencemos! Primero, vamos a crear dentro del <body> tag un elemento <canvas> en donde, los modelos 3D que vamos a crear se van a renderizar. Luego, le damos una class (clase); siéntete libre de darle la clase que quieras… Yo le daré la clase model.
<canvas class="model"></canvas>
Ahora tenemos que poner el siguiente código dentro del <body> tag, este codigo nos permite usar la librería ZDog sin tener que descargarla localmente. Aprende más a cerca de CDN aquí.
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
Al final, tu código debería verse así:
<body>
<canvas class="model"></canvas>
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script src="script.js"></script>
</body>
Nota: Es muy importante mantener este orden para asegurarnos que todo funcione correctamente
Sección JavaScript
Ahora que tenemos nuestro documento HTML listo, tenemos que trabajar con nuestro código JavaScript.
Configurando el Canvas
Empezaremos con la parte divertida. Primero, vamos a crear una variable principal y le vamos a dar un nombre, yo la nombraré como “ws”
const ws = new Zdog.Illustration({
element: '.model',
resize: 'fullscreen',
})
Desglosando este código:
- Illustration es la clase de nivel superior que se encarga de tratar el elemento
<canvas>. Sostiene todas las formas de la escena, y renderiza esas formas en el elementocanvas. - La propiedad element es utilizada para hacer coincidir el render con el tag canvas de clase "model" que se encuentra en el documento HTML. En otras palabras, conecta la libreria ZDog, con el elemento
<canvas>que creamos en el documento HTML. - La propiedad resize es usada para modificar el tamaño en el que se renderizara el modelo 3D, en este caso, el modelo 3D se renderizará en pantalla completa. Si quieres, puedes borrar esta propiedad.
En este momento no se muestra nada en nuestro <canvas>, así que creemos nuestro primer modelo 3D.
Creando nuestro modelo 3D
Ahora, vamos a crear una figura, para este taller elegiré un simple cubo, pero tú puedes elegir lo que quieras. Aquí hay una lista de figuras que puedes crear con ZDog.
Nota: Cada figura tiene sus propios elementos y propiedades, puedes mirar la lista completa aquí.
Agreguemos el siguiente bloque de código a nuestro JavaScript:
new Zdog.Box({
addTo: ws,
width: 100,
height: 100,
depth: 100,
stroke: false,
leftFace: '#da0',
rightFace: '#e62',
topFace: '#ed0',
bottomFace: '#636',
})
Explicación:
- Box es una clase de figura, puedes reemplazarla por la que quieras…
- Usando la propiedad AddTo, agregamos la figura Box (cubo) a la clase de nivel superior Zdog.Illustration, la misma que utilizamos para renderizar las figuras. Esta propiedad debe estar aquí, de lo contrario, la figura no será renderizada.
- Las propiedades width, height and depth pueden estirar o encoger tu figura.
- Width: Configura el ancho del cubo
- Height: Configura la altura del cubo
- Depth: Configura la profundidad del cubo. Si el valor de esta es 0, el cubo se renderizará como una figura 2D; así que asegúrate de darle un valor.
- La propiedad stroke le da a nuestra figura un borde o trazo, trabaja como una capa externa que puedes utilizar para darle un efecto redondo a tu modelo 3D. Siéntete libre de jugar con esta propiedad cambiando su valor.
- Las propiedades leftFace, rightFace, topFace & bottomFace le dan color a cada cara de tu figura. Intenta utilizando diferentes colores para cada cara, para que puedas apreciar mejor el efecto 3D de la figura cuando la animemos.
Renderizando nuestro modelo 3D
Ahora que hemos creado nuestra figura, vamos a renderizarla. Usa la siguiente línea de código para renderizar la figura que acabamos de crear.
ws.updateRenderGraph()
Este código actualiza y renderiza la clase de nivel superior Zdog.illustration que declaramos en la primera variable, así que asegúrate de colocar el nombre correcto de la variable para que funcione.
Ahora, dale clic al botón Run para ver que pasa…
Felicidades, acabaste de crear tu primer modelo 3D… Si, quizás no era lo que estabas esperando. Arreglemos esto animando nuestra figura.
Animando nuestro modelo 3D
Agrega el siguiente bloque de código dentro de nuestro JavaScript.
function animateModel() {
ws.rotate.y += 0.01
ws.rotate.x += 0.01
ws.updateRenderGraph()
requestAnimationFrame(animateModel)
}
animateModel()
Explicación:
- Acabamos de crear una función que hará que el modelo 3D rote, puedes nombrar a esta función como quieras.
rotate.xyrotate.yestablecen la velocidad a la que rota nuestra figura dentro de las coordenadas (x, y) respectivamente, así:- El cubo se moverá hacia arriba o abajo dependiendo del valor que tenga (- o +, respectivamente)
- El cubo de moverá hacia la derecha o izquierda dependiendo el valor que tenga (- o +, respectivamente)
ws.updateRenderGraph()actualiza y renderiza la clase de nivel superior Zdog.illustration que declaramos en la primera variable, así que asegúrate de colocar el nombre correcto de la variable para que funcione.requestAnimationFrame(animatemodel)esto es como un bucle, básicamente hace que la figura rote todo el tiempo creando fotogramas.animateModel()llama la función que acabamos de crear.
Ahora, dale clic al botón Run de nuevo
Increíble, ¿cierto?
Múltiples figuras
Si quieres intentar crear modelos 3D complejos, necesitaras utilizar muchas figuras y ponerlas juntas, aquí hay algunos ejemplos de lo que puedes hacer:
Crear múltiples figuras es muy fácil, es tan simple como crear varias figuras y juntarlas hasta obtener lo que quieras. Sin embargo, la parte difícil es colocar las figuras en el lugar correcto para que nuestra figura se vea bien. Podemos hacer esto utilizando la propiedad "translate". ¡Miremos como funciona!
Para este ejemplo, crearé el logo de Hack Club, ¡pero tú puedes crear lo que quieras! Clic aquí para ver el código final.
Primero, vamos a cambiar la clase (class) del elemento <canvas> que creamos en nuestro documento HTML. La reemplazaremos por hackclub, esa será su nueva clase. Así debería verse ahora:
...
<canvas class="hackclub"></canvas>
...
Y agrega un color de fondo a nuestro documento HTML utilizando el siguiente bloque de código, este lo colocaremos en el archivo style.css. Este archivo se encuentra en el panel a la izquierda.
.hackclub {
background: #FDB;
}
Luego de eso, vamos de vuelta a nuestro JavaScript (script.js). Ahora haremos algunos cambios a la clase de nivel superior Zdog.Illustration, empezaremos por modificar el valor de la propiedad element de .model a .hackclub y finalmente agregaremos la propiedad dragRotate con un valor establecido true, la cual sirve para permitirle al usuario rotar nuestro modelo 3D utilizando el ratón.
const ws = new Zdog.Illustration({
element: '.hackclub',
resize: 'fullscreen',
dragRotate: true
})
Luego, vamos a cambiar las propiedades de nuestro cubo para que parezca un cuadrado rojo:
new Zdog.Box({
addTo: ws,
width: 100,
height: 100,
color: '#ec3750',
stroke: 20,
translate: { z: -18 },
})
- Como hemos visto antes, la propiedad
addToagrega nuestra figura a la clase de nivel superior Zdog.Illustration. - Usamos las propiedades width and height para hacer un cuadrado perfecto, y no le dimos una profundidad a nuestra figura porque no es necesario.
- Toda la figura completa tendrá el mismo color (rojo), así que utilizaremos la propiedad
colorpara darle el mismo color a toda la figura y sus caras. - Como mencioné previamente, la propiedad
strokenos permite darle a la figura un efecto redondeado. - La propiedad
translatemueve la figura -18 dentro de la coordenada z. La coordenada z es la coordenada para la tercera dimensión; puedes interpretar esto como si estuviéramos moviendo la figura hacia atrás dentro de un espacio virtual.
Cuando damos clic al botón Run, obtendremos esto:
¡Esto se ve muy bien! Ahora crearemos la letra "h", para esto necesitaremos otras 3 figuras:
new Zdog.Box({
addTo: ws,
depth: 20,
width: 20,
height: 80,
color: '#fff',
translate: { z: 18, x: -20 },
})
- Esta vez, la figura es movida 18 dentro de la coordenada z (se mueve la figura hacia adelante)... Esto crea un espacio entre el cuadro rojo (el que hicimos previamente) y la nueva figura.
- La figura es movida -20 dentro de la coordenada x (se mueve la figura hacia la izquierda).
- Cambiamos el color de la figura utilizando el código HEX
#fff, equivalente al color blanco. - Adicionalmente, cambiamos el tamaño de la figura utilizando las propiedades
widthyheightpara crear un rectángulo y le dimos una profundidad de 20 a nuestra figura.
new Zdog.Box({
addTo: ws,
depth: 20,
width: 20,
height: 40,
color: '#fff',
translate: { z: 18, y: 20, x: 20 },
})
- Esta vez creamos una figura mucho más pequeña usando las propiedades
widthyheight - Movimos la figura 18 entro de la coordenada z (hacia adelante), hacia la derecha dentro de la coordenada x y hacia abajo dentro de la coordenada y
new Zdog.Box({
addTo: ws,
depth: 20,
width: 40,
height: 20,
color: '#fff',
translate: { z: 18, x: 10 },
})
En esta última, todo lo que tuvimos que hacer fue duplicar la figura anterior y moverla hacia la derecha dentro de la coordenada x para que se mezcle con la figura de la derecha.
Ahora vamos a actualizar la función de animación, agregándole unas propiedades simples:
function animateModel() {
ws.rotate.y += 0.01
ws.updateRenderGraph()
requestAnimationFrame(animateModel)
}
animateModel()
Aquí está el resultado final:
Hackealo
¡Felicitaciones! Acabaste de aprender lo básico de ZDog, siéntete libre de revisar los siguientes recursos para incrementar tu conocimiento...
Crea tu propio modelo 3D y compártelo en el Slack de Hack Club, me encantaría ver que puedes crear utilizando lo que acabaste de aprender en este taller.
Otros ejemplos
Revisa estos increíbles modelos 3D creados por otras personas: