Drei Hub disappears upon entering R3F XR session

Questions
, , ,
1

I tried to use a simple Hub from Drei with an OrthographicCamera with XR. The Hub shows up fine before I enter the XR session, but immediately disappears after entering the XR session. Could anyone help me figure out what’s going on? Also, I’m pretty new to R3F, what is the easiest way to to diagnose things like this? Very much appreciated!!!

Here’s the relevant code:

import { Hud, OrthographicCamera } from '@react-three/drei';

export default function GUI() {
    return (
        <Hud renderPriority={1}>
            <OrthographicCamera makeDefault position={[0, 0, 100]} />
            <mesh>
                <boxGeometry args={[50, 50, 50]} />
            </mesh>
        </Hud>
    );
}

import { Canvas } from '@react-three/fiber';
import Splat from './components/Splat';
import { createXRStore, XR } from '@react-three/xr';
import Capture from './components/Capture';
import { setSplatViewer } from './util/splatManager';
import DevControls from './components/DevControls';

//@ts-ignore
import devSplat from './assets/cabin.ply';
import GUI from './components/GUI';

export default function App() {
    const store = createXRStore({ emulate: false });

    const handleSplatReady = (viewer: any) => {
        setSplatViewer(viewer);
    };

    return (
        <>
            <div style={{ position: 'absolute', top: 0, left: 0, zIndex: 1000 }}>
                <button onClick={() => store.enterAR()}>Enter AR</button>
            </div>
            <Canvas>
                <DevControls />
                    <Splat file={devSplat} onSplatReady={handleSplatReady} />
                    <Capture />
                <XR store={store}>
                    <GUI />
                </XR>
            </Canvas>
        </>
    );
}