In this post we will show you how you can add hotspots to your 3D models. We have split up the hotspots into two parts, just like the model nodes: 1. Base hotspots: these hotspots are visible at all times 2. Attribute hotspots: these hotspots are only visible for the selected attribute option Choosing hotspot positions First we have to choose where our 3D model hotspots will be displayed. Head over to our 3D model inspector and upload your 3D model. Next, locate the button “add hotspot” and click the button Now you should click anywhere on the model to add a hotspot in that particular position.
After clicking you will see that there are 2 additional fields in the hotspot list. These fields contain the hotspot position and normal, which we will need later. Add all the hotspots in the right positions. Defining the attribute hotspots Version 1.x With our hotspot positions in place, let’s head over to Staggs -> Themes and select our configurator theme. If you do not have a theme yet, you should create one right now. In the appearance tab, scroll down to the bottom. There you will find a field called “3D Model hotspots” Version 2.x Let’s head over to Staggs -> Templates and select our configurator template. If you do not have a template yet, you should create one now. Open up the “Configurator extras” tab and locate the “3D model hotspots” field.
Each hotspot contains 4 fields: ID: Unique identifier of the hotspot. Content: Content of the hotspot. Position: Position value as displayed in the 3D model inspector field Normal: Normal value as displayed in the 3D model inspector field Add all your hotspots to this list. Define the base hotspots With our 3D model hotspots in place, lets head over to the main product page. There you will find a field called “3D model hotspots”. Here you can enter the unique hotspot ID’s that you have picked. Only enter the IDs of the hotspots that should be visible at all times.
Define conditional hotspots You can also choose to conditionally show/hide hotspots in the 3D model. If you want to show hotspot for particular option, head over to your attribute. Next, go over to the option and you will also find a field called “3D model hotspot(s)”
Again, enter the hotspot ID(s) you wish to display for the particular option. And save the attribute.