Create an Awesome 3D Interactive Object using only Images and jQuery

by in Tutorials on 26th Nov 2013 · 0 Comment

As flash falls to its own death, the website design paradigm has become more flat and static. Interaction has become stale as we wait for the day HTML5 and canvas support widen.

Today I have created an easy-to-use plugin that lets you create a 3D interactive object using multiple images as frames allowing your users to manipulate the object as they like. This plugin is perfect for showcasing your product to the world.

Note: This plugin has been tested on Chrome, Firefox, Safari, both on desktop and mobile. This has not been tested on IE.

Create an Awesome 3D interactive object using only images and jQuery


Create a 3D Interactive Object Using Interactive_3D.js

The concept is simple, the plugin detects the direction of your mouse when dragging, and the plugin will switch the images depending on that direction. For example, the plugin will increase the frame as the user drags left and vice versa.

One of the problems I encountered early on was the ability to drag and drop without relying on the clunky jQuery UI plugin. Fortunately, Chris Coyier from CSS-Tricks came to the rescue with his awesome slim drag and drop script.

With a few modifications, I was able to convert the script to increase frames instead of moving the position of the image. While this would have been enough, I decided to go a little further and add a touch support with the script found here which converts mouse events into touch events for mobile devices.

Another problem I encountered was pre-loading and caching the images to make the object rotate smoothly. I had to add all the images into a hidden div container and let the browser load the images before letting the users interact. Even with that workaround, Chrome seemed to be reloading the images no matter what I did. I later found out that the images were only cached for a few minutes, so I had to add a cache control header and increase the image cache expiration date to 3 days.

And that’s all the concept behind this plugin. Now, let’s dive into the features of Interactive_3D.js.

How-Tos

To start off, include the latest jQuery plugin available here, and the jQuery.interactive_3d.js which can be found here, into your document’s .

Now, prepare the images to be used as frames. I found that having at least 30 images for frames makes the animation smoother than having 10. Note that each image must have a filename that ends with _frame-number. For example, your first frame should be named: anything_1.jpg and your second should be anything_2.jpg etc. Once that is prepared, create a markup and call the function as follows:

HTML:

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

Only the first frame should be added in the container and the plugin will do the rest for you.

JS:

$("#interactive_3d").interactive_3d({
    frames: 30
  });

And that is it for the default setup of Interactive 3D plugin. Now, let’s dive into a few customization options I put in place for you to play with.

Customization

JS:

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

Here are all the options you can customize:

  • frames: This option is essential for the plugin to function correctly. The option accepts the total number of images to be used as frames. The higher the number, the smoother your interaction will be. For example, If you have prepared 100 images, simply set this to 100. The default value is 10 frames.
  • cursor: This option will let you define the cursor that will be shown when the user hovers over the interactive area. The option accepts the usual CSS cursor style. The default value is "move". For more info, see available options here.
  • speed: This option lets you define the speed of the rotation in milliseconds delay. If you have a small number of frames and the rotation seems too fast and not smooth, increase this value to 10 - 50 milliseconds delay. The default value is 0.
  • entrance: Toggle this to true if you want to have a spin entrance animation to let the user know that this area is interactive. Set to false to turn this off. The default value is true.
  • preloadImages: As mentioned previously, this plugin lets you preload the images and cache it before letting the users interact. Set this to true and the script will preload all the frames on initial load. Toggle this to false to turn it off. The default value is true.
  • touchSupport: This plugin also supports touch events like swiping but this may sometimes interfere with your website default interaction. If that’s the case, toggle this option to false to turn it off. The default value is true.
  • loading: This option only applies if preloadImages is set to true. The loading option lets you show a loading indicator while the script is preloading the images. The option accepts HTML. Toggle this to false to turn this off. The default value is "Loading..".
  • autoPlay: This option will supersede the entrance option. The 3D object will start rotating automatically if autoPlay is not false. This option accepts the speed of the rotation in milliseconds delay. The default value is false.

Conclusion

And now you should have a beautiful smooth 3D interactive image on your website. That was easy wasn’t it? I hope you enjoyed today’s tutorial. Stick around and stay tuned for more free plugins and tutorials. Again, if you have any questions or suggestions, please let us know in the comments below.

Pete is a Bangkok entrepreneur, a UI designer, and a Ruby on Rails developer. He is the founder of Bucketlistly.com and MyColorscreen.com. Other than his businesses, design and development, he also loves astronomy, indie music, and blogging.