Creating A 3D Rotatable Object Using Images and jQuery Interactive 3D Plugin

Interactive 3D is a tiny and touch-enabled jQuery plugin which allows you to create a 3D interactive & rotatable object using image frames of different angles.

Basic Usage

1. Include the javascript library and jQuery Interactive 3D plugin on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.interactive_3d.js"></script>

2. Create a container and insert the first frame of your images into it.

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

3. Simply call the plugin and you're done.

<script>
$(document).ready( function() {
$("#demo").interactive_3d({
frames: 38
});
});
</script>

4. Available options.

<script>
$(document).ready( function() {
$("#demo").interactive_3d({
frames: 10, // The total number of images to be used as frames. The higher, the smoother your interaction will be. The default value is 10 frames.
cursor: "move", // The CSS style to indicate what cursor will show when the user hover the object. The default value is "move"
speed: 0, // The speed of the rotation in milliseconds delay. If you have small number of frames and the rotation seems too fast and not smooth, increase this value to 50 - 100 milliseconds delay. The default value is 0.
entrance: true, // Entrance Animation. Toggle this to false to turn it off. The default value is true.
preloadImages: true, // Let the script preload all the frames on initial load. Toggle this to false to turn it off. The default value is true.
touchSupport: true, // The script support touch events for mobile phones. If this interferes with your website behaviour, you can toggle this to false. The default value is true.
loading: "Loading..", // This only applies if preloadImages is true. This option let 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: false // This option will superseded 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.
});
});
</script>

---

This awesome jQuery plugin is developed by peachananr. For more Advanced Usages, please check the demo page or visit the official website.