useXRRequestHitTest

useXRRequestHitTest(): (relativeTo, trackableType?) => undefined | Promise<undefined | { getWorldMatrix: (...args) => boolean; results: XRHitTestResult[]; }>

Hook that returns a function to request a single hit test. Cannot be called in the useFrame hook.

Returns

(relativeTo, trackableType?): undefined | Promise<undefined | { getWorldMatrix: (...args) => boolean; results: XRHitTestResult[]; }>

Parameters relativeTo

XRSpace | XRReferenceSpaceType | RefObject<null | Object3D<Object3DEventMap>>

trackableType?

XRHitTestTrackableType | XRHitTestTrackableType[]

Returns

undefined | Promise<undefined | { getWorldMatrix: (...args) => boolean; results: XRHitTestResult[]; }>

Example

const matrixHelper = new Matrix4()
function EventDrivenHitTest() {
  const requestHitTest = useXRRequestHitTest()
  const [placedObjects, setPlacedObjects] = useState<Vector3[]>([])

  const handleTap = async () => {
    const hitTestResult = await requestHitTest('viewer', ['plane', 'mesh'])
    const { results, getWorldMatrix } = hitTestResult
    if (results?.length > 0) {
      getWorldMatrix(matrixHelper, results[0])
      const position = new Vector3().setFromMatrixPosition(matrixHelper)
      setPlacedObjects((prev) => [...prev, position])
    }
  }

  return (
    <>
      <IfInSessionMode allow={'immersive-ar'}>
        <XRDomOverlay>
          <button onClick={handleTap}>Place Object</button>
        </XRDomOverlay>
      </IfInSessionMode>

      {placedObjects.map((position, index) => (
        <mesh key={index} position={position}>
          <sphereGeometry args={[0.1]} />
          <meshBasicMaterial color="blue" />
        </mesh>
      ))}
    </>
  )
}

See

packages/react/xr/src/hit-test.tsx

Edit this page