|
|
|
|
|
|
by jaeh
1390 days 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. |
|
|