augmented-realityaframe8thwall-xrwebxr

Can you interact with a web AR scene with A-Frame?


Can you interact with a mobile (magic-window) web AR scene in A-Frame, like you can in the 8th Wall demo linked below.

An example: Having three buttons placed on a web AR plane, do you have events on the user pressing one of those?

8th wall demo: https://8thwall.com/web


Solution

  • You can have interactable entities with the a-frames cursor with it's rayOrigin set to mouse. For example:

    <a-marker preset='hiro'>
       <a-box interactable></a-box>
    </a-marker>
    <a-camera-static cursor="rayOrigin: mouse" />
    

    Check it out at this glitch.


    assuming interactable is a custom component:

    AFRAME.registerComponent('interactable', {
       init: function() {
          this.el.addEventListener('click', e => {
             // magic
          })
       }
    })