some bullshit

package-lock.json

@@ -8,6 +8,7 @@
       "name": "react-three-silly",
       "version": "0.0.0",
       "dependencies": {
+        "@react-three/drei": "^9.105.6",
         "@react-three/fiber": "^8.16.3",
         "@react-three/rapier": "^1.3.1",
         "@types/three": "^0.164.0",
@@ -997,6 +998,22 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mediapipe/tasks-vision": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.8.tgz",
+      "integrity": "sha512-Rp7ll8BHrKB3wXaRFKhrltwZl1CiXGdibPxuWXvqGnKTnv8fqa/nvftYNuSbf+pbJWKYCXdBtYTITdAUTGGh0Q=="
+    },
+    "node_modules/@monogrid/gainmap-js": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.0.5.tgz",
+      "integrity": "sha512-53sCTG4FaJBaAq/tcufARtVYDMDGqyBT9i7F453pWGhZ5LqubDHDWtYoHo9VhQqMcHTEexdJqSsR58y+9HVmQA==",
+      "dependencies": {
+        "promise-worker-transferable": "^1.0.4"
+      },
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1032,6 +1049,136 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@react-spring/animated": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.6.1.tgz",
+      "integrity": "sha512-ls/rJBrAqiAYozjLo5EPPLLOb1LM0lNVQcXODTC1SMtS6DbuBCPaKco5svFUQFMP2dso3O+qcC4k9FsKc0KxMQ==",
+      "dependencies": {
+        "@react-spring/shared": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.6.1.tgz",
+      "integrity": "sha512-3HAAinAyCPessyQNNXe5W0OHzRfa8Yo5P748paPcmMowZ/4sMfaZ2ZB6e5x5khQI8NusOHj8nquoutd6FRY5WQ==",
+      "dependencies": {
+        "@react-spring/animated": "~9.6.1",
+        "@react-spring/rafz": "~9.6.1",
+        "@react-spring/shared": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-spring/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.6.1.tgz",
+      "integrity": "sha512-v6qbgNRpztJFFfSE3e2W1Uz+g8KnIBs6SmzCzcVVF61GdGfGOuBrbjIcp+nUz301awVmREKi4eMQb2Ab2gGgyQ=="
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.6.1.tgz",
+      "integrity": "sha512-PBFBXabxFEuF8enNLkVqMC9h5uLRBo6GQhRMQT/nRTnemVENimgRd+0ZT4yFnAQ0AxWNiJfX3qux+bW2LbG6Bw==",
+      "dependencies": {
+        "@react-spring/rafz": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/three": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.6.1.tgz",
+      "integrity": "sha512-Tyw2YhZPKJAX3t2FcqvpLRb71CyTe1GvT3V+i+xJzfALgpk10uPGdGaQQ5Xrzmok1340DAeg2pR/MCfaW7b8AA==",
+      "dependencies": {
+        "@react-spring/animated": "~9.6.1",
+        "@react-spring/core": "~9.6.1",
+        "@react-spring/shared": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": ">=6.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "three": ">=0.126"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.6.1.tgz",
+      "integrity": "sha512-POu8Mk0hIU3lRXB3bGIGe4VHIwwDsQyoD1F394OK7STTiX9w4dG3cTLljjYswkQN+hDSHRrj4O36kuVa7KPU8Q=="
+    },
+    "node_modules/@react-three/drei": {
+      "version": "9.105.6",
+      "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-9.105.6.tgz",
+      "integrity": "sha512-JBgYeV36N9N9f1c3o1ZfLYW4rXZA7UQTq32Y8s3DEF6lwj1/y+RP/yq2VG5I8OzUPl7gsmWdy8fpWZgrlAqUpQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "@mediapipe/tasks-vision": "0.10.8",
+        "@monogrid/gainmap-js": "^3.0.5",
+        "@react-spring/three": "~9.6.1",
+        "@use-gesture/react": "^10.2.24",
+        "camera-controls": "^2.4.2",
+        "cross-env": "^7.0.3",
+        "detect-gpu": "^5.0.28",
+        "glsl-noise": "^0.0.0",
+        "hls.js": "1.3.5",
+        "maath": "^0.10.7",
+        "meshline": "^3.1.6",
+        "react-composer": "^5.0.3",
+        "stats-gl": "^2.0.0",
+        "stats.js": "^0.17.0",
+        "suspend-react": "^0.1.3",
+        "three-mesh-bvh": "^0.7.0",
+        "three-stdlib": "^2.29.9",
+        "troika-three-text": "^0.49.0",
+        "tunnel-rat": "^0.1.2",
+        "utility-types": "^3.10.0",
+        "uuid": "^9.0.1",
+        "zustand": "^3.7.1"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": ">=8.0",
+        "react": ">=18.0",
+        "react-dom": ">=18.0",
+        "three": ">=0.137"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/drei/node_modules/fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg=="
+    },
+    "node_modules/@react-three/drei/node_modules/three-stdlib": {
+      "version": "2.29.11",
+      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.29.11.tgz",
+      "integrity": "sha512-vSyUavKCwOJQd2ch9IHhyJVx6eNG3y+z3/LulqHM7OLMy81OqnmIrvc2b4phKr/c1aVjHRNG2X7JOklfrDDcmQ==",
+      "dependencies": {
+        "@types/draco3d": "^1.4.0",
+        "@types/offscreencanvas": "^2019.6.4",
+        "@types/webxr": "^0.5.2",
+        "draco3d": "^1.4.1",
+        "fflate": "^0.6.9",
+        "potpack": "^1.0.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.128.0"
+      }
+    },
     "node_modules/@react-three/fiber": {
       "version": "8.16.3",
       "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.16.3.tgz",
@@ -1626,6 +1773,22 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/@use-gesture/core": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw=="
+    },
+    "node_modules/@use-gesture/react": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+      "dependencies": {
+        "@use-gesture/core": "10.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz",
@@ -1743,6 +1906,14 @@
         }
       ]
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -1828,6 +1999,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/camera-controls": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-2.8.3.tgz",
+      "integrity": "sha512-zFjqUR6onLkG+z1A6vAWfzovxZxWVSvp6e5t3lfZgfgPZtX3n74aykNAUaoRbq8Y3tOxadHkDjbfGDOP9hFf2w==",
+      "peerDependencies": {
+        "three": ">=0.126.1"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001616",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001616.tgz",
@@ -1902,11 +2081,27 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -1949,6 +2144,14 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/detect-gpu": {
+      "version": "5.0.38",
+      "resolved": "https://registry.npmjs.org/detect-gpu/-/detect-gpu-5.0.38.tgz",
+      "integrity": "sha512-36QeGHSXYcJ/RfrnPEScR8GDprbXFG4ZhXsfVNVHztZr38+fRxgHnJl3CjYXXjbeRUhu3ZZBJh6Lg0A9v0Qd8A==",
+      "dependencies": {
+        "webgl-constants": "^1.1.1"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2554,6 +2757,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/glsl-noise": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz",
+      "integrity": "sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w=="
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -2569,6 +2777,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.3.5.tgz",
+      "integrity": "sha512-uybAvKS6uDe0MnWNEPnO0krWVr+8m2R0hJ/viql8H3MVK+itq8gGQuIYoFHL3rECkIpNH98Lw8YuuWMKZxp3Ew=="
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -2597,6 +2810,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2677,11 +2895,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
-      "dev": true
     },
     "node_modules/its-fine": {
       "version": "1.2.5",
@@ -2788,6 +3010,14 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -2852,6 +3082,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshline": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/meshline/-/meshline-3.3.0.tgz",
+      "integrity": "sha512-EKKf2TLnfyqUeA7ryWFKgT9HchTMATvECGZnMQjtlcyxK0sB8shVLVkemBUp9dB3tkDEmoqQDLJCPStjkH8D7A==",
+      "peerDependencies": {
+        "three": ">=0.137"
+      }
+    },
     "node_modules/meshoptimizer": {
       "version": "0.18.1",
       "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
@@ -2926,6 +3164,14 @@
       "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
       "dev": true
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -3031,7 +3277,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3105,6 +3350,25 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/promise-worker-transferable": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/promise-worker-transferable/-/promise-worker-transferable-1.0.4.tgz",
+      "integrity": "sha512-bN+0ehEnrXfxV2ZQvU2PetO0n4gqBD4ulq3MI1WOPLgr7/Mg9yRQkX5+0v1vagr74ZTsl7XtzlaYDo2EuCeYJw==",
+      "dependencies": {
+        "is-promise": "^2.1.0",
+        "lie": "^3.0.2"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3145,6 +3409,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-composer": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/react-composer/-/react-composer-5.0.3.tgz",
+      "integrity": "sha512-1uWd07EME6XZvMfapwZmc7NgCZqDemcvicRi3wMJzXsQLvZ3L7fTHVyPy1bZdnWXM4iPjYuNE+uJ41MLKeTtnA==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -3165,6 +3440,11 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/react-reconciler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.27.0.tgz",
@@ -3211,6 +3491,14 @@
       "resolved": "https://registry.npmjs.org/regexp-to-ast/-/regexp-to-ast-0.5.0.tgz",
       "integrity": "sha512-tlbJqcMHnPKI9zSrystikWKwHkBqu2a/Sgw01h3zFjvYrMxEDYHzzoMZnUrbIfpTFEsoRnnviOXNCzFiSc54Qw=="
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3348,7 +3636,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -3360,7 +3647,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3383,6 +3669,31 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stats-gl": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/stats-gl/-/stats-gl-2.2.8.tgz",
+      "integrity": "sha512-94G5nZvduDmzxBS7K0lYnynYwreZpkknD8g5dZmU6mpwIhy3caCrjAm11Qm1cbyx7mqix7Fp00RkbsonzKWnoQ==",
+      "dependencies": {
+        "@types/three": "^0.163.0"
+      }
+    },
+    "node_modules/stats-gl/node_modules/@types/three": {
+      "version": "0.163.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.163.0.tgz",
+      "integrity": "sha512-uIdDhsXRpQiBUkflBS/i1l3JX14fW6Ot9csed60nfbZNXHDTRsnV2xnTVwXcgbvTiboAR4IW+t+lTL5f1rqIqA==",
+      "dependencies": {
+        "@tweenjs/tween.js": "~23.1.1",
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
+    "node_modules/stats.js": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz",
+      "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw=="
+    },
     "node_modules/string.prototype.codepointat": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz",
@@ -3443,6 +3754,14 @@
       "resolved": "https://registry.npmjs.org/three/-/three-0.164.1.tgz",
       "integrity": "sha512-iC/hUBbl1vzFny7f5GtqzVXYjMJKaTPxiCxXfrvVdBi1Sf+jhd1CAkitiFwC7mIBFCo3MrDLJG97yisoaWig0w=="
     },
+    "node_modules/three-mesh-bvh": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.7.4.tgz",
+      "integrity": "sha512-flxe0A4uflTPR6elgq/Y8VrLoljDNS899i422SxQcU3EtMj6o8z4kZRyqZqGWzR0qMf1InTZzY1/0xZl/rnvVw==",
+      "peerDependencies": {
+        "three": ">= 0.151.0"
+      }
+    },
     "node_modules/three-stdlib": {
       "version": "2.23.9",
       "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.23.9.tgz",
@@ -3495,6 +3814,33 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/troika-three-text": {
+      "version": "0.49.1",
+      "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.49.1.tgz",
+      "integrity": "sha512-lXGWxgjJP9kw4i4Wh+0k0Q/7cRfS6iOME4knKht/KozPu9GcFA9NnNpRvehIhrUawq9B0ZRw+0oiFHgRO+4Wig==",
+      "dependencies": {
+        "bidi-js": "^1.0.2",
+        "troika-three-utils": "^0.49.0",
+        "troika-worker-utils": "^0.49.0",
+        "webgl-sdf-generator": "1.1.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-three-utils": {
+      "version": "0.49.0",
+      "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.49.0.tgz",
+      "integrity": "sha512-umitFL4cT+Fm/uONmaQEq4oZlyRHWwVClaS6ZrdcueRvwc2w+cpNQ47LlJKJswpqtMFWbEhOLy0TekmcPZOdYA==",
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-worker-utils": {
+      "version": "0.49.0",
+      "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.49.0.tgz",
+      "integrity": "sha512-1xZHoJrG0HFfCvT/iyN41DvI/nRykiBtHqFkGaGgJwq5iXfIZFBiPPEHFpPpgyKM3Oo5ITHXP5wM2TNQszYdVg=="
+    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -3507,6 +3853,41 @@
         "typescript": ">=4.2.0"
       }
     },
+    "node_modules/tunnel-rat": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/tunnel-rat/-/tunnel-rat-0.1.2.tgz",
+      "integrity": "sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==",
+      "dependencies": {
+        "zustand": "^4.3.2"
+      }
+    },
+    "node_modules/tunnel-rat/node_modules/zustand": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz",
+      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -3583,6 +3964,34 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/utility-types": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
+      "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "5.2.11",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz",
@@ -3638,11 +4047,20 @@
         }
       }
     },
+    "node_modules/webgl-constants": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-constants/-/webgl-constants-1.1.1.tgz",
+      "integrity": "sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg=="
+    },
+    "node_modules/webgl-sdf-generator": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
+      "integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA=="
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@react-three/drei": "^9.105.6",
     "@react-three/fiber": "^8.16.3",
     "@react-three/rapier": "^1.3.1",
     "@types/three": "^0.164.0",

src/App.tsx

@@ -1,23 +1,16 @@
+import { PerspectiveCamera, StatsGl } from '@react-three/drei';
 import { Canvas, useFrame, useThree } from '@react-three/fiber'
 import { CuboidCollider, Physics, RigidBody } from '@react-three/rapier';
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { DirectionalLight, Euler, PCFSoftShadowMap, VSMShadowMap, Vector3 } from 'three';
-
+import { Player } from './Player';
-function Sub() {
-  const camera = useThree(s => s.camera);
-
-  camera.position.y = 2;
-  camera.position.z = 5;
-  camera.rotation.x = -(Math.PI / 6);
-  return <></>
-}
 
 function HeRotates() {
   const rotation = useRef(0);
   const objRef = useRef<DirectionalLight>(null);
   useFrame((three, dt) => {
     rotation.current += dt;
-    const radius = 5;
+    const radius = 3;
     const centerX = 0;
     const centerY = 0;
   
@@ -29,11 +22,46 @@ function HeRotates() {
     }
   });
   
-  return <directionalLight color="white" position={[0, 3, 0]} ref={objRef} intensity={3.0} castShadow={true} />
+  return <directionalLight color="white" position={[0, 10, 0]} ref={objRef} intensity={3.0} castShadow={true} />
 }
 
 function App() {
   const testRef = useRef();
+
+  const [cubes, setCubes] = useState([{
+    size: [1, 1, 1] as [number, number, number],
+    position: [0, 1, 0],
+    rotation: [0, 0, 0],
+    color: `#ff00ff`,
+    madeAt: Date.now()
+  }]);
+
+  useEffect(() => {
+    let newCubes = [];
+    for (let i = 0; i < 100; i++) {
+      let size = (Math.random() * 20) + 0.5
+      newCubes.push({
+        size: [
+          size, size, size
+        ],
+        position: [
+          (Math.random() * 400) - 200,
+          (Math.random() * 20) + 1,
+          (Math.random() * 400) - 200,
+        ],
+        rotation: [
+          (Math.random() * 2 * Math.PI) - Math.PI,
+          (Math.random() * 2 * Math.PI) - Math.PI,
+          (Math.random() * 2 * Math.PI) - Math.PI
+        ],
+        color: `#${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}`,
+        madeAt: `${i} + ${Date.now()}`
+      })
+    }
+
+    setCubes(c => ([...c, ...newCubes]));
+  }, []);
+
   window.amogus = testRef;
   return (
     <>
@@ -47,27 +75,37 @@ function App() {
         fov: 90
       }}
       >
-        <Sub />
+        <StatsGl />
         <ambientLight intensity={0.1} />
         <HeRotates />
         <Physics
+        gravity={[0, -30, 0]}
         debug
         >
+          <Player />
           <RigidBody friction={0} enabledRotations={[true, true, true]} mass={2}>
             <mesh position={new Vector3(0, 1.5, 0)} rotation={new Euler(-Math.PI/4, 0, -Math.PI/4)}  castShadow={true}>
               <boxGeometry args={[1, 1, 1]} />
-              <meshStandardMaterial color={'red'} />
+              <meshStandardMaterial color={'orange'} />
             </mesh>
           </RigidBody>
-          <RigidBody ref={testRef} friction={0} enabledRotations={[true, true, true]} mass={50} angularVelocity={[50, 50, 50]}>
+          <RigidBody ref={testRef} friction={0} enabledRotations={[true, true, true]} mass={5000} angularVelocity={[10, 40, 10]}>
             <mesh position={new Vector3(3, 1.5, 0)} rotation={new Euler(-Math.PI/4, 0, -Math.PI/4)}  castShadow={true}>
               <boxGeometry args={[1, 1, 1]} />
               <meshStandardMaterial color={'red'} />
             </mesh>
           </RigidBody>
-          <CuboidCollider args={[5, 1, 5]} position={[0, -1, 0]} friction={2}/>
+          {cubes.map(v => {
+            return <RigidBody key={v.madeAt} density={1} angularVelocity={[10, 10, 10]} friction={0}>
+              <mesh position={new Vector3(...v.position)} rotation={new Euler(...v.rotation)} castShadow={true}>
+                <boxGeometry args={v.size} />
+                <meshStandardMaterial color={v.color} />
+              </mesh>
+            </RigidBody>
+          })}
+          <CuboidCollider args={[300, 1, 300]} position={[0, -1, 0]} friction={2}/>
           <mesh rotation={new Euler(-Math.PI/2, 0, 0)} receiveShadow={true}>
-            <planeGeometry args={[10, 10]} />
+            <planeGeometry args={[600, 600]} />
             <meshStandardMaterial color={'white'} />
           </mesh>
         </Physics>

src/Player.tsx

@@ -0,0 +1,71 @@
+import { PerspectiveCamera } from "@react-three/drei";
+import { useFrame, useThree } from "@react-three/fiber";
+import { CapsuleCollider, CylinderCollider, RapierRigidBody, RigidBody, euler, quat } from "@react-three/rapier";
+import { useRef } from "react";
+import { Euler, PerspectiveCamera as PerspectiveCameraImpl, Quaternion, Vector3 } from "three";
+
+export function Player() {
+    const pos = useRef(new Vector3(5, 5, 0));
+    const rot = useRef(new Euler(0, 0, 0));
+    const rbRef = useRef<RapierRigidBody>(null);
+    const camRef = useRef<PerspectiveCameraImpl>(null);
+
+    useFrame((state, dt) => {
+        if (!camRef.current || !rbRef.current) return;
+
+        let gps = navigator.getGamepads();
+        if (gps.length < 1) return;
+        
+        const axes = gps[0]!.axes;
+
+        const [motionZ, motionX, viewSideways, viewVertical] = axes.map(val => Math.abs(val) < 0.5 ? 0 : val);
+
+        if (Math.abs(viewVertical) > 0) {
+            let goal = camRef.current.rotation.x - (viewVertical * dt * 2);
+
+            camRef.current.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, goal))
+        }
+
+        if (Math.abs(viewSideways) > 0) {
+            let rot = quat(rbRef.current.rotation());
+            rot = rot.multiply(quat().setFromEuler(new Euler(0, (-viewSideways * dt * 2), 0)));
+            rbRef.current.setRotation(rot, true);
+        }
+
+        let rot = quat(rbRef.current.rotation());
+
+        let desiredMotionVector = new Vector3(
+            motionZ * 300, 
+            0, 
+            motionX * 300
+        );
+        desiredMotionVector.applyQuaternion(rot);
+
+        rbRef.current.applyImpulseAtPoint(
+            desiredMotionVector, 
+            rbRef.current.translation(),
+            true
+        );
+
+        if (gps[0].buttons[0].pressed) {
+            rbRef.current.applyImpulseAtPoint(
+                new Vector3(0, 500, 0),
+                rbRef.current.translation(),
+            true
+            );
+        }
+
+        // let linvel = rbRef.current.linvel();
+        // linvel.x = Math.max(-1, Math.min(1, linvel.x));
+        // linvel.z = Math.max(-1, Math.min(1, linvel.z));
+
+        // rbRef.current.setLinvel(linvel, true);
+    });
+
+    return <>
+        <RigidBody ref={rbRef} position={pos.current} rotation={rot.current} enabledRotations={[false, true, false]} angularDamping={50.0} density={1}>
+            <PerspectiveCamera ref={camRef} makeDefault fov={90} position={[0, 2, 10]} />
+            <CapsuleCollider args={[2, 3]} position={[0, 0, 0]}/>
+        </RigidBody>
+    </>
+}