aframe glft click event

Question

I am trying to catch click event for glft model in a scene. Scene code below.

<a-scene raycaster-autorefresh> 
    <a-assets>
     <a-asset-item id="store_homeModel" src="app/home/store_models/store_model.gltf"></a-asset-item>
     <a-asset-item id="shampoo" src="app/home/product_models/Ayush Shampoo.gltf"></a-asset-item>
     <a-asset-item id="soap" src="app/home/product_models/Ayush Soap.gltf"></a-asset-item>
     <a-asset-item id="facewash" src="app/home/product_models/Citra Pearl face wash.gltf"></a-asset-item>
    </a-assets>


    <a-gltf-model src="#store_homeModel"></a-gltf-model>
    <a-gltf-model src="#shampoo" open-desc"></a-gltf-model>

</a-scene>

and component code I have. But click event is not getting catch and i am not able to see console log...

AFRAME.registerComponent('raycaster-autorefresh', {
  init: function () {
    // This will be called after the entity has properly attached and loaded.
    console.log('I am readyyyyy!');
  }
});

AFRAME.registerComponent('open-desc', {  
    init: function() {
        var data = this.data;
        var el = this.el;      
        el.addEventListener('click', function() {
            console.log("hiiiiiiiiiiii");           
        });
    },

});

Answer 1

Please remember that a-frame renders the whole view on a <canvas>, so you can't just use your mouse to click on any element inside the <a-scene>.

If you want a simple gaze based cursor, you need to attach a cursor to the camera:

<a-camera>
  <a-cursor></a-cursor>
</a-camera>

---

If You want to use the mouse, use the cursor component in the <a-scene>:

<a-scene cursor="rayOrigin:mouse">

---

If you want to use vive / oculus controllers, you should try laser-controls.

More details about properties and events regarding the cursor can be found in the docs.