simple

Author: abernier

.devcontainer/devcontainer.json

@@ -4,7 +4,7 @@
   //
   // this is inspired from https://youtu.be/AYRxDoUxcfQ?t=1103s (see: https://github.com/github/codespaces-preact/blob/782235cc78702dc2a46a6906979356b51ac269d5/.devcontainer/devcontainer.json)
   //
-  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:20",
+  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:22",
   // "hostRequirements": {
   //   "cpus": 4
   // },
@@ -17,10 +17,8 @@
       "openFiles": ["src/App.tsx"]
     },
     "vscode": {
-      "settings": {},			
-      "extensions": [
-        "dbaeumer.vscode-eslint"
-      ]
+      "settings": {},
+      "extensions": ["dbaeumer.vscode-eslint"]
     }
   },
   "portsAttributes": {

.github/workflows/deploy.yml

@@ -27,11 +27,8 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: "20"
-          cache: "npm"
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
       - run: npm ci
       - run: npx vite build --base="/$REPONAME/"
         env:

README.md

@@ -1,4 +1,4 @@
-Try on: [Codespace](https://github.com/codespaces/new?template_repository=abernier%2Ftpl-react-three) | [StackBlitz](https://stackblitz.com/github/abernier/tpl-react-three) | [Codesandbox](https://codesandbox.io/s/github/abernier/tpl-react-three)
+Try on: [Codespace](https://github.com/codespaces/new?template_repository=abernier%2Ftpl-react-three-simple) | [StackBlitz](https://stackblitz.com/github/abernier/tpl-react-three-simple) | [Codesandbox](https://codesandbox.io/s/github/abernier/tpl-react-three-simple)
 
 # INSTALL
 

package-lock.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"
   }
 }

package.json

@@ -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 />
     </>
   );