En este post exploraremos unos experimentos con WebGL donde el espectador parece viajar a través de un túnel texturizado. Basado en Three.js y inspirado en el efecto visto en fornasetti.com, te mostraremos cómo crear una experiencia visual impresionante.
Demostración y Código
Desde nuestro patrocinador: Meco es un espacio libre de distracciones para leer y descubrir boletines informativos, separado de la bandeja de entrada. A medida que WebGL se vuelve cada vez más popular, empezamos a ver una gran cantidad de sitios web que lo utilizan para crear diseños creativos sorprendentes. La marca Fornasetti recientemente lanzó su sitio web utilizando el poder de WebGL para lograr un efecto visual único: una animación que nos da la sensación de viajar a través de un túnel con un patrón cambiante. Lo más interesante de esta experiencia es que el movimiento a través del túnel está controlado por el movimiento del ratón. Hoy compartiremos algunos experimentos similares con Three.js que también te permitirán viajar a través de un túnel. Atención: Necesitarás un navegador reciente que soporte WebGL (> IE10) para ver las demostraciones.Empezando
Para esta demostración utilizamos Three.js, una biblioteca útil para crear gráficos WebGL sin complicaciones. Antes de generar el tubo, necesitamos configurar una escena con un renderizador, una cámara y una escena vacía. Si no te sientes cómodo utilizando Three.js, te sugiero que primero leas un tutorial para comenzar con esta herramienta. Rachel Smith ha escrito una excelente guía en tres partes que puedes consultar aquí. Una vez que tengamos nuestra escena lista, procederemos con los siguientes pasos:- Crear una curva para determinar la forma del tubo.
- Generar el tubo basado en la curva.
- Mover todo hacia adelante.
- Añadir interacciones del usuario.
La Curva
Gracias a Three.js, contamos con una función útil que nos permite crear una curva basada en un conjunto de puntos. Primero necesitamos calcular las posiciones de esos puntos. Una vez hecho esto, podemos crear nuestra curva de la siguiente manera:javascript
// Crear un array vacío para almacenar los puntos
var points = [];
// Definir puntos a lo largo del eje Z
for (var i = 0; i < 5; i += 1) {
points.push(new THREE.Vector3(0, 0, 2.5 * (i / 4)));
}
// Crear una curva basada en los puntos
var curve = new THREE.CatmullRomCurve3(points);
El Tubo
Ahora que tenemos una curva (que en realidad no está curvada), podemos crear un tubo usando Three.js. Para hacerlo necesitamos tres partes: una geometría (la forma del tubo), un material (cómo se ve) y finalmente una malla (la combinación de la geometría y el material):
// Crear la geometría del tubo basada en la curva
// Los otros valores son respectivamente:
// 70 : el número de segmentos a lo largo del tubo
// 0.02 : su radio (es un tubo pequeño)
// 50 : el número de segmentos que componen la sección transversal
// false : un valor para establecer si el tubo está cerrado o no
var tubeGeometry = new THREE.TubeGeometry(curve, 70, 0.02, 50, false);Mover el Tubo Hacia Adelante
Esta parte es mi favorita porque, para mi sorpresa, la animación no funcionó como inicialmente creí. Primero pensé que el tubo se movía en la dirección de la cámara. Luego, supuse que la cámara se movía dentro del tubo. ¡Pero ambas ideas estaban equivocadas! La solución real es realmente ingeniosa: nada se mueve «físicamente» hacia adelante en la escena, excepto la textura que se traslada a lo largo del tubo. Para lograr esto, necesitamos definir un desplazamiento para la textura en cada cuadro para crear la ilusión de movimiento.
function updateMaterialOffset() {
// Actualizar el desplazamiento del material con la velocidad definida
tubeMaterial.map.offset.x += speed;
}Interacciones del Usuario
La demostración no sería tan buena si no implementáramos algunas interacciones del usuario. Cuando mueves el ratón en el navegador, puedes controlar la forma del tubo. El truco aquí es actualizar los puntos de la curva que creamos en el primer paso. Una vez que la curva ha sido modificada, podemos actualizar el tubo en consecuencia con una transición.
// Actualizar el tercer punto de la curva en los ejes X y Y
curve.points[2].x = -mouse.position.x * 0.1;
curve.points[2].y = mouse.position.y * 0.1;¿Eso es Todo?
Bueno, lamentablemente no, el código es un poco más complejo de lo que he explicado en este artículo. Pero si entendiste los pasos anteriores, deberías tener una idea general de cómo funciona la demostración.DEMOS EN TYMPANUS
