HTML5: Threesixty.js Generates 360 Views From Images

360 degree walk-arounds, just as you know them from the major automobile brands: that is what you can expect the fresh jQuery plugin Threesixty.js to deliver. It does this using HTML5 data attributes, thus showing a very simple approach that has you fiddling together a nice 360 in a matter of minutes.

Threesixty.js: Data Attributes and an Image Gallery

Threesixty.js doesn’t require much. jQuery and the path to a gallery of your images to be transformed into a 360. The following example aggregates 61 images to show a vexel gem in rotation. Images are named after the following convention: filenamenumber.ext, in our example gem0.jpg, gem1.jpg,…, gem61.jpg. The image with the zero in the filename defines the starting point.

The div element gets placed inside the HTML at the position you want the 3D object to be seen. Using HTML5 data attributes, in this case named data-path and data-count, important values for the intended presentation are handed over to the function from the HTML source code.

This JavaScript was used for the vexel gem:

$(document).ready(function(){
    $('.threesixty').threeSixty({
        dragDirection: 'horizontal'
    });
});

The function call can be extended using parameters. In the example only dragDirection got added. This parameter defines the axis on which the rotation shall occur. Per default rotation is started horizontally, vertical rotation is also possible. Simply change the value to vertical. It is not (yet) possible to rotate both axis at once.

Motion is controlled via links for previous and next frame like this

$('.threesixty').nextFrame();

and this

$('.threesixty').prevFrame();

Parameters draggable and useKeys add the possibility to drag the object holding the left mouse-button clicked and to use the arrows key for rotating to the left/right/up/down. Formerly intended support of the mouse wheel got canceled by the developer nick-jonas.

Threesixty.js is a young project, carrying the version-number 0.1.2. It can be downloaded from Github and used freely. Make sure that you implement some kind of preloading, as you can undoubtedly imagine how much time the loading of 61 images takes. Even the simple example of the vexel gem has you wait a while before rotation gets initiated.

Related Links

• Demosite | Threesixty.js
• Github Repository | Threesixty.js