3D Product Spin: a three.js product viewer you can drag

How to use it

1. Add the script

<script src="spin.js"></script>

2. Add a box for the product

Give the box a size. The product fills it.

<div data-product-spin
     data-shape="can"
     data-label="Your brand"
     data-color="#7c5cff"
     data-color2="#22d3ee"
     style="aspect-ratio: 1 / 1; max-width: 480px"></div>

3. Use your own label picture

Instead of colours and text, give it a picture. It is wrapped around the can or bottle, or placed on the front of the box.

<div data-product-spin data-shape="bottle" data-image="label.jpg" style="aspect-ratio: 1 / 1"></div>

All options

Make a good label picture

• Use a wide picture, twice as wide as high. For example 2048 by 1024 pixels. It goes all the way around a can or bottle.
• Put the logo in the middle. The middle of the picture faces the visitor at the start.
• Make the left and right edge match. They meet at the back of the product.
• Host the picture on your own site. A picture from another domain only works if that server allows it.

Change it from your own code

The viewer starts after three.js has loaded, so you get it through a Promise.

ProductSpin(document.querySelector('[data-product-spin]')).then(function (product) {
  product.set('shape', 'bottle');
  product.set('color', '#ff5c8a');
  product.set('label', 'Summer edition');
});

This is how a colour picker on a product page can repaint the product live, as the demo above does.

How visitors control it

• Mouse: drag left and right to turn it, up and down to tilt it. It keeps a little momentum when you let go.
• Touch: a sideways swipe turns the product. An up or down swipe still scrolls the page.
• Keyboard: the box can be focused, and the left and right arrow keys turn it.

Speed and loading

• three.js loads only when the page has a viewer. It comes from the jsDelivr CDN, about 170 KB compressed.
• It stops drawing off screen and in background tabs.
• Visitors with reduced motion get a still product that they can turn by hand.
• If 3D cannot start, the box gets the class pspin-failed. Put a normal product photo inside the box and show it with that class.

Common questions

Can I host three.js myself?

Yes. Download three.module.js, put it on your server and change the THREE_URL line at the top of spin.js.

Can it show my real product model?

This kit has three built-in shapes, which cover most packaged products. A viewer for your own 3D model file is custom work, and I can build that for you.

Can I have several products on one page?

Yes. Every box with data-product-spin gets its own viewer. Keep it to three or four, because each one uses the graphics card.

What is in the download

• spin.js the script, about 9 KB. It loads three.js from a CDN.
• index.html and demo.css the demo page you see above
• README.txt and LICENSE.txt the short guide and the MIT licence

Licence

MIT licence. Use it in personal and commercial projects, change it as you like. A link back is welcome and not required.