feat: add teleport

src/app.tsx

@@ -1,12 +1,13 @@
 import { OrbitControls } from '@react-three/drei'
 import { Canvas } from '@react-three/fiber'
-import { createXRStore, IfInSessionMode, XR, XROrigin } from '@react-three/xr'
+import { createXRStore, IfInSessionMode, XR } from '@react-three/xr'
 import { Leva } from 'leva'
 
 import { Model } from './components/model'
 import { Perf } from './components/perf'
 import { Stage } from './components/stage'
 import { Toolbar } from './components/toolbar'
+import { Origin } from './components/xr/origin'
 
 export const App = () => {
   const store = createXRStore({
@@ -25,9 +26,7 @@ export const App = () => {
       <Leva />
       <Canvas camera={{ position: [0, 0, 2] }} shadows style={{ flexGrow: 1, width: '100%' }}>
         <XR store={store}>
-          <group position={[0, 0, 2]}>
-            <XROrigin />
-          </group>
+          <Origin />
           <IfInSessionMode deny={['immersive-ar', 'immersive-vr']}>
             <Perf />
             <Toolbar />

src/components/xr/origin.tsx

@@ -0,0 +1,28 @@
+import { TeleportTarget, XROrigin } from '@react-three/xr'
+import { useState } from 'react'
+import { Vector3 } from 'three'
+
+export const Origin = () => {
+  const [position, setPosition] = useState(new Vector3(0, 0, 2))
+
+  /** @see {@link https://pmndrs.github.io/xr/docs/tutorials/teleport} */
+  return (
+    <>
+      <XROrigin position={position} />
+      <TeleportTarget onTeleport={setPosition}>
+        <mesh position={[0, 0, 0]} scale={[0.5, 0.001, 0.5]}>
+          <sphereGeometry />
+          <meshPhysicalMaterial
+            color="white"
+            ior={1.5}
+            opacity={0.15}
+            specularColor="white"
+            specularIntensity={1}
+            transmission={1}
+            transparent
+          />
+        </mesh>
+      </TeleportTarget>
+    </>
+  )
+}