Garden Gnome Software

3D Arrow Hotspot with 2D Preview Image or Tool Tip
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:
Now select the element: hs_preview_image and do the same adding adding the line of code under the existing code in the CSS Styles then click OK.
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

Could use some help with this; got it added to skin, but not clear about implementing it into tour. I'm using P2VR 6 beta 4.

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!

I'm not sure what Hotspot Viewer Mode is? I tried adding a hotspot point, and changed skin-id to ht_node, type: tour node, but am not seeing the arrow.

HI,
If you have Type Tour Node then you have Pano2VR pro!
But please confirm, do you have Pano2VR 6 pro or Pano2VR 6 light?
Regards,
Hopki

do you have Pano2VR 6 pro or Pano2VR 6 light?

I believe pro, though I don't see that designation in about box or anywhere else. I have a pro license and registered that to the app. There is a Google Street View tab; that's only in pro, right?

Hi,
Google is in both pro and light but you can not link panos in light.
If you look at the bottom right of Pano2VR it will say which license you have.
Regards,
Hopki

Ah, I see: yes, I have pro.

I love this new feature! I have a tour set to display a floor plan at the beginning and then disappear when advancing to the next tour point. When I navigate with the 3D arrow and then display the floor plan again, the floor plan hot spot remembers the last tour point where it was when it was closed, not the current position. Any ideas where to start trouble shooting? I am modifying a previous skin with the new 3D arrow. Thanks

I would need to see your skin on how you have put it together.
Also maybe you p2vr file.
Best thing to do is send in your support package, as found under the help menu.
Make sure you include the skin.
Regards,
Hopki

I still can't get this to work--does it work with Simplex v6? I added the 3D arrow component to my skin. What do I do after that? I don't see the arrows.

When I drop the arrow component onto the skin, does it have to go anywhere special? Can I just drop it on the canvas, or do I need to configure it there? I'm probably missing something obvious, but can't get it to work...

HI,
The V6 Simplex skin already has a Hotspot Template ht_node.
Find this and either delate it or rename it.
Then add the 3D component.

To expand on this when you set a point hotspot it will use the Skin-ID ht_node.
This means it is looking for a Hotspot Spot Template with the ID ht_node.

You could if you wanted rename the 3D Hotspot Template to something different, as an example ht_node_3d.
Then when you set a point Hotspot over type the Skin-ID to say ht_node_3d.

This means that hotspot will use the 3d hotspot.
Skin-ID's is what allows you to have different graphics for different hotspots in a project.
Regards,
Hopki

Got it, it's working now; I didn't realize I had to delete or rename the existing ht_node.

Thanks Hopki!

dear hopli,

i used the 3D arrow hotspot in my projekt.
i set the appearance of my custom svg arrow to - 90 degree.
this worked fine for all browser except edge.
in edge ypu cant´click the arrows.
best rgeards

andreas

Hi Hopki,

Sorry for piggybacking on this thread, how do I change the code of the 3D Arrow hotspot, such that the arrow is on the hotspot itself, and not pointing towards it? I would say something like the 3D floating cursor however instead of the svg arrow on the cursor it would be on the hotspot node. https://ggnome.com/gg_webinars/3d-floating-cursor/. Something similar to Matterport tours hotspot i guess?

Any hints on how to edit the _code would be much appreciated. Thanks!

EDIT: I managed to find a solution by splicing the codes of the 3D floating cursor and 3D arrow hotspot !! Not sure is there an existing solution but anyone interested for some matterport style hotspots please leave a reply here.

Jereme

Hi Jereme,
Have a look at this post: viewtopic.php?f=13&t=15551
Regards,

Hi,

I wasn't a big fan of the floor arrows, but it seems i might change my mind. street view uses it, so people are used to it.

is there a way to add a 3D arrow, without affecting the rest of the hotspot? i checked the code, it seems to have something to do with the DIV tag making the whole hotspot gets transformed. could not find a workaround yet.

so what i try to achieve is -only- 3D transform an arrow image on the floor so it points to the normal hotspot image, nothing else. (then i could switch it on/off for each hotspot with custom userdata properties)

david