-1

This is my sample 360ImageView

How do I add Hotspot functionality in aframe panorama,can anybody guide me or give me some clues on how to make this possible

Thanks

Chuva
  • 57
  • 2
  • 10
  • some similar SO questions here: [Calculate the position of an element inside a photosphere](http://stackoverflow.com/questions/41123606/calculate-the-position-of-an-element-inside-a-photosphere/41134342#41134342) [Mapping shapes from a flat equirectangular panorama to planes within A-Frame](http://stackoverflow.com/questions/42871114/mapping-shapes-from-a-flat-equirectangular-panorama-to-planes-within-a-frame) – Craig.Li Mar 30 '17 at 06:25
  • https://github.com/aframevr/360-image-gallery-boilerplate https://glitch.com/~aframe-gallery https://aframe.io/aframe-school/#/10 https://aframe.io/docs/0.5.0/guides/building-a-360-image-gallery.html – ngokevin Mar 30 '17 at 18:05
  • It is not the hotspot one – Chuva Mar 30 '17 at 18:47
  • Eg: if I move the cursor to the image-thumb it should toggle some text consider i'm in the kitchen if I move the cursor to the image-thumb it shows "Kitchen" – Chuva Mar 30 '17 at 18:49

1 Answers1

2

you can simply get the cursor location and create a sphere or a circle entity on that particular location. Here is the code.

    function createmarker(){
    var b = document.createElement("a-sphere");
    var cursor = document.querySelector("a-cursor");

    var cursor_pos = new THREE.Vector3().copy(cursor.object3D.getWorldPosition()); // get cursor's world position

    b.setAttribute("position", {
        "x" : cursor_pos.x,
        "y" : cursor_pos.y,
        "z" : cursor_pos.z
    });
    console.log(cursor_pos);
    b.setAttribute("radius","0.07");
    b.setAttribute("color","#fff");


    var a = document.getElementById('aframe-scene');
    a.appendChild(b);
}

Here is the aframe html part

<a-scene id="aframe-scene">
    <a-sky id="sky" src="/user_images/<%= name %>" id="sky"    rotation="0 -130 0"></a-sky>
    <a-entity id="enti" camera="userHeight: 1.6" position="0 0 1.6" look-controls wsad-controls mouse-cursor>
       <a-cursor style="z-index: 9999">
       </a-cursor>
    </a-entity>
</a-scene>

you can add a click listener component and add the function createmarker to it. Regarding your query of adding text and images, you can attach the path to the innerHTML of the sphere and create a hover component and on hover take the path from that sphere's inner html and display it near the sphere. For further help you can check out my github repo

Praneet Mehta
  • 111
  • 6