Touch-enabled 360 Image Preview In JavaScript – Threesixty

Threesixty is a JavaScript library that generates a draggable, touch-enabled 360 product viewer from a sequence of images defined in a sprite image (or an image array).

Your users can rotate the product images with mouse drag, arrow keys, touch-swipe event, etc.

How to use it:

To get started, you first need to insert your product images at different angles into a sprite image or an image array.

myImg = [
  '1.jpg',
  '2.jpg',
  '3.jpg',
  ...
],

Then download and insert the Threesixty.js script into the document.

<script src="/path/to/threesixty.js"></script>

Create a container to place the product image.

<div id="threesixty"></div>

Initialize the Threesixty with the following options.

• image: the path to the sprite image
• width/height: image size
• count: the total number of images
• perRow: how many images per row
• speed: rotate speed

var threesixty = new ThreeSixty(document.getElementById('threesixty'), {
    image: 'sprite.jpg',
    width: 320,
    height: 320,
    count: 31,
    perRow: 4,
    speed: 100
});

You can also create navigation buttons to rotate the product images with click/tap events.

<button class="button" id="prev">Prev</button>
<button class="button" id="next">Next</button>

var threesixty = new ThreeSixty(document.getElementById('threesixty'), {
    prev: document.getElementById('prev'),
    next: document.getElementById('next')
});

Activate the 360 product viewer.

threesixty.play();

All default options.

var threesixty = new ThreeSixty(document.getElementById('threesixty'), { 
    width: 300,
    height: 300,
    count: 0,
    perRow: 0,
    speed: 100,
    dragTolerance: 10,
    swipeTolerance: 10,
    draggable: true,
    swipeable: true,
    keys: true,
    inverted: false
});

More API methods.

// start 
threesixty.play();
// stat in oposite direction
threesixty.play(true);
// stop
threesixty.stop();
// toggle
threesixty.toggle();
// go to next
threesixty.next(); 
// back to previous
threesixty.prev(); 
// go to a frame
threesixty.goto(index);
// destroy
threesixty.destroy();

Changelog:

v1.3.0 (04/22/2024)

• Update

v1.2.4 (11/23/2022)

• Update

v1.2.3 (04/24/2022)

• Use window instead of global

09/28/2019

• Fix resizing height detection