refactor: move session mode check to root

importantimport · Oct 5, 2024 · 718ef3a · 718ef3a
1 parent 2c386bd
commit 718ef3a
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 55 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,6 +1,6 @@
 import { OrbitControls } from '@react-three/drei'
 import { Canvas } from '@react-three/fiber'
-import { createXRStore, XR, XROrigin } from '@react-three/xr'
+import { createXRStore, IfInSessionMode, XR, XROrigin } from '@react-three/xr'
 import { Leva } from 'leva'
 
 import { Model } from './components/model'
@@ -11,6 +11,7 @@ import { Toolbar } from './components/toolbar'
 export const App = () => {
   const store = createXRStore({
     controller: { teleportPointer: true },
+    depthSensing: true,
     emulate: import.meta.env.DEV ? 'metaQuest3' : false,
     hand: {
       rayPointer: { cursorModel: { color: 'white' } },
@@ -27,16 +28,18 @@ export const App = () => {
           <group position={[0, 0, 2]}>
             <XROrigin />
           </group>
-          <Perf />
-          <Toolbar />
-          <Stage>
-            <Model />
+          <IfInSessionMode deny={['immersive-ar', 'immersive-vr']}>
+            <Perf />
+            <Toolbar />
             <OrbitControls
               makeDefault
               maxPolarAngle={Math.PI / 1.9}
               minPolarAngle={0}
               target={[0, 1, 0]}
             />
+          </IfInSessionMode>
+          <Stage>
+            <Model />
           </Stage>
         </XR>
       </Canvas>

diff --git a/src/components/perf.tsx b/src/components/perf.tsx
@@ -1,4 +1,3 @@
-import { IfInSessionMode } from '@react-three/xr'
 import { useControls } from 'leva'
 import { Perf as R3FPerf } from 'r3f-perf'
 
@@ -7,9 +6,5 @@ export const Perf = () => {
     showPerf: import.meta.env.DEV,
   })
 
-  return showPerf && (
-    <IfInSessionMode deny={['immersive-ar', 'immersive-vr']}>
-      <R3FPerf position="top-left" />
-    </IfInSessionMode>
-  )
+  return showPerf && (<R3FPerf position="top-left" />)
 }
diff --git a/src/components/toolbar.tsx b/src/components/toolbar.tsx
@@ -1,7 +1,7 @@
 import { Fullscreen, Text } from '@react-three/uikit'
 import { Button, Card } from '@react-three/uikit-apfel'
 import { BoxIcon, GithubIcon, PlayIcon, ScanIcon } from '@react-three/uikit-lucide'
-import { IfInSessionMode, useXRStore } from '@react-three/xr'
+import { useXRStore } from '@react-three/xr'
 import { useControls } from 'leva'
 
 export const Toolbar = () => {
@@ -11,51 +11,49 @@ export const Toolbar = () => {
   })
 
   return showToolbar && (
-    <IfInSessionMode deny={['immersive-ar', 'immersive-vr']}>
-      <Fullscreen
-        alignItems="flex-end"
+    <Fullscreen
+      alignItems="flex-end"
+      flexDirection="row"
+      justifyContent="center"
+      padding={12}
+    >
+      <Card
+        alignItems="center"
+        borderRadius={24}
         flexDirection="row"
-        justifyContent="center"
-        padding={12}
+        gap={12}
+        justifyContent="space-between"
+        padding={8}
       >
-        <Card
-          alignItems="center"
-          borderRadius={24}
-          flexDirection="row"
-          gap={12}
-          justifyContent="space-between"
-          padding={8}
-        >
 
-          <Button
-            onClick={() => window.open('https://github.com/importantimport/mikumikumixed')}
-            variant="icon"
-          >
-            <GithubIcon />
-          </Button>
-          <Button
-            gap={8}
-            onClick={() => store.enterVR()}
-            platter
-            variant="rect"
-          >
-            <BoxIcon />
-            <Text>Enter VR</Text>
-          </Button>
-          <Button
-            gap={8}
-            onClick={() => store.enterAR()}
-            platter
-            variant="rect"
-          >
-            <ScanIcon />
-            <Text>Enter AR</Text>
-          </Button>
-          <Button disabled variant="icon">
-            <PlayIcon />
-          </Button>
-        </Card>
-      </Fullscreen>
-    </IfInSessionMode>
+        <Button
+          onClick={() => window.open('https://github.com/importantimport/mikumikumixed')}
+          variant="icon"
+        >
+          <GithubIcon />
+        </Button>
+        <Button
+          gap={8}
+          onClick={() => store.enterVR()}
+          platter
+          variant="rect"
+        >
+          <BoxIcon />
+          <Text>Enter VR</Text>
+        </Button>
+        <Button
+          gap={8}
+          onClick={() => store.enterAR()}
+          platter
+          variant="rect"
+        >
+          <ScanIcon />
+          <Text>Enter AR</Text>
+        </Button>
+        <Button disabled variant="icon">
+          <PlayIcon />
+        </Button>
+      </Card>
+    </Fullscreen>
   )
 }