Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Crea objetos en 3d con jQuery

Crea objetos en 3d con jQuery 27.NOV.13

Gianfranco Lemmo
Fundador WebBizarro

Con jQuery Interactive 3D puedes crear objetos interactivos en 3D utilizando una secuencia de imágenes frame a frame, permitiendo que el usuarios pueda usar drag de las imágenes y manipular las misma.

En el ejemplo de la página pueden observar como se puede rotar el iPhone y ver dicho dispositivos desde cualquier perspectiva gracias a este plugin.

En tu sitio web debes agregar la última versión de jQuery junto con jquery.interactive_3d.js y deben estar dentro de la etiqueta <head>

Luego para crear la colección de imágenes dentro del body debemos colocar algo así.

<body>
  ...
  <div id="interactive_3d">
    <img src="images/frame_1.png">
  </div>
  ...
</body>

 

Nota: Las imágenes que se vayan a colocar deben estar pendiente que terminen con una secuencia numérica ordenada por ejemplo: frame_1, frame_2, frame_3, etc.

Luego en el document ready para configurar el plugin deben colocar lo siguiente:

$("#interactive_3d").interactive_3d({
    frames: 10,
    cursor: "move",
    speed: 0,
    entrance: true,
    preloadImages: true,
    touchSupport: true,
    loading: "Loading..",
    autoPlay: false
  });

 

Si quieren conocer en detalle cual es la función de cada uno de los parámetros pueden revisarlo en el repositorio del plugin en Github.

Espero que sea de su utilidad este plugin que está super bueno.