@threlte/xr
<XR>
The <XR> component prepares your scene for a WebXR session. It sets up context that is provided by the useXR hook.
Usage
<script>
import { XR } from '@threlte/xr'
import { Text } from '@threlte/extras'
</script>
<XR>
<Text
position={[0, 1.6, -1]}
text="I have entered another realm!"
/>
</XR>The <XR> component will set the <Canvas> property renderMode="always" when the user enters an XR session, due to being incompatible with on-demand or manual. It will set the original value once the session has ended.
Any children of the <XR> component will not mount until the user enters an immersive session. This is useful for adding controllers, hands, or entire scenes that should only start when the user has begun their session.
Fallback
XR sessions have to be requested actively and you might want to show contents to the user before they have entered an immersive session. You can use the fallback slot to show a fallback scene to the user.
<script>
import { T } from '@threlte/core'
import { XR, Controller } from '@threlte/xr'
import { OrbitControls } from '@threlte/extras'
import Scene from './Scene.svelte'
</script>
<Scene />
<XR>
<Controller left>
<Controller right>
<svelte:fragment slot="fallback">
<T.PerspectiveCamera makeDefault position.z={5}>
<OrbitControls />
</T.PerspectiveCamera>
</svelte:fragment>
</XR>