How to create a 3D spin
3D spins can be created either by photographing a product on a turntable or by rendering JPEG/PNG images of a 3D computer designed model.
Any number of rows and columns can be used. The more images, the smoother the rotation.
Those examples were photographed on a turntable. The camera was placed on a tripod for the first row, then the photographs were captured every 30 or 36 degrees as the turntable rotated. Then the camera was moved upwards (in an arc) to a new position, for another set of photos. This process was repeated until all rows had been captured.
Follow this guide to embed a 3D spin into the HTML of your website.
Sirv will create your 3D spin by detecting a sequence in your image file names e.g.
Below it the file name of the 1st image in the 2nd row of the spinning bag above:
The screenshot below shows how the 50 images of the bag could be named:
Always put your row digits before your column digits to ensure Sirv generates your spin correctly.
Your images will show in your Sirv account, along with a .spin file automatically generated by Sirv. The file references all the images in your animated 3D spin, plus any custom settings you choose:
Either embed your spin just how it is, or edit the settings such as speed, text overlays or loading text.
Click "Edit" to change the settings:
The edit window looks like this:
If you'd like to change the first image of your spin, change the values for "Start Column" and "Start Row":
Click "Save" at the bottom:
Click the spin and under the preview you'll see the two lines of code to copy and paste into your web page. One line is a div and the other a script.
Sirv automatically generates images to fit perfectly inside the content area where you've pasted the spin. Images are responsive, so all your visitors will receive scaled images suited to their screen and browser.
To change the size of a spin, change the size of its container (usually inside a div). Alternatively, add a style attribute to the Sirv div and specify the width or height the you would like. The example below will create a spin of 500px max-width:
<div class="Sirv" data-src="https://sirv.sirv.com/website/demos/Bobble Bag/bag.spin" style="max-width:500px"></div>
If your CMS or website control panel restricts how you can embed spins, consider using an iframe. The iframe code is shown on the spins page, underneath the normal embed code.
Iframes should only be used as a last resort. They don't support fullscreen and the spin is released while dragging if dragged beyond the edge of the spin (making it less controllable).