Flat Rotating Hotspot

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Posts: 11646
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK

Wed Feb 17, 2021 12:32 pm

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 2435 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 2435 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 2435 times

Give the Hotspot Template the action to open the next panorama

2_1.png (37.95 KiB) Viewed 2435 times

Then you need to set the Modifier so it scales with FoV (zoom)

2_2.png (40.48 KiB) Viewed 2435 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 2435 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 2435 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 2435 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 2434 times

Again you can change the setting to make it look flat depending on the height you set your Hotspots.

(3.63 MiB) Downloaded 119 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
Post Reply