r3f-xr-widgets / SplashScreen

Function: SplashScreen()

SplashScreen(props): Element | null

Defined in: src/components/SplashScreen.tsx:133

Full-screen splash overlay with Enter VR/AR buttons

Displays an overlay with custom content and XR entry buttons. Automatically hides when an XR session starts. The component intelligently shows VR and/or AR buttons based on:

1. Which modes are specified in the modes prop
2. Which modes the browser actually supports

If both modes are available, shows two buttons side-by-side. If only one is available, shows a single centered button. If neither is supported, shows a disabled button with an informative message.

Parameters

props

SplashScreenProps

Returns

Element | null

Examples

import { Canvas } from '@react-three/fiber'
import { createXRStore } from '@react-three/xr'
import { SplashScreen } from 'r3f-xr-widgets'

const store = createXRStore()

function App() {
  return (
    <>
      <Canvas>
        <XR store={store}>
          {/* XR content */}
        </XR>
      </Canvas>
      <SplashScreen store={store}>
        <h1>Welcome to My XR App</h1>
        <p>Put on your headset and enter VR to begin</p>
      </SplashScreen>
    </>
  )
}

<SplashScreen store={store} modes={['immersive-vr']}>
  <h1>VR Experience</h1>
  <p>This app requires a VR headset</p>
</SplashScreen>

<SplashScreen store={store} modes={['immersive-ar']}>
  <h1>AR Experience</h1>
  <p>Point your device at a flat surface</p>
</SplashScreen>