I try to add three plane buttons in the A-Frame scene, and then give them corresponding click events and mouseenter and mouseleave events. A-Frame version is 1.3
Every time I refresh the page, the default cursor in the center of the scene triggers the mouseenter event of a button I'm in the center of the screen, and returns to normal after I move the mouse around.
Here are my scene options:
<a-scene
webxr="referenceSpaceType: local"
cursor="rayOrigin: mouse; fuse: false;"
raycaster="objects: .rayCaster;"
>
Here are the options for one of my buttons:
<a-plane
menu-button
mixin="menuButton"
material="src: #sjyPoster"
class="rayCaster"
id="sjyButton"
position="-2.5 1.05 -4"
></a-plane>
How can I change the code so that every time the page is refreshed, the three buttons are always styled properly, and the event will only be triggered when my mouse is operating normally.
For specific codes and demos, you can view the online URL: https://glitch.com/edit/#!/dour-ancient-cemetery