FAQ

The current global camera transformation can be accessed through getWorldPosition or getWorldQuaternionn This works inside of XR, as well as, outside of XR.

useFrame((state) => console.log(state.camera.getWorldPosition(new Vector3())))

In contrast to non-immersive 3D applications, the camera transformation in MR/VR/AR applications should never be directly controlled by the developer since the user's head movement must control the camera's transformation. Therefore, pmndrs/xr provides the XROrigin component, which allows to control where the session's origin is placed inside the 3D scene. The session origin is at the users' feet once they recenter their session. This allows to implicitly control the camera position but prevents the user from getting motion sick when their movement is not reflected in the camera's movement.

Check if you have OrbitControls, CameraControls, or other controls in your scene and make sure to place an <IfInSessionMode deny={['immersive-ar', 'immersive-vr']}> guard around them when in XR. This prevents overwriting the camera transformation which is controlled through WebXR when inside an immersive session and allows to access the correct transformation.

const OrbitControlsWrapper = () => {
  return (
    <IfInSessionMode deny={['immersive-ar', 'immersive-vr']} >
        <OrbitControls />
    </IfInSessionMode>
  )
}

<Canvas>
  <XR>
    <Suspense>... your scene</Suspense>
  </XR>
</Canvas>

store.getState().session?.end()

WebGPU is finding its way to more and more devices. However, AR and VR devices do not yet implement WebGPU for WebXR, which requires the WebXR-WebGPU-Binding. Therefore, WebGPU is not yet usable for WebXR in general.

If you are targeting only handheld AR experiences (e.g., for smartphones), you can use dom overlay. Here's a tutorial for using XRDomOverlays in your react-three/xr experience.

For non-handheld VR and AR experiences, you can use react-three/uikit, which renders user interfaces directly inside the 3D scene and is aligned with HTML and CSS concepts.

WebXR for VR experiences is supported on Safari for Apple Vision Pro. WebXR is not supported on iOS Safari yet. The alternative is to use products such as Variant Launch, which allow to build WebXR experiences for iOS.

If you are placing <XRSpace> components outside of the <XROrigin> while changing the transformation of the <XROrigin> (e.g. by setting <XROrigin position={[0,1,0]} />), the elements rendered inside of the <XRSpace> will not be transformed with the origin. If the transformations of the origin should be applied to the <XRSpace>, make sure to place those components inside the <XROrigin>. Not placing <XRSpace> components into the <XROrigin> can be useful in scenarios where you want to move the <XROrigin> independently from the <XRSpace>. For instance, building a virtual elevator where your actual room is duplicated into the x-axis so that you can use the elevator to travel between multiple instances of your room.

As a performance optimization the react-three/xr event system batches html user events per frame. This only applies if you are using PointerEvents, forwardHtmlEvents, or forwardObjectEvents. This can cause issue when executing functions that require a user action. For instance, uploading a file through a input element in a safari can only be triggered manually when immediately caused by a user input. For these use cases, please disable the event batching performance optimization through the options by setting batchEvents to false.