threlte logo
@threlte/xr

<VRButton>

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

<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 { T, useFrame } from '@threlte/core'
	import { RoundedBoxGeometry } from '@threlte/extras';
	import { XR } from '@threlte/xr'

	let rotation = 0
	useFrame(() => {
		rotation += 0.01
	})
</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.