<Headset>

<Headset /> provides the ability to attach objects to the pose of the user’s headset.

<script>
  import { Headset } from '@threlte/xr'
  import { AudioListener } from '@threlte/extras'
</script>

<Headset>
  <AudioListener />
</Headset>

If you need to only read from the current headset pose, the useHeadset hook is available.

Like a Portal, you can place it anywhere in your Threlte application.

<Headset> will sync position and rotation with the current camera when not in an immersive XR session.

Show Code

• App.svelte
• Microphone.svelte
• Scene.svelte

<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 { T, type Props } from '@threlte/core'
  import { Edges } from '@threlte/extras'
  import type { Mesh } from 'three'

  let { ...rest }: Props<Mesh> = $props()
</script>

<T.Mesh {...rest}>
  {@const size = 0.005}
  {@const length = size * 14}
  <T.CylinderGeometry args={[size, size, length]} />
  <T.MeshStandardMaterial color="#eedbcb" />

  <Edges
    color="black"
    scale={1.001}
    thresholdAngle={20}
  />

  <T.Mesh
    position={[size * 4, -length, 0]}
    rotation.z={Math.PI / 5}
  >
    <T.CylinderGeometry args={[size, size, length]} />
    <T.MeshStandardMaterial color="#eedbcb" />

    <Edges
      color="black"
      scale={1.001}
      thresholdAngle={20}
    />

    <T.Mesh
      position={[0, -size * 8, 0]}
      rotation.z={Math.PI / 4}
    >
      <T.IcosahedronGeometry args={[size * 3, 2]} />
      <T.MeshStandardMaterial color="gray" />

      <Edges
        color="black"
        scale={1.001}
        thresholdAngle={20}
      />
    </T.Mesh>
  </T.Mesh>
</T.Mesh>

<script lang="ts">
  import { T } from '@threlte/core'
  import { Headset, XR, useXR } from '@threlte/xr'
  import { AudioListener } from '@threlte/extras'
  import { MathUtils } from 'three'
  import Turntable from '../../extras/positional-audio/Turntable.svelte'
  import Speaker from '../../extras/positional-audio/Speaker.svelte'
  import Microphone from './Microphone.svelte'

  let turntable = $state.raw<Turntable>()

  const { isPresenting } = useXR()

  let volume = $state(0)

  $effect.pre(() => {
    if ($isPresenting) turntable?.toggle()
  })
</script>

<XR>
  <Headset>
    <Microphone
      position={[-0.1, -0.05, -0.1]}
      rotation.x={Math.PI / 3}
    />
  </Headset>
</XR>

<Headset>
  <AudioListener />
</Headset>

<T.Group
  position={[0, 0.6, -0.5]}
  scale={0.08}
>
  <Turntable
    bind:this={turntable}
    bind:volume
  />
  <Speaker
    position.x={6}
    rotation.y={MathUtils.DEG2RAD * -7}
    {volume}
  />
  <Speaker
    position.x={-6}
    rotation.y={MathUtils.DEG2RAD * 7}
    {volume}
  />
</T.Group>

<T.PerspectiveCamera
  makeDefault
  near={0.001}
  position={[0, 1, 2]}
/>

<T.AmbientLight />
<T.DirectionalLight />