simple

package.json

@@ -9,26 +9,23 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.0",
-    "@react-three/drei": "^9.102.6",
-    "@react-three/fiber": "^8.15.19",
-    "@react-three/rapier": "^1.3.0",
-    "@react-three/xr": "^5.7.1",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@react-three/drei": "^9.112.0",
+    "@react-three/fiber": "^8.17.7",
     "leva": "^0.9.35",
-    "nipplejs": "^0.10.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "three": "^0.162.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "three": "^0.168.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.69",
-    "@types/react-dom": "^18.2.22",
-    "@types/three": "^0.162.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.57.0",
+    "@types/react": "^18.3.7",
+    "@types/react-dom": "^18.3.0",
+    "@types/three": "^0.168.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.57.1",
     "eslint-config-react-app": "^7.0.1",
-    "typescript": "^5.4.3",
-    "vite": "^5.2.3"
+    "typescript": "^5.6.2",
+    "vite": "^5.4.6"
   }
 }

src/App.tsx

@@ -1,20 +1,14 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import styled from "@emotion/styled";
-import { Canvas, useThree } from "@react-three/fiber";
-import { useKeyboardControls } from "@react-three/drei";
-import { Physics } from "@react-three/rapier";
-import { XR, Controllers, Hands, VRButton, Interactive } from "@react-three/xr";
+import { Canvas } from "@react-three/fiber";
 
 import Layout from "./Layout";
 import Cube from "./components/Cube";
-import Ball from "./components/Ball";
 import Ground from "./components/Ground";
-import { Rope } from "./components/Rope";
 
 function App() {
   return (
     <Styled>
-      <VRButton />
       <Canvas
         shadows
         // camera={{
@@ -23,21 +17,9 @@ function App() {
         // }}
         //
       >
-        <XR>
-          <Controllers />
-          <Hands />
-
-          <Physics
-            debug
-            gravity={[0, -60, 0]}
-            // timeStep={1 / 60}
-            //
-          >
-            <Layout>
-              <Scene />
-            </Layout>
-          </Physics>
-        </XR>
+        <Layout>
+          <Scene />
+        </Layout>
       </Canvas>
     </Styled>
   );
@@ -49,34 +31,9 @@ export const Styled = styled.div`
 export default App;
 
 function Scene() {
-  const [clr, setClr] = useState<string | undefined>(undefined);
-  //
-  // ESC key to exit XR
-  //
-
-  const gl = useThree((state) => state.gl);
-  // gl.xr.setFramebufferScaleFactor(2.0);
-
-  const escPressed = useKeyboardControls((state) => state.esc);
-  useEffect(() => {
-    gl.xr.getSession()?.end(); // https://stackoverflow.com/a/71566927/133327
-  }, [escPressed, gl.xr]);
-
   return (
     <>
-      <Interactive
-        onHover={(e) => {
-          console.log("hover");
-          setClr("brown");
-        }}
-        onBlur={(e) => setClr(undefined)}
-      >
-        <Cube position-y={1} color={clr} />
-      </Interactive>
-      <Ball />
-
-      <Rope length={5} position={[3, 1, 0]} />
-
+      <Cube position-y={1} />
       <Ground />
     </>
   );