use-hit-test.mdx

order	category	name	type
17	@threlte/xr	useHitTest	hook

Provides a hit test result on each frame during an immersive-ar session.

Hit testing lets you position virtual items in a real-world view.

<script>
  import { useHitTest } from '@threlte/xr'

  let ref

  useHitTest((hitMatrix, hit) => {
    if (!ref) return
  
    if (hit) {
      ref.visible = true
      ref.matrix.copy(hitMatrix)
    } else {
      ref.visible = false
    }
  })
</script>

<T.Mesh bind:ref>
  <T.SphereGeometry args={[0.1]}>
  <T.MeshBasicMaterial />
</T.Mesh>

This hook can optionally specify one of three origins from which to cast the hit test ray: viewer (the default), leftInput or rightInput.

useHitTest((hitMatrix, hit) => {
  // Perform a hit test from the left controller or hand.
}, { source: 'leftInput' })

In the following example, hit testing is set up from both controllers and hands.

Signature

useHitTest((hitMatrix: THREE.Matrix4, hit: XRHitTestResult | undefined) => {})