Fixed hotspots as selector for a multiple colors product

With 3DRT Setup Utility 1.4.8 (and above) and the player files 1.3.4 (and above) you can now create absolute positioned hotspots. The position of the hotspots does not change when the product rotates.

Just to remember, you can use:
– Image hotspot (shows an image)
– JavaScript hotspot (runs a javascript command)
– URL hotspot (opens a webpage)

This is how the result will look like:

Step by step guide:
In this example, I’ll show you how you can use the absolute hotspots for creating a color selector for a multiple colors product. First download the needed image files from here:

fixed-hotspots-colors-example-support-files.zip

1) Unzip the above file and import the images in product_images folder into the 3DRT Setup Utility. The best output size for these images is 500x360px
3drtsu-imported-images

2) Go to Settings > Player Tab > Rotation Tab and set check “Enabled” for Multi Level Rotation and set “3” for Vertical Steps. There are 3 colors, each with 72 pictures. Horizontal steps will update automatically to 72.

When you hit Reload Preview you will notice that the up/down arrows show. You can try to press the up arrow and see how the color changes. This is how a multiple level 3D rotation works, if you have a product shot from more than one vertical angle. In our case, we use the vertical “levels” for new colors. Since we will use Hotspots for selecting colors, we can disable the arrow buttons in the “UI” tab:
3drtsu-ui-settings

3) Go to Hotspots > Add, click on “Click to add Hotspot” and choose “JavaScript Hotspot”:
3drtsu-adding-hotspot

4) In the Hotspot Settings, set the hotspot name to “Green”. Important: set the hotspot position to Fixed (so not “Rotates with object”).
Enter yofla_setColor for Function to call
Enter 0 for Parameter (0 is the first “green” set of images)

Add hotspot Icon:
Click on “New Icon” and browser for the icon-hotspot-green.png file that is included in the support files archive.
3drtsu-browser-for-hotspot-icon

Click on Save to save hotspot.

5) Click on “Place”:
3drtsu-place-hotspot

6) Enter “5” for Top and “5” for “Left”. This will make the hotspot show 5px from top edge and 5px from left edge.
3drtsu-position-fixed-hotspot

7) Repeat “Click to add hotspot”, “Edit Hotspot”, “Place Hotspot” for White and Green hotspot. Enter these values:

Red Color hotspot JavaScript Values:
Function name: yofla_setColor
Paramerter: 1

Red Color hotspot Position:
Top: 80
Left: 5

White Color hotspot JavaScript Values:
Function name: yofla_setColor
Parameter: 2

White Color hotspot Position:
Top: 150
Left: 5

3drtsu-hotspots-added

8) Click on Return and Reload Preview. The result should look like this:
3drtsu-hotsots-result

You can click “Create” to export rotation as webpage.

You can also download the project file of this example here:
Fixed hotspots for Multiple Colors (open with the 3DRT Setup Utility -> “Load Project”)