<VRButton>

<VRButton /> is an HTML <button /> that can be used to init a VR session. It will also display info about browser support.

Show Code

• App.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, useTask } from '@threlte/core'
  import { RoundedBoxGeometry } from '@threlte/extras'
  import { XR } from '@threlte/xr'

  let rotation = $state(0)

  useTask((delta) => {
    rotation += delta
  })
</script>

<XR />

<T.AmbientLight />
<T.DirectionalLight
  position.y={10}
  position.z={10}
/>

<T.PerspectiveCamera
  makeDefault
  position.y={1.8}
  position.z={1}
/>

<T.Mesh
  position.y={1.8}
  rotation.x={rotation}
  rotation.y={rotation}
>
  <RoundedBoxGeometry args={[0.2, 0.2, 0.2]} />
  <T.MeshStandardMaterial color="orange" />
</T.Mesh>

<T.Mesh>
  <T.CylinderGeometry args={[3, 0.01]} />
  <T.MeshStandardMaterial color="turquoise" />
</T.Mesh>

Component Signature

Events

name

payload

description

---

click

CustomEvent<'unsupported' | 'insecure' | 'blocked' | 'supported'>

Fired when a user clicks the VR button.

---

error

CustomEvent<Error>

Fired when an enter / exit session error occurs.