Search code examples
javascripthtmlaugmented-realityaframeinteraction

On-screen button for A-frame AR

I`m trying this for days and I need help, please! What I need is two buttons on-screen overlaying the ar-camera picture reacting on touch. I tried two a-planes inside the the camera entity and I added cursor="rayOrigin: mouse" to a-scene (A-Frame 0.8.0). Somehow cursor="rayOrigin: mouse" blocks the aframe-ar.js to open the cam.

So, is there another way, maybe creating 2 buttons via js or html to switch objects on/off?

Solution

  • The raycaster-based cursor component may not work within ar.js.

    If you need just a simple button which will interact with the entities, just throw in a html <button> on the website, and react to clicks:

    <div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1;'>
    <button>
        HIDE OBJECTS
    </button>
</div>
<a-scene>
....

    JS

    document.querySelector("button").addEventListener("click", (e)=> {
  // do stuff here.
})

    example here.