aframe glft click event - angularjs

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.