Question about dynamically switching XR modes (xrweb ↔ xrhand) in a single <a-scene>

🧑‍💻 Technical Support
1

Hi 8th Wall Support Team,

I’m currently developing an AR web experience using A-Frame and 8th Wall (Editor mode, not Studio).
I’m trying to implement a feature where the <a-scene> dynamically switches between two XR modes depending on the gameplay type:

  • xrweb: for standard surface-based AR (e.g., Gameplay 1 with a ground plane and draggable model)
  • xrhand: for hand-tracking AR (e.g., Gameplay 2 with model fixed to palm)

Here is what I tried:

const scene = document.querySelector('a-scene')
scene.removeAttribute('xrweb')
scene.setAttribute('xrhand', '')

And vice versa (when returning):

scene.removeAttribute('xrhand')
scene.setAttribute('xrweb', '')

However, it seems that only the XR mode defined at initial page load takes effect.
When I try to switch modes dynamically, the new mode does not seem to activate properly.

My question is:

Does 8th Wall support dynamic switching of XR modes (xrweb ↔ xrhand) at runtime via JS, within a single <a-scene>? Or must the XR mode be determined statically on first load?

If this is not supported, is there an official recommended workaround for supporting both modes (e.g. two <a-scene> setups, or conditionally rendering the scene)?

Thanks so much for your support !

2

Check out this clone-able project, It should lead you in the direction.

1 Like
3

Dear Butlter,

Thanks for your kind help!