Hey.
I want to make a hotspot like in the example (http://www.transported.co/1420-laurel-wa…0210/t/DBO_wpTv).
Animation of turn and text display (hover animation).
Solution with html / css does not work in vr mode.
How can i do this?
Hotspot with animation
-
-
Hi,
I would say this way:
- make two hotspots - one with the image, one with the textfield
- the image one visible and the textfield one invisible at start
- both with distorted=true and the same ath/atv coordinates
- set rx=90 (or -90) to the textfield hotspots (rx = rotation along the x-axis)
- disable the textfield hotspot at startup
- in the onover event of the image hotspot tween the rx of the image hotspot to 90 and rx of the textfield hotspot to 0
- in the donecall of the tween enable the textfield hotspot and disable the image hotspot
- in the onout event of the textfield hotspot tween the rx values back and again in the tween donecall disable the textfield hotspot and enable the image hotspotThat should work the same as in your linked example and would work also in VR.
Best regards,
Klaus -
Hi,
I would say this way:
- make two hotspots - one with the image, one with the textfield
- the image one visible and the textfield one invisible at start
- both with distorted=true and the same ath/atv coordinates
- set rx=90 (or -90) to the textfield hotspots (rx = rotation along the x-axis)
- disable the textfield hotspot at startup
- in the onover event of the image hotspot tween the rx of the image hotspot to 90 and rx of the textfield hotspot to 0
- in the donecall of the tween enable the textfield hotspot and disable the image hotspot
- in the onout event of the textfield hotspot tween the rx values back and again in the tween donecall disable the textfield hotspot and enable the image hotspotThat should work the same as in your linked example and would work also in VR.
Best regards,
KlausThank you!
Are there other solutions?
Can I use webgl to solve? -
Hi,
Are there other solutions?
Why?
Can I use webgl to solve?
I doubt... WebGL itself is just a very low-level graphics API...
But if want - please see here to get access to the WebGL context:
https://krpano.com/docu/plugininterface/#krpanowebglapiI've implemented now the solution from above:
https://krpano.com/krpano.html?xm…ng-hotspots.xmlThe xml:
https://krpano.com/viewsource.htm…ng-hotspots.xmlFor the example I have used a textfield+unicode arrow as hotspot, but using images is possible too of course, just remove the textfield stuff and set an url to an image.
Best regards,
Klaus -
Wow! Thank you!
-
Great solution, is it possible to implement distorted="false" to it? I've had no luck..
I guess it is the rx that is not supported by false distortion. So nevermind. I'll try some scaling instead -
Hi,
Why?
I doubt... WebGL itself is just a very low-level graphics API...
But if want - please see here to get access to the WebGL context:
https://krpano.com/docu/plugininterface/#krpanowebglapiI've implemented now the solution from above:
https://krpano.com/krpano.html?xm…ng-hotspots.xmlThe xml:
https://krpano.com/viewsource.htm…ng-hotspots.xmlFor the example I have used a textfield+unicode arrow as hotspot, but using images is possible too of course, just remove the textfield stuff and set an url to an image.
Best regards,
KlausIs it working with hotspot in 3d position?
Participate now!
Don’t have an account yet? Register yourself now and be a part of our community!