All Hooks

Hook for reading the state from the XR store.

Hook for getting the XR store from the context.

Hook for getting the function to initialize the room capture for scanning the room.

Hook for checking if a session mode is supported.

Hook for getting the session visibility state.

Hook for creating a hit test source originating from the provided object or xr space.

Hook that allows to set up a continous hit test originating from the provided object or xr space.

Hook that returns a function to request a single hit test.

Hook that returns a function that allows to request a xr anchor.

Hook for requesting and storing a single xr anchor.

Inputs are a key aspect of react-three/fiber. The following hooks provide access to inputs, xr input source events, their state, and more.

Hook for listening to xr input source events.

Hook for getting the XR input source state inside of a component that renders the input source. For example, the DefaultXRHand uses this hook to get the state of the hand it renders using useXRInputSourceStateContext("hand").

Hook for getting the XR input source state.

Hook for subscribing to a button state change event on the controller.

@react-three/xr provides several hooks to synchronize the space provided by WebXR with the scene.

Hook for retrieving the XR reference space from the context.

Hook that applies the transformation of the provided XR space to the provided object reference.

Hook that returns a function to compute a matrix that contains the transformation of the provided XR space.

Hook for creating a touch pointer.

Hook for creating a grab pointer.

Hook for creating a ray pointer.

Hook for binding the XR session events such as selectstart to the provided pointer down/up events.

@react-three/xr exposes WebXR's object detection capabilities for meshes and planes. The following functions allow to access these WebXR primitives inside of the components responsible for rendering these detected object and retrieving their geometry.

Hook for getting the geometry from the detected mesh.

Hook for getting all detected meshes with the provided semantic label.

Hook for getting the geometry from the detected plane.

Hook for getting all detected planes with the provided semantic label.

Hook for abstracting boilerplate needed to use controller based locomotion in XR.

// Example showing basic usage
export const userMovement = () => {
  const originRef = useRef<THREE.Group>(null);
   useXRControllerLocomotion(originRef);
  return <XROrigin ref={originRef} />
}

// Example using rapier physics
export const userMovementWithPhysics = () => {
  const userRigidBodyRef = useRef<RapierRigidBody>(null);

  const userMove = (inputVector: Vector3, rotationInfo: Euler) => {
    if (userRigidBodyRef.current) {
      const currentLinvel = userRigidBodyRef.current.linvel()
      const newLinvel = { x: inputVector.x, y: currentLinvel.y, z: inputVector.z }
      userRigidBodyRef.current.setLinvel(newLinvel, true)
      userRigidBodyRef.current.setRotation(new Quaternion().setFromEuler(rotationInfo), true)
    }
  }

  useXRControllerLocomotion(userMove)

  return <>
    <RigidBody
      ref={userRigidBodyRef}
      colliders={false}
      type='dynamic'
      position={[0, 2, 0]}
      enabledRotations={[false, false, false]}
      canSleep={false}
    >
      <CapsuleCollider args={[.3, .5]} />
      <XROrigin position={[0, -1, 0]} />
    </RigidBody>
}

@react-three/xr exposes some hook to load controller models and layouts without actual xr controllers for building controller demos/tutoials.

Hook for loading a controller layout, which contains info about the controller model and its buttons / controls. For xr controllers provided through WebXR the layout is loaded and provided through the controller state automatically, therefore, this hook's purpose is for building controller demos/tutorials.

Hook for loading a controller model using the handedness and the controller layout.