Example: Link
• 3D Arrow Hotspot with preview image and visited check mark
• Preview image or tool tip will always be facing the viewer
• When used with Pano2VR light or Pano2VR Pro with a single node project only the tool tip is visible
• The component can be configured so it does not display the preview image/tool tip using the skin configuration button.
How to use:
Download the file and double click, when asked, add to Pano2VR in your desired category.
To use, open the skin editor and open the components tool box.
Select the category you saved the component then add to your skin. It will connect to Hotspot Type ht_node.
If using Pano2VR light you need to set the Skin-ID to ht_node in the Hotspot Viewer Mode.
Publish your project and thats it!
How it works for those that want to know:
The component is basically the same as the 3D Arrow Hotspot Component that ships with Pano2VR 6 but the "_code" text box has some changes to the javascript.
If you want more elements not to rotate with the arrows then this can be done by adding to the "_code" text box.
At the bottom of the code you will see:
me._hs_preview_image.style.transform=hs+' translate3d(0px,-100px,0px)';
me._tt_ht_3d.style.transform=hs+' translate3d(0px,-50px,0px)’;
If you look at the last part of me._hs_preview_image code string you will see -100px while me._tt_ht_3d is set to -50px.
This effects how much above the arrows the preview image or text box will be above the arrows.
If you wanted more elements not to rotate with the arrows you would get their ID from the skin.js file and add it under me._tt_ht_3d.style.transform=hs+' translate3d(0px,-50px,0px)’;.
Mod for the packaged 3D Arrow Hotspots
Here is a mod you can do to the packed 3D Arrow hotspots which involves adding a line of CSS that hides the preview image or tool tip when the back face displays. This is a simple but very effective mod.
Example: Link
How:
Go to the components tool box and under the Built-In category add the Node 3D Hotspot Silhouette or Simplex.
Expand the tree and select the element: tt_ht_3d.
In the properties and in the CSS Styles add the line under the existing code then click OK:
Code: Select all
-webkit-backface-visibility: hidden; backface-visibility: hidden;
Create the output and you will see that as soon as you start to see the back of the preview image or tool tip it will hide.
Regards,
Hopki