diff --git a/package.json b/package.json
index e36e1f8..2d89948 100644
--- 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
index 70b2740..16e29a0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
leva:
specifier: ^0.9.35
version: 0.9.35(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ r3f-perf:
+ specifier: ^7.2.2
+ version: 7.2.2(@react-three/fiber@8.17.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(three@0.169.0))(@types/react@18.3.10)(@types/three@0.169.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(three@0.169.0)
react:
specifier: ^18.3.1
version: 18.3.1
@@ -702,6 +705,11 @@ packages:
'@types/react-dom':
optional: true
+ '@radix-ui/react-icons@1.3.0':
+ resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
+ peerDependencies:
+ react: ^16.x || ^17.x || ^18.x
+
'@radix-ui/react-id@1.1.0':
resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
peerDependencies:
@@ -1266,6 +1274,14 @@ packages:
peerDependencies:
react: '>= 16.8.0'
+ '@utsubo/events@0.1.7':
+ resolution: {integrity: sha512-WB/GEj/0h27Bz8rJ0+CBtNz5mLT79ne1OjB7PUM4n0qLBqEDwm6yBzZC3j6tasHjlBPJDYZiBVIA1glaMlgZ5g==}
+ peerDependencies:
+ react: '>=16.8.0'
+ peerDependenciesMeta:
+ react:
+ optional: true
+
'@vitejs/plugin-react-swc@3.7.1':
resolution: {integrity: sha512-vgWOY0i1EROUK0Ctg1hwhtC3SdcDjZcdit4Ups4aPkDcB1jYhmo+RMYWY87cmXMhvtD5uf8lV89j2w16vkdSVg==}
peerDependencies:
@@ -1930,6 +1946,9 @@ packages:
resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
engines: {node: '>=0.10.0'}
+ eventemitter3@4.0.7:
+ resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+
extend-shallow@2.0.1:
resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
engines: {node: '>=0.10.0'}
@@ -2738,6 +2757,22 @@ packages:
queue-microtask@1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+ r3f-perf@7.2.2:
+ resolution: {integrity: sha512-ERJuHVue0uTZT3Wn4KYNtT0OfSrQf3JqEBz4IjBgkZJYPdrRq6LEZhuGPJBLakrFsPDmngFFWw5/fxDXN3qiSQ==}
+ peerDependencies:
+ '@react-three/fiber': '>=8.0'
+ dom: '*'
+ react: '>=18.0'
+ react-dom: '>=18.0'
+ three: '>=0.133'
+ peerDependenciesMeta:
+ '@react-three/fiber':
+ optional: true
+ dom:
+ optional: true
+ react-dom:
+ optional: true
+
react-colorful@5.6.1:
resolution: {integrity: sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==}
peerDependencies:
@@ -3988,6 +4023,10 @@ snapshots:
'@types/react': 18.3.10
'@types/react-dom': 18.3.0
+ '@radix-ui/react-icons@1.3.0(react@18.3.1)':
+ dependencies:
+ react: 18.3.1
+
'@radix-ui/react-id@1.1.0(@types/react@18.3.10)(react@18.3.1)':
dependencies:
'@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.10)(react@18.3.1)
@@ -4574,6 +4613,12 @@ snapshots:
'@use-gesture/core': 10.3.1
react: 18.3.1
+ '@utsubo/events@0.1.7(react@18.3.1)':
+ dependencies:
+ eventemitter3: 4.0.7
+ optionalDependencies:
+ react: 18.3.1
+
'@vitejs/plugin-react-swc@3.7.1(vite@5.4.8(@types/node@22.7.4))':
dependencies:
'@swc/core': 1.7.26
@@ -5381,6 +5426,8 @@ snapshots:
esutils@2.0.3: {}
+ eventemitter3@4.0.7: {}
+
extend-shallow@2.0.1:
dependencies:
is-extendable: 0.1.1
@@ -6305,6 +6352,23 @@ snapshots:
queue-microtask@1.2.3: {}
+ r3f-perf@7.2.2(@react-three/fiber@8.17.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(three@0.169.0))(@types/react@18.3.10)(@types/three@0.169.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(three@0.169.0):
+ dependencies:
+ '@radix-ui/react-icons': 1.3.0(react@18.3.1)
+ '@react-three/drei': 9.114.0(@react-three/fiber@8.17.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(three@0.169.0))(@types/react@18.3.10)(@types/three@0.169.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(three@0.169.0)
+ '@stitches/react': 1.2.8(react@18.3.1)
+ '@utsubo/events': 0.1.7(react@18.3.1)
+ react: 18.3.1
+ three: 0.169.0
+ zustand: 4.5.5(@types/react@18.3.10)(react@18.3.1)
+ optionalDependencies:
+ '@react-three/fiber': 8.17.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(three@0.169.0)
+ react-dom: 18.3.1(react@18.3.1)
+ transitivePeerDependencies:
+ - '@types/react'
+ - '@types/three'
+ - immer
+
react-colorful@5.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
react: 18.3.1
diff --git a/src/app.tsx b/src/app.tsx
index 8d81f83..5d10102 100644
--- 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 = () => {
+
diff --git a/src/components/perf.tsx b/src/components/perf.tsx
new file mode 100644
index 0000000..88e0154
--- /dev/null
+++ 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 && (
+
+
+
+ )
+}