@threlte/xr
<Controller>
<Controller /> represents a THREE.XRTargetRaySpace, a THREE.XRGripSpace, and a controller model for a specified hand.
<Controller left />
<Controller right />It will by default load a controller model that attempts to match the physical controller.
Default controller 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.
<Controller> can accept three slots.
If a default slot is provided, the default controller model will not be rendered, and will be replaced with the slot content.
<Controller left>
<T.Mesh>
<T.IcosahedronGeometry args={[0.2]} />
<T.MeshStandardMaterial color='turquoise' />
</T.Mesh>
</Controller>Two additional slots exist to place children in the controller’s grip space and the controller’s target ray space.
<Controller left>
<T.Mesh slot='grip'>
<T.IcosahedronGeometry args={[0.2]} />
<T.MeshStandardMaterial color='hotpink' />
</T.Mesh>
<T.Mesh slot='target-ray'>
<T.IcosahedronGeometry args={[0.2]} />
<T.MeshStandardMaterial color='orange' />
</T.Mesh>
</Controller><script lang='ts'>
import { Canvas } from '@threlte/core'
import { VRButton } from '@threlte/xr'
import Scene from './Scene.svelte'
</script>
<Canvas>
<Scene />
</Canvas>
<VRButton /><script lang='ts'>
import * as THREE from 'three'
import { T, useFrame } from '@threlte/core'
import { Text } from '@threlte/extras'
import { Controller, type XRControllerEvent, useController } from '@threlte/xr'
type $$Props = { left: true } | { right: true }
let state = 'disconnected'
let cursor = 0
let text = ''
const count = 100
const positions = new Float32Array(count * 3)
const velocities = new Float32Array(count * 3)
const vec3 = new THREE.Vector3()
const matrix = new THREE.Matrix4()
const color = new THREE.Color()
const controller = useController($$restProps.left ? 'left' : 'right')
const instancedMesh = new THREE.InstancedMesh(
new THREE.IcosahedronGeometry(0.01),
new THREE.MeshPhongMaterial(),
count
)
const colorMap = {
connected: 'green',
disconnected: 'crimson',
selectstart: 'darkorchid',
selectend: 'darkmagenta',
select: 'darkmagenta',
squeezestart: 'lightcoral',
squeezeend: 'indianred',
squeeze: 'indianred',
pinchstart: 'lightcyan',
pinchend: 'lightblue',
} as const
const handleEvent = (event: XRControllerEvent) => {
text = `${event.data.handedness} ${event.type}`
state = event.type
}
const fireParticle = () => {
instancedMesh.setColorAt(cursor, color.setStyle(colorMap[state]))
instancedMesh.instanceColor!.needsUpdate = true
let i = cursor * 3
const ray = controller.current?.targetRay
ray?.getWorldDirection(vec3).negate().multiplyScalar(0.015)
vec3.x += (Math.random() - 0.5) * 0.012
vec3.y += (Math.random() - 0.5) * 0.012
vec3.z += (Math.random() - 0.5) * 0.012
const { x = 0, y = 0, z = 0 } = ray?.position ?? {}
positions[i] = x
positions[i + 1] = y
positions[i + 2] = z
velocities[i] = vec3.x
velocities[i + 1] = vec3.y
velocities[i + 2] = vec3.z
cursor += 1
cursor %= count
}
const updateParticles = () => {
for (let i = 0, j = 0; i < count; i += 1, j += 3) {
positions[j] += velocities[j]!
positions[j + 1] += velocities[j + 1]!
positions[j + 2] += velocities[j + 2]!
matrix.setPosition(positions[j]!, positions[j + 1], positions[j + 2])
instancedMesh.setMatrixAt(i, matrix)
}
instancedMesh.instanceMatrix.needsUpdate = true
}
useFrame(() => {
updateParticles()
switch (state) {
case 'squeezestart':
case 'selectstart':
return fireParticle()
}
})
</script>
<Controller
left={$$props.left}
right={$$props.right}
on:connected={handleEvent}
on:disconnected={handleEvent}
on:selectstart={handleEvent}
on:selectend={handleEvent}
on:select={handleEvent}
on:squeezestart={handleEvent}
on:squeezeend={handleEvent}
on:squeeze={handleEvent}>
<Text slot='target-ray' fontSize={0.05} {text} position.x={0.1} />
</Controller>
<T is={instancedMesh} frustumCulled={false} /><script lang='ts'>
import * as THREE from 'three'
import { T, useThrelte } from '@threlte/core'
import { XR } from '@threlte/xr'
import Controller from './Controller.svelte'
const { scene } = useThrelte()
scene.fog = new THREE.Fog('black', 1.5, 2)
scene.background = new THREE.Color('black')
</script>
<XR>
<Controller left />
<Controller right />
</XR>
<T.AmbientLight intensity={1.5} />
<T.DirectionalLight intensity={1.5} />