XRHitTest

XRHitTest(props): ReactNode

A convenience wrapper component for the useXRHitTest hook. Used to setup hit testing in the scene.

props

Omit<Omit<Mutable<Overwrite<Partial<Overwrite<Group<Object3DEventMap>, MathProps<Group<...>> & ReactProps<Group<...>> & Partial<EventHandlers>>>, Omit<InstanceProps<Group<Object3DEventMap>, typeof Group>, "object">>>, "children"> & object, "ref"> & RefAttributes<Group<Object3DEventMap>>

space

XRSpaceType | XRReferenceSpaceType

onResults

Callback function that is called with the results of the hit test

Returns

ReactNode

Example

const matrixHelper = new Matrix4()
const hitTestPosition = new Vector3()

const store = createXRStore({
  hand: () => {
    const inputSourceState = useXRInputSourceStateContext()

    return (
      <>
        <DefaultXRHand />
        <XRHitTest
          space={inputSourceState.inputSource.targetRaySpace}
          onResults={(results, getWorldMatrix) => {
            if (results.length === 0) return
            getWorldMatrix(matrixHelper, results[0])
            hitTestPosition.setFromMatrixPosition(matrixHelper)
          }}
        />
      </>
    )
  },
})

See

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

Edit this page