@threlte/xr

useHitTest

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.

<script lang="ts">
  import { Canvas } from '@threlte/core'
  import { ARButton } from '@threlte/xr'
  import Scene from './Scene.svelte'
</script>

<div>
  <Canvas>
    <Scene />
  </Canvas>
  <ARButton />
</div>

<style>
  div {
    height: 100%;
  }
</style>

<script lang="ts">
  import * as THREE from 'three'
  import { T } from '@threlte/core'
  import { XR, Controller, Hand, useHitTest } from '@threlte/xr'

  const geometry = new THREE.CylinderGeometry(0.1, 0.1, 0.2, 32).translate(0, 0.1, 0)

  let meshes: THREE.Mesh[] = []
  let cursors = { left: undefined! as THREE.Mesh, right: undefined! as THREE.Mesh }

  const hands = ['left', 'right'] as const
  type Hands = (typeof hands)[number]

  const handleSelect = (hand: Hands) => () => {
    if (!cursors[hand].visible) return

    const material = new THREE.MeshPhongMaterial({ color: 0xffffff * Math.random() })
    const mesh = new THREE.Mesh(geometry, material)
    cursors[hand].matrix.decompose(mesh.position, mesh.quaternion, mesh.scale)
    mesh.scale.y = Math.random() * 2 + 1
    meshes.push(mesh)
    meshes = meshes
  }

  const handleHitTest =
    (hand: Hands) => (hitMatrix: THREE.Matrix4, hit: XRHitTestResult | undefined) => {
      if (!cursors[hand]) return

      if (hit) {
        cursors[hand].visible = true
        cursors[hand].matrix.copy(hitMatrix)
      } else {
        cursors[hand].visible = false
      }
    }

  useHitTest(handleHitTest('left'), { source: 'leftInput' })
  useHitTest(handleHitTest('right'), { source: 'rightInput' })
</script>

<XR>
  {#each hands as hand}
    <Controller
      {hand}
      onselect={handleSelect(hand)}
    />
    <Hand
      {hand}
      onpinchend={handleSelect(hand)}
    />
  {/each}
</XR>

<T.Mesh
  bind:ref={cursors.left}
  matrixAutoUpdate={false}
>
  <T.RingGeometry
    args={[0.15, 0.2, 32]}
    oncreate={(ref) => ref.rotateX(-Math.PI / 2)}
  />
  <T.MeshBasicMaterial />
</T.Mesh>

<T.Mesh
  bind:ref={cursors.right}
  matrixAutoUpdate={false}
>
  <T.RingGeometry
    args={[0.15, 0.2, 32]}
    oncreate={(ref) => ref.rotateX(-Math.PI / 2)}
  />
  <T.MeshBasicMaterial />
</T.Mesh>

<T.HemisphereLight
  args={[0xffffff, 0xbbbbff, 1]}
  position={[0.5, 1, 0.25]}
/>

<T.AmbientLight intensity={0.5} />

{#each meshes as mesh, index (index)}
  <T is={mesh} />
{/each}

Signature

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

Previous Page useHeadset

Next Page useTeleport