Show text on mouse over of a-sphere

Question

This is the code I'm tweaking for a 360 image gallery:

https://glitch.com/edit/#!/wild-aftershave

Here's an MCV version: https://glitch.com/edit/#!/good-soup

I have a link template:

<script id="link" type="text/html">
          <a-entity class="link"
            hover-text="value: I am hovered."
            rotation="-45 0 0"
            position="-4 0 0"
            geometry="primitive: sphere; radius: .5"
            material="shader: flat; src: ${thumb};"
            event-set__1="_event: mousedown; scale: 1 1 1"
            event-set__2="_event: mouseup; scale: 1.2 1.2 1"
            event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
            event-set__4="_event: mouseleave; scale: 1 1 1"
            set-image="on: click; target: #image-360; src: ${src}"
            sound="on: click; src: #click-sound"
          ></a-entity>


        </script>

The individual image links:

 <a-entity id="links" layout="type: circle; radius: 4; angle: ;" position="2 -2 .1">

        <a-entity template="src: #link" data-src="#coney" data-thumb="#coney-thumb"> 

        <!-- animation to show once a link has been clicked-->
        <a-animation attribute="rotation"
               dur="5000"
               begin="click"
               from=""
               to="0 0 20"
               repeat="0"></a-animation>

        </a-entity>

x20...

And a cursor/camera.

At the moment, when you change images, an animation plays to show you've seen that image (aside: couldn't get opacity to work because it's an animation inside an entity inside of another entity). I'm wondering how I can make text hover over the image links when you gaze over it.

I've tried the hover-text script here:

(A-sphere show text on mouse over or attach a text to a-sphere),

but unless I'm not putting the hover-text component in the right place, I can't get it to work. Any suggestions? Thanks.

Answer 1

Really couldn't get it to work, but here's what did work:

Adding this script, which targets an entity, and toggles its opacity:

<script>
      document.querySelector('a-scene').addEventListener('enter-vr', function () {
        var link = document.querySelector('.bottom-left').style.visibility = "hidden";
      });
      document.querySelector('.target').addEventListener('mouseenter', function () {
        var toggle = document.querySelector('.toggle').setAttribute('opacity', 100);
        var text = document.querySelector('.text').setAttribute('opacity', 100);
      });
      document.querySelector('.target').addEventListener('mouseleave', function () {
        setTimeout(function () {
          var toggle = document.querySelector('.toggle').setAttribute('opacity', 0);
          var text = document.querySelector('.text').setAttribute('opacity', 0);
        }, 100);
      });

Then make a plane where you want the text to be shown with text inside it:

  <a-plane class="toggle" color="#2582EF" height="1.25" width="2.5" scale="0.8 0.8 0.8" rotation="0 -90 0" 
               position="3 -5 .3" opacity="0" visible="true" material="color:#2582EF;opacity:0" geometry="primitive:plane;height:1.25;width:2.5">
        <a-text class="text" text="anchor:align;width:4.5;color:#FFFFFF;align:center;opacity:0;font:https://cdn.aframe.io/fonts/Exo2SemiBold.fnt;
                                   value:Hey" 
                letterspacing="1.3" width="4.5" color="#FFFFFF" align="center" opacity="0" scale="0.5 0.5 0.5" 
                position="0 0 0" rotation="0 0 0" visible="true">
        </a-text>
      </a-plane> 

Then in the entity you want to act as the target for toggling you just add

class="target"

and viola...only need to make a new plane, script, and target for each thing though. It's not clean, but it works for someone with no javaScript experience.

Answer 2

Use value, not content.

el.setAttribute('text', {content: data.content});

You can also use event-set__text="_event: mouseenter; text.value: 'Hello'" or event-set__text="_event: mouseenter; _target: #someText; text.value: "Hello".