I have a 360 degree image that I'm using a-frame to display.
My question is, is there any interactivity (like Google Maps Street View) where I can take overlay arrows and take the user to another 360 degree image? Is it possible to do this? How would I go about adding this type of functionality if it is possible?
Is it possible to add text or html links onto the 360 image?
I realize that's more than one question but hopefully someone can help me out. I 'm really liking A-Frame.
There are multiple ways to do what You want to achieve.
A 360 gallery ( like google maps street view ):
The easiest way is to make a sphere/sky which is changing its source image. Examples here, tutorial here.
Basically You make either a <a-sky> or <a-sphere> with the source of your image like <a-sphere src="myImage.jpg"> or <a-sphere material="src:myImage.jpg">. Of course, you would like to have the buttons all over the place, not organized like in the example.
Links
Im not sure about adding normal links, of course you may add any entity, which would redirect you to another page via javascript like this:
in the scene:
<a-entity link><a-entity>
@js:
AFRAME.registerComponent('link', {
init:function(){
this.el.addEventListener('click',function(){
window.location.href = "http://stackoverflow.com";
});
}
});
Text
Adding text is documented here. If you don't like it, you can always make an image with an alpha channel and add it wherever You like.
To be honest, try making a 360 image, then make a 2D picture, then work on some behavior ( links, switching images ).