top | item 32562099

(no title)

jaeh | 3 years ago

hoisting divs as hud works nicely already, both in ios (webxr viewer) and android (chrome + google play services for ar)

you just need a div directly below body, then you can actually enable it as a hud in augmented reality.

at the moment we only use it to show announcements to the visitors, but i also have tested buttons with event listeners attached and you can even console.log from there.

html

  <html>
    <body>
      <canvas id="three-canvas"></canvas>
      <div id="hud">
        <button>Will be visible in ar</button>
      </div>
    </body>
  </html>

  const xrSession = await window.navigator.xr.requestSession('immersive-ar', {
    // ...requiredFeatures,
    domOverlay: {
      root: $('#hud'),
    },
  })

css

  #three-canvas {
    z-index: 999;
  }
  #hud {
    z-index: 1000;
  }

edit: use window.navigator instead of W.NAV, my custom "window" global.

discuss

No comments yet.