This was a solution for a customer request for a flat rotating hotspot.
A working project is attached below.
- example.gif (2.75 MiB) Viewed 32650 times
It uses CSS and a graphic made in Photoshop but can be any graphic you want to use.
How it was built.
Starting with a new skin add a Hotspot Template
- 1.png (57 KiB) Viewed 32650 times
Then give it the ID ht_node so it will be used by the Hotspot Type Node.
Then make your image a child of the Hotspot, I am using the ID ht_image
- 2.png (24.5 KiB) Viewed 32650 times
Give the Hotspot Template the action to open the next panorama
- 2_1.png (37.95 KiB) Viewed 32650 times
Then you need to set the Modifier so it scales with FoV (zoom)
- 2_2.png (40.48 KiB) Viewed 32650 times
Set the images Anchor to centre and set position to X/Y to 0/0px so it is now on top of the Hotspot Template in the Skin Canvas.
- 3.png (48.55 KiB) Viewed 32650 times
A Text Box has also been added for a tooltip but this is optional.
The text box is using the placeholder $(hs) so it displays the Hotspot Title and has a visible logic block so it shows when the Mouse is Over Parent.
To make the image rotate you need to copy and paste this code into the Skins Embedded Stylesheet.
Code: Select all
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}So it looks like this:
- 4.png (38.55 KiB) Viewed 32650 times
Now select the image ht_image in the skin and select CSS Styles Inner Element and add:
Code: Select all
animation: rotation 2s infinite linear;- 5.png (22.18 KiB) Viewed 32650 times
You can adjust the speed, it is how long it takes to rotate once so the larger the number the slower it will rotate.
To make it look flat on the floor the X-axis of the image needs to be changed.
To do this select CSS Styles in the image's properties and add the code:
Code: Select all
transform: rotateX(255deg);- 6.png (21.38 KiB) Viewed 32649 times
Again you can change the setting to make it look flat depending on the height you set your Hotspots.
There is now a new version for Pano2VR 7.
Regards,
