how to add HTML overlay?
elibenjii opened this issue · comments
I need to display a button on top of the AR camera.
When passing "dom-overlay" arg on the session init it is working fine without React as we can create other js selectors
<ARButton
sessionInit={{
requriedFeatures: ["local", "hit-test", "dom-overlay"],
domOverlay: {
root: document.getElementsByClassName("buttonOverlay"),
},
}}
/>
<div className="buttonOverlay" />
does not show.
Any idea? thanks!
@zob360 do you mind creating a repro with https://codesandbox.io/s/r3f-xr-vite-ts-template-qgy40q?file=/index.html ?
Hey thanks, I just found the solution, domOverlay: { root: document.body }
:
<ARButton
sessionInit={{
requiredFeatures: ["local", "hit-test"],
optionalFeatures: ["dom-overlay", "dom-overlay-for-handheld-ar"],
domOverlay: { root: document.body },
}}
/>
Now all components are able to overlay