4 ms·

But representing the DOM etc inside a 3D space is useful so you don't loose access to the world of 2D information. However there are no good solutions to this

• jaeh 4y 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> js 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.