createXR

createXR enters and exits WebXR sessions — VR and AR — for the scene's renderer. The same code works on both WebGLRenderer and WebGPURenderer.

Unlike the use* hooks, createXR lives outside <Canvas> — next to the DOM "Enter XR" button that triggers a session. Call it in a component body (like createSignal), then connect it to the renderer with <Canvas ref={xr.connect}>.

Signature

const xr = createXR()

Returns

Examples

A VR scene with a DOM "Enter VR" button:

import { Canvas, createXR } from "solid-three"
import { Show } from "solid-js"

function App() {
  const xr = createXR()

  return (
    <>
      {/* The button is DOM, outside the Canvas. onClick is the user gesture. */}
      <button onClick={() => xr.enter("immersive-vr")}>Enter VR</button>
      <Show when={xr.isPresenting()}>
        <button onClick={() => xr.exit()}>Exit VR</button>
      </Show>

      <Canvas ref={xr.connect}>
        <Scene />
      </Canvas>
    </>
  )
}

Call enter straight from the click handler — don't await anything (like isSupported) before it, or the immersive request loses its user activation and fails.

AR with feature descriptors, shown only when the device supports it:

import { createResource, Show } from "solid-js"

const xr = createXR()
const [supported] = createResource(() => xr.isSupported("immersive-ar"))

<Show when={supported()}>
  <button
    onClick={() =>
      xr.enter("immersive-ar", {
        requiredFeatures: ["local-floor"],
        optionalFeatures: ["hand-tracking", "depth-sensing"],
      })
    }
  >
    Enter AR
  </button>
</Show>

Reading controller and hand poses — no createXR needed inside the scene. The third argument to useFrame is the live XRFrame during a session:

function Player() {
  useFrame((context, delta, frame) => {
    if (!frame) return // only present during a session
    // read XRFrame poses, move the rig, etc.
  })
  return null
}

Notes

• WebGPU on three ≤ r184: driving XR through the WebGPU backend needs a WebGL2 fallback — build the renderer with { forceWebGL: true } at the <Canvas gl> level.
• To drive a session manually instead of using createXR, see useThree.

See also

• useFrame — carries the XRFrame per session frame.
• <Canvas/> — its ref accepts xr.connect.
• useThree — the Context connect receives.