Add gaze buttons to scene using A-frame

Question

Is there a way to add gaze buttons in aframe? Note also for a better experience there must be an little progress bar to know how long the user must look to it.

I've looked inside the inspector tools but nothing found that works.

In this YouTube tutorial, I've found how to add click controls. Is it the same way I could make gaze events?

Answer 1

You can select an item by gazing at it using the fuse property of the cursor component. Check the A-Frame docs here: https://aframe.io/docs/0.5.0/components/cursor.html#fuse-based-cursor

This will trigger a click event on the item, so you also need to have a listener set up on the item for the click event.

Answer 2

By searching, I've found a solution that works. Here is my code:

document.getElementsByTagName('a-sphere')[0].addEventListener('click', function(){
    alert('click');
});

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
    <!-- this is my object that must execute a click event when looked -->
    <a-sphere position="0 0 -7" color="red">
    </a-sphere>

    <!-- camera -->
    <a-camera look-controls wasd-controls cursor="maxDistance: 30; fuse: true">
        <!-- progress bar -->
        <a-entity position="0 0 -3" geometry="primitive: ring; radiusOuter: 0.07;radiusInner: 0.05;" material="color: cyan; shader: flat"
            cursor="maxDistance: 30; fuse: true">
            <!--<a-cursor color="red"></a-cursor>-->
            <a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
            <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
        </a-entity>
    </a-camera>
</a-scene>

Thanks to @thoragio for his/her answer.