I'm trying to build an app with hololens2 using aframe but i'm having trouble clicking the object with laser-controls in ar mode. With the codes below, I can click the object like few seconds no matter how many times i click it, it works but after few seconds, it stops working. However, here in this example, https://glitch.com/~aframe-building-ui it works fine and it is also using laser-controls. can anyone tell me what could be the problem?
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('click', {
dependencies: ['material'],
init: function () {
var btn = document.querySelector("#clickbtn");
var isClick = false;
btn.addEventListener("click", (e) => {
if(isClick == false){
btn.setAttribute('material', 'color', 'tomato');
isClick = true;
}
else{
btn.setAttribute('material', 'color', 'white');
isClick = false;
}
});
}
});
</script>
</head>
<body>
<a-scene
id="a_scene"
background="color: #837E7C"
cursor="rayOrigin: mouse; fuse: false"
raycaster="objects: .raycastable">
<a-camera>
<a-box
click
position="-1.7 -0.2 -8"
id="clickbtn"
material="color: white; opacity:1"
width="0.5"
height="0.5"
depth="0.05"
animation__scale="property: scale; to: 2 2 2; dur: 200; startEvents: mouseenter"
animation__scale_reverse="property: scale; to: 1 1 1; dur: 200; startEvents: mouseleave"
class="raycastable">
</a-box>
</a-camera>
<a-entity id="mouseCursor" cursor raycaster="objects: .raycastable"></a-entity>
<a-entity id="leftHand" laser-controls="hand: left" raycaster="objects: .raycastable"></a-entity>
<a-entity id="rightHand" laser-controls="hand: right" raycaster="objects: .raycastable"></a-entity>
</a-scene>
</body>
</html>