AR/VR Button abstractions

playground/src/pages/basics/XR.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
   import { TresCanvas } from '@tresjs/core'
-  import { XRButton } from '@tresjs/xr'
+  import { VRButton } from '@tresjs/xr'
 </script>
 
 <template>
   <div>
-    <XRButton mode="VR">Immersive Experience</XRButton>
+    <VRButton>Immersive Experience</VRButton>
     <TresCanvas window-size>
       <TresMesh>
         <TresTorusGeometry :args="[1, 0.5, 16, 32]" />

src/components/ARButton.vue

@@ -1,11 +1,9 @@
 <template>
-    <XrButton>
-        Ar
-    </XrButton>
+    <XRButton mode="AR" :style="buttonStyles"></XRButton>
 </template>
 
-<script setup>
+<script setup lang="ts">
     import XRButton from './XRButton.vue'
 
-    // import buttonStyles from './buttonStyles'
+    import { buttonStyles } from './buttonStyles'
 </script>

src/components/VRButton.vue

@@ -1,9 +1,11 @@
 <template>
-    <XrButton>
-        Vr
-    </XrButton>
+    <XRButton mode="VR" v-bind="{sessionInit}" :style="buttonStyles"></XRButton>
 </template>
 
-<script setup>
+<script setup lang="ts">
     import XRButton from './XRButton.vue'
+
+    import { buttonStyles } from './buttonStyles'
+
+    const sessionInit = { optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers'] }
 </script>

src/components/XRButton.vue

@@ -1,16 +1,13 @@
 <template>
-    <div>
-        <button @click="handleButtonClick" :style="buttonStyles">
-            {{ label }}
-        </button>
-    </div>
+    <button @click="handleButtonClick">
+        {{ label }}
+    </button>
 </template>
 
 <script setup lang="ts">
     import { computed, ref, onMounted } from 'vue'
     import type { Ref } from 'vue'
     import create from 'vue-zustand'
-    import { buttonStyles } from './buttonStyles'
 
     /**
      * Filters to unique entries of an array.

src/components/index.ts

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