@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>
<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 = 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>