Cómo crear efecto de rotación 3D con jQuery

Empezamos año nuevo y con ello nuevos tutoriales haciendo uso de nuestras tres tecnologías preferidas, HTML, CSS y Javascript. Si se pasean un poco por la página de Xbox en la parte de Halo 4 vemos que los de Microsoft hicieron una bonita interfaz, resaltando el hecho de que podemos ver personajes, armas y enemigos de forma 3D pudiéndolos rotar con el mouse.

En este tutorial vamos a ver cómo simular y manipular la rotación de elementos 3D con jQuery, un método que en teoría es muy fácil de implementar en código pero el problema como veremos es en realidad la simulación del objeto en 3D debido a que como estamos tratando como imágenes necesitamos una imagen de cada ángulo de nuestro objeto, haciendo eso un trabajo tardado.

Ver Demo del tutorial | Ver carpeta de imágenes

HTML

Como vemos el HTML es muy sencillo, usamos la imagen para cargar todas a medida de que nos movemos. Cargamos solamente la primera imagen.

IMÁGENES

El problema principal y la dificultad del tutorial son las imágenes. En este tutorial uso las mismas que usa Microsoft para el sitio de Halo 4, 127 en total, en donde cada una se muestra el mismo objeto pero rotado, de tal forma que al final si pudiéramos animarlo a una velocidad rápida se vería la rotación continua.

jQuery

La forma de programar es la siguiente. Cuando el mouse o cursor esté a más de la mitad del ancho de la imagen se rotará hacía la derecha, que en nuestras imágenes es cargar la imagen anterior. Si el cursor está situado entre la posición menor a la de la mitad de la imagen rotará hacía la izquierda y la carga de imágenes será de forma ascendente. Si por en cambio el cursor queda en el centro o a 50px de distancia, ya sea a la derecha o izquierda nuestro Master Chief no se moverá. Entonces, ahora veamos el código.

Empezamos definiendo nuestros valores, guardando todo en variables para tener un mejor control de las operaciones que vamos a hacer. El truco funciona por la función setInterva() y ella es la que va a reproducir la función que le demos 24 veces cada segundo; recordemos que se mide el tiempo en milisegundos, por lo que 1s = 1000 ms.

Nuestra función que se activa cuando se mueve el mouse sólo indica la dirección a la que debe girar el objeto, que en nuestro tutorial es saber si debemos cargar la imagen siguiente, la anterior o no cargar nada.

Por último, de acuerdo al valor de la dirección lo que hacemos es incrementar nuestra variable para que se cargue la imagen con el número siguiente o anterior.Debido a que es un objeto que simulamos rota los 360 grados una vez que por ejemplo se llegue a la imagen 127 hacemos que se reinicie nuestro contador, y si la imagen viene de reversa hacemos que de 0 siga a 127.

Conclusiones

Anteriormente esto se hacía usando plugins como Qucktime (Apple usó mucho esta técnica de rotar para sus productos) pero como estamos usando tecnologías libres de plugins y flash no existe otra forma más fácil de generar un objeto 3D y animarlo, a menos que se use canvas, pero el proceso es más difícil.

Lo que les aconsejo es que si ya tienen el objeto 3D y pueden manipularlo le saquen capturas cada determinados ángulos, cada 2, 5, o 10 para que no tengan que cargar tantas imágenes sus usuarios, y ustedes no tengan tantas imágenes para que el efecto se vea fluido a simple vista.

Las imágenes son propiedad de Microsoft

Actualización: tal parece que no me percate del hecho de que se hace una petición a las imágenes cada vez que se inicia la función, lo que es una petición excesiva de datos. Sería mejor si tuviéramos que cargar una vez todas las imágenes y ocultar las que no necesitemos, teniendo el mismo efecto. Entonces, lo que modificamos es lo siguiente: