XR component boilerplate

playground/src/pages/basics/XR.vue

@@ -1,12 +1,18 @@
 <script setup lang="ts">
   import { TresCanvas } from '@tresjs/core'
-  import { VRButton } from '@tresjs/xr'
+  import { VRButton, XR } from '@tresjs/xr'
 </script>
 
 <template>
   <div>
-    <VRButton>Immersive Experience</VRButton>
+    <VRButton />
     <TresCanvas window-size>
+      <XR>
+        <TresMesh>
+          <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+          <TresMeshBasicMaterial color="blue" />
+        </TresMesh>
+      </XR>
       <TresMesh>
         <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
         <TresMeshBasicMaterial color="orange" />

src/components/XR.vue

@@ -0,0 +1,40 @@
+<template>
+    <TresGroup>
+        <slot />
+    </TresGroup>
+</template>
+
+<script setup lang="ts">
+    export interface XRProps {
+        /**
+         * Enables foveated rendering. `Default is `0`
+         * 0 = no foveation, full resolution
+         * 1 = maximum foveation, the edges render at lower resolution
+         */
+        foveation?: number
+        /**
+         * The target framerate for the XRSystem. Smaller rates give more CPU headroom at the cost of responsiveness.
+         * Recommended range is `72`-`120`. Default is unset and left to the device.
+         * @note If your experience cannot effectively reach the target framerate, it will be subject to frame reprojection
+         * which will halve the effective framerate. Choose a conservative estimate that balances responsiveness and
+         * headroom based on your experience.
+         * @see https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Rendering#refresh_rate_and_frame_rate
+         */
+        frameRate?: number
+        /** Type of WebXR reference space to use. Default is `local-floor` */
+        referenceSpace?: XRReferenceSpaceType
+        /** Called as an XRSession is requested */
+        onSessionStart?: XREventHandler<XRManagerEvent>
+        /** Called after an XRSession is terminated */
+        onSessionEnd?: XREventHandler<XRManagerEvent>
+        /** Called when an XRSession is hidden or unfocused. */
+        onVisibilityChange?: XREventHandler<XRSessionEvent>
+        /** Called when available inputsources change */
+        onInputSourcesChange?: XREventHandler<XRSessionEvent>
+    }
+
+    /**
+      * Props 
+      */
+    const props = defineProps<XRProps>()
+</script>

src/components/index.ts

@@ -1,7 +1,8 @@
 import ARButton from './ARButton.vue'
 import VRButton from './VRButton.vue'
 import XRButton from './XRButton.vue'
+import XR from './XR.vue'
 
 export {
-    ARButton, VRButton, XRButton
+    ARButton, VRButton, XRButton, XR
 }

src/composables/useXR.ts

@@ -0,0 +1,19 @@
+// export function useXR<T = XRState>(
+//     selector: StateSelector<XRState, T> = (state) => state as unknown as T,
+//     equalityFn?: EqualityChecker<T>
+//   ) {
+//     const store = React.useContext(XRContext)
+//     if (!store) throw new Error('useXR must be used within an <XR /> component!')
+//     return store(selector, equalityFn)
+//   }
+
+//   export function useController(handedness: XRHandedness) {
+//     const controllers = useXR((state) => state.controllers)
+//     const controller = React.useMemo(
+//       () => controllers.find(({ inputSource }) => inputSource?.handedness && inputSource.handedness === handedness),
+//       [handedness, controllers]
+//     )
+
+//     return controller
+//   }
+