@threlte/xr
<Hand>
<Hands /> instantiates XRHand inputs for devices that allow hand tracking.
<Hand left />
<Hand right />It will by default load a hand model.
Default hand models are fetched from the immersive web group’s webxr input profile repo. If you are developing an offline app, you should download and provide any anticipated models.
<Hand> can accept a snippet to replace the default model.
<Hand left>
<T.Mesh>
<T.IcosahedronGeometry args={[0.2]} />
<T.MeshStandardMaterial color="turquoise" />
</T.Mesh>
</Hand>A snippet, wrist, will place any children within the wrist space of the hand:
<Hand left>
{#snippet wrist()}
<T.Mesh>
<T.IcosahedronGeometry args={[0.2]} />
<T.MeshStandardMaterial color="hotpink" />
</T.Mesh>
{/snippet}
</Hand>To trigger reactive changes based on whether hand input is or is not present, the useXR hook provides a currentWritable store:
const { isHandTracking } = useXR()Hand tracking can serve as a powerful input device, as any joint position, and not just the wrist, can be read from in real time:
<script lang="ts">
import { Canvas } from '@threlte/core'
import { VRButton } from '@threlte/xr'
import Scene from './Scene.svelte'
</script>
<div>
<Canvas>
<Scene />
</Canvas>
<VRButton />
</div>
<style>
div {
height: 100%;
}
</style><script lang="ts">
import { type Object3D, BoxGeometry, MeshStandardMaterial, Mesh } from 'three'
import { T } from '@threlte/core'
import { XR, Hand, Controller, type XRHandEvent, type XRControllerEvent } from '@threlte/xr'
let boxes: Object3D[] = []
const handleEvent = (event: XRHandEvent) => {
console.log('Hand', event)
if (event.type === 'pinchend') {
createBox(event)
}
}
const handleControllerEvent = (event: XRControllerEvent) => {
console.log('Controller', event)
}
const createBox = (event: XRHandEvent) => {
const controller = event.target
const size = 0.05
const geometry = new BoxGeometry(size, size, size)
const material = new MeshStandardMaterial({ color: Math.random() * 0xffffff })
const spawn = new Mesh(geometry, material)
const indexTip = controller?.joints['index-finger-tip']
if (!indexTip) return
spawn.position.copy(indexTip.position)
spawn.quaternion.copy(indexTip.quaternion)
boxes.push(spawn)
boxes = boxes
}
const hands = ['left', 'right'] as const
</script>
<XR>
{#each hands as hand (hand)}
<Hand
{hand}
onconnected={handleEvent}
ondisconnected={handleEvent}
onpinchstart={handleEvent}
onpinchend={handleEvent}
/>
<Controller
{hand}
onconnected={handleControllerEvent}
ondisconnected={handleControllerEvent}
onselect={handleControllerEvent}
onsqueeze={handleControllerEvent}
onselectstart={handleControllerEvent}
onselectend={handleControllerEvent}
onsqueezestart={handleControllerEvent}
onsqueezeend={handleControllerEvent}
/>
{/each}
</XR>
<T.Mesh rotation={[-Math.PI / 2, 0, 0]}>
<T.CircleGeometry args={[1]} />
<T.MeshBasicMaterial />
</T.Mesh>
<T.PerspectiveCamera
makeDefault
position={[0, 1.8, 1]}
oncreate={({ ref }) => ref.lookAt(0, 1.8, 0)}
/>
<T.AmbientLight />
<T.DirectionalLight />
{#each boxes as box (box.uuid)}
<T is={box} />
{/each}