pmndrs / react-xr

🤳 VR/AR with react-three-fiber

Home Page:https://npmjs.com/@react-three/xr

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

how to add HTML overlay?

elibenjii opened this issue · comments

commented

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!

commented

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