I'm attempting to use a networked A-frame to create a new entity upon page load. I want to incorporate various functionalities, such as hover and click events, on these entities. However, my attempts to make them clickable have been unsuccessful.
function rigClick(){
console.log("Entity Clicked");
}<a-scene>
<a-entity id="rig" onclick="rigClick()">
<a-entity
id="foo"
networked="template:#rig-template;attachTemplateToLocal:false;"
camera="active:true;"
position="-27 2.5 24"
wasd-controls="acceleration:12;"
look-controls
spawn-in-circle="radius:2"
>
</a-entity>
</a-entity>
</a-scene>I also attempted to use the register component feature but did not achieve the desired results.
AFRAME.registerComponent('click-handler', {
init: function () {
let entity = document.querySelector('#rig')
entity.addEventListener('click', (e) => {
console.log("You just clicked on entity");
})
}
});<a-scene>
<a-entity id="rig">
<a-entity
id="foo"
networked="template:#rig-template;attachTemplateToLocal:false;"
camera="active:true;"
position="-27 2.5 24"
wasd-controls="acceleration:12;"
look-controls
spawn-in-circle="radius:2"
click-handler
>
</a-entity>
</a-entity>