enable VR for the pingpong example to test with AVP

pmndrs · Jul 17, 2024 · 71a94d3 · 71a94d3
1 parent 38971b4
commit 71a94d3
Showing 1 changed file with 37 additions and 13 deletions.
diff --git a/examples/pingpong/src/App.jsx b/examples/pingpong/src/App.jsx
@@ -13,27 +13,51 @@ const store = createXRStore({ hand: Hand })
 export function App() {
   return (
     <>
-      <button
+      <div
         style={{
+          display: 'flex',
+          flexDirection: 'row',
+          gap: '1rem',
           position: 'absolute',
           zIndex: 10000,
-          background: 'black',
-          borderRadius: '0.5rem',
-          border: 'none',
-          fontWeight: 'bold',
-          color: 'white',
-          padding: '1rem 2rem',
-          cursor: 'pointer',
-          fontSize: '1.5rem',
           bottom: '1rem',
           left: '50%',
-          boxShadow: '0px 0px 20px rgba(0,0,0,1)',
           transform: 'translate(-50%, 0)',
         }}
-        onClick={() => store.enterAR()}
       >
-        Enter AR
-      </button>
+        <button
+          style={{
+            background: 'black',
+            borderRadius: '0.5rem',
+            border: 'none',
+            fontWeight: 'bold',
+            color: 'white',
+            padding: '1rem 2rem',
+            cursor: 'pointer',
+            fontSize: '1.5rem',
+            boxShadow: '0px 0px 20px rgba(0,0,0,1)',
+          }}
+          onClick={() => store.enterAR()}
+        >
+          Enter AR
+        </button>
+        <button
+          style={{
+            background: 'black',
+            borderRadius: '0.5rem',
+            border: 'none',
+            fontWeight: 'bold',
+            color: 'white',
+            padding: '1rem 2rem',
+            cursor: 'pointer',
+            fontSize: '1.5rem',
+            boxShadow: '0px 0px 20px rgba(0,0,0,1)',
+          }}
+          onClick={() => store.enterVR()}
+        >
+          Enter VR
+        </button>
+      </div>
       <Canvas shadows dpr={[1, 1.5]}>
         <Physics maxCcdSubsteps={10} gravity={[0, -5, 0]} timeStep="vary">
           <XR store={store}>