feat: add r3f-perf

importantimport · Oct 5, 2024 · c05d35c · c05d35c
1 parent 82b4b14
commit c05d35c
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "forgetti": "^0.8.5",
     "foxact": "^0.2.38",
     "leva": "^0.9.35",
+    "r3f-perf": "^7.2.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "three": "^0.169.0"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.tsx b/src/app.tsx
@@ -4,6 +4,7 @@ import { createXRStore, XR, XROrigin } from '@react-three/xr'
 
 import { Appbar } from './components/appbar'
 import { Model } from './components/model'
+import { Perf } from './components/perf'
 import { Stage } from './components/stage'
 
 export const App = () => {
@@ -23,6 +24,7 @@ export const App = () => {
         <group position={[0, 0, 2]}>
           <XROrigin />
         </group>
+        <Perf />
         <Appbar />
         <Stage>
           <Model />

diff --git a/src/components/perf.tsx b/src/components/perf.tsx
@@ -0,0 +1,15 @@
+import { IfInSessionMode } from '@react-three/xr'
+import { useControls } from 'leva'
+import { Perf as R3FPerf } from 'r3f-perf'
+
+export const Perf = () => {
+  const { showPerf } = useControls('Debug', {
+    showPerf: import.meta.env.DEV,
+  })
+
+  return showPerf && (
+    <IfInSessionMode deny={['immersive-ar', 'immersive-vr']}>
+      <R3FPerf position="top-left" />
+    </IfInSessionMode>
+  )
+}