Guards

Render and show parts of your application conditionally using guards

Guards allow to conditionally display or include content. For instance, the IfInSessionMode guard allows only displaying a background when the session is not an AR session. The IfInSessionMode can receive either a list of allow session modes or a list of deny session modes.

import { Canvas } from '@react-three/fiber'
import { IfInSessionMode, XR, createXRStore } from '@react-three/xr'

const store = createXRStore()

export function App() {
  return (
    <>
      <button onClick={() => store.enterAR()}>Enter AR</button>
      <Canvas>
        <XR store={store}>
          <IfInSessionMode deny="immersive-ar">
            <color args={['red']} attach="background" />
          </IfInSessionMode>
        </XR>
      </Canvas>
    </>
 )
}

Edit this page