[Question]: Can I use react-xr with a custom r3f canvas?

[AndyMGar]

I'm using a "Custom Canvas" as described in the docs here. Am I then able to use react-xr?

My render call currently looks like this:

rootRef.current = (createRoot(document.querySelector('#canvas')));
rootRef.current.render(<ThreeApp {...{...props}}/>)

where is a fully working react-three-fiber based app.

I thought something like this this might work:

rootRef.current.render(<><ThreeApp {...{...props}}/></>)

but it gives the error

R3F: Button is not part of the THREE namespace! Did you forget to extend?

Since I am not explicitly using the R3F component does this mean I have to add XR functionality more natively? I'm not averse to doing that, just wanted to make sure there wasn't a better/easier way.

[CodyJasonBennett]

This must be something else, R3F's canvas is as good as:

function Canvas({ children, ...props }) {
  const [canvas, setCanvas] = React.useState()
  const root = React.useMemo(() => canvas && createRoot(canvas), [canvas])
  React.useEffect(() => () => root?.unmount(), [root])

  extend(THREE) // https://docs.pmnd.rs/react-three-fiber/api/canvas#tree-shaking
  root?.render(children, props)

  return <canvas ref={setCanvas} />
}

Make sure that you're putting the XRButton or any DOM content outside of the canvas.

[saitonakamura]

@AndyMGar if you can make a repro on codesandbox that would be really helpful 🙂

[AndyMGar]

Thank you @CodyJasonBennett and @saitonakamura.
@CodyJasonBennett was correct. I was trying to put the button inside the canvas. I had not twigged that the button was, of course, a DOM element.

[AndyMGar]

My mistake.