diff --git a/packages/client/.eslintrc.js b/packages/client/.eslintrc.js index f006ef6..b3c1145 100644 --- a/packages/client/.eslintrc.js +++ b/packages/client/.eslintrc.js @@ -13,12 +13,14 @@ module.exports = { }, }, extends: [ - 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'prettier/@typescript-eslint', + 'plugin:react/recommended', 'plugin:prettier/recommended', ], + plugins: ['prettier', 'only-warn'], rules: { 'react/prop-types': ['off'], + '@typescript-eslint/explicit-module-boundary-types': ['off'], }, } diff --git a/packages/client/package-lock.json b/packages/client/package-lock.json index 57b7abd..8964b9c 100644 --- a/packages/client/package-lock.json +++ b/packages/client/package-lock.json @@ -4,6 +4,11 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@alloc/types": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@alloc/types/-/types-1.3.0.tgz", + "integrity": "sha512-mH7LiFiq9g6rX2tvt1LtwsclfG5hnsmtIfkZiauAGrm1AwXhoRS0sF2WrN9JGN7eV5vFXqNaB0eXZ3IvMsVi9g==" + }, "@babel/code-frame": { "version": "7.10.4", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz", @@ -2310,6 +2315,11 @@ } } }, + "@juggle/resize-observer": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.2.0.tgz", + "integrity": "sha512-fsLxt0CHx2HCV9EL8lDoVkwHffsA0snUpddYjdLyXcG5E41xaamn9ZyQqOE9TUJdrRlH8/hjIf+UdOdDeKCUgg==" + }, "@loadable/component": { "version": "5.14.1", "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.14.1.tgz", @@ -2456,6 +2466,73 @@ } } }, + "@react-spring/animated": { + "version": "9.0.0-rc.3", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.0.0-rc.3.tgz", + "integrity": "sha512-dAvgtKhkYpzzr+EkmZ4ZuJ5CujxCW0LaT109DvO/2MQNk3EWIxcgl+ik4tSulSbgau1GN8RlkRKyDp0wISdQ3Q==", + "requires": { + "@babel/runtime": "^7.3.1", + "@react-spring/shared": "9.0.0-rc.3", + "react-layout-effect": "^1.0.1" + } + }, + "@react-spring/core": { + "version": "9.0.0-rc.3", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.0.0-rc.3.tgz", + "integrity": "sha512-3OzsVFxpfMJNkkQj8TwAH3NhUAX76AXu6WkslQF4EgBeEoG5eY3m+VvM9RsAsGWDuBKpscZ/wBpFt5Ih6KdGHA==", + "requires": { + "@babel/runtime": "^7.3.1", + "@react-spring/animated": "9.0.0-rc.3", + "@react-spring/shared": "9.0.0-rc.3", + "react-layout-effect": "^1.0.1", + "use-memo-one": "^1.1.0" + } + }, + "@react-spring/shared": { + "version": "9.0.0-rc.3", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.0.0-rc.3.tgz", + "integrity": "sha512-dd50TxwwMWd+dSB0InjndUN9w17cbnMCPy+0sag6zRxxKIo7eOyWSliOtLKxvufgmdC8Prm4M3GT5dmB1yxKEQ==", + "requires": { + "@alloc/types": "^1.2.1", + "@babel/runtime": "^7.3.1", + "fluids": "^0.1.6", + "tslib": "^1.11.1" + } + }, + "@react-spring/web": { + "version": "9.0.0-rc.3", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.0.0-rc.3.tgz", + "integrity": "sha512-rEvipblmihiz8+Eo01zDp5dqWn6XfYk8q2rlN9c18YIOL4o6nuY/VplDoocUMHYfH4liurpO4o1QudKOO1nAiQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "@react-spring/animated": "9.0.0-rc.3", + "@react-spring/core": "9.0.0-rc.3", + "@react-spring/shared": "9.0.0-rc.3" + } + }, + "@react-three/cannon": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@react-three/cannon/-/cannon-0.5.3.tgz", + "integrity": "sha512-/Ak6AcY4KfBMSnqOxQ2drQZVXDAAwfnUi2/PxPepz9tSAl6GC5o7H5WnDRJqXClRcw8n4Q+Dm9uSl8L5mvV96A==" + }, + "@react-three/drei": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-2.2.2.tgz", + "integrity": "sha512-EEv7l09DjBrQRM+LuLLHdHs6XvQGOPMAAUSl+S93j+wHnhPou/02tOEDNhcRGU1hzteojA8mR4XV2JatsrLtAw==", + "requires": { + "@babel/runtime": "^7.11.2", + "@react-spring/web": "^9.0.0-rc.3", + "detect-gpu": "^1.5.1", + "glsl-noise": "^0.0.0", + "lodash.omit": "^4.5.0", + "lodash.pick": "^4.4.0", + "react-merge-refs": "^1.0.0", + "stats.js": "^0.17.0", + "troika-three-text": "^0.34.0", + "utility-types": "^3.10.0", + "zustand": "^3.0.3" + } + }, "@rollup/plugin-node-resolve": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz", @@ -5432,6 +5509,11 @@ "whatwg-url": "^8.0.0" } }, + "debounce": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz", + "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==" + }, "debug": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz", @@ -5614,6 +5696,14 @@ "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" }, + "detect-gpu": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/detect-gpu/-/detect-gpu-1.5.1.tgz", + "integrity": "sha512-Ws//qvt0Kv9uXli1xJbC4jvrJdm+KonOMBjkTkICy4Ko+6qIggOXaF567o4kpapsX+pqW9FXmxh4IIAmqB+q7Q==", + "requires": { + "detect-ua": "^1.0.2" + } + }, "detect-newline": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz", @@ -5653,6 +5743,11 @@ } } }, + "detect-ua": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/detect-ua/-/detect-ua-1.0.2.tgz", + "integrity": "sha512-EsqFycxcggrkzRm3IaHr1nP1pSCDVLHW3haUvaSqws70B277a1SKk5hFtuJo3BKuPwTTRGTGsYYiJwS/97ptEg==" + }, "diff-sequences": { "version": "26.5.0", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.5.0.tgz", @@ -6432,6 +6527,12 @@ } } }, + "eslint-plugin-only-warn": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-only-warn/-/eslint-plugin-only-warn-1.0.2.tgz", + "integrity": "sha512-DCG8vuUynDnyfkm0POT50JoE9VJfbtKf+COHn3q79+ExW4dg9ZWM/hsMWX1mjZqxMjQledL/9TmGipon/vwWmw==", + "dev": true + }, "eslint-plugin-prettier": { "version": "3.1.4", "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.4.tgz", @@ -7123,6 +7224,11 @@ "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz", "integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==" }, + "fluids": { + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/fluids/-/fluids-0.1.10.tgz", + "integrity": "sha512-66FLmUJOrkvEHIsRVeM+88MG0bjd2TOBuR0BkM0hzyCb68W9drzqeX/AHDNp3ouZALQN7JvBvmKdVhHI+PZsdg==" + }, "flush-write-stream": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz", @@ -7622,6 +7728,11 @@ "slash": "^3.0.0" } }, + "glsl-noise": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz", + "integrity": "sha1-NndF86MzgsDu7Ey1S36Zz8HXZws=" + }, "graceful-fs": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz", @@ -9807,6 +9918,16 @@ "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz", "integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==" }, + "lodash.omit": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz", + "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA=" + }, + "lodash.pick": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz", + "integrity": "sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=" + }, "lodash.sortby": { "version": "4.7.0", "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", @@ -12668,6 +12789,16 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz", "integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==" }, + "react-layout-effect": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/react-layout-effect/-/react-layout-effect-1.0.5.tgz", + "integrity": "sha512-zdRXHuch+OBHU6bvjTelOGUCM+UDr/iCY+c0wXLEAc+G4/FlcJruD/hUOzlKH5XgO90Y/BUJPNhI/g9kl+VAsA==" + }, + "react-merge-refs": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz", + "integrity": "sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==" + }, "react-popper": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.3.tgz", @@ -12677,6 +12808,16 @@ "warning": "^4.0.2" } }, + "react-reconciler": { + "version": "0.26.0", + "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.26.0.tgz", + "integrity": "sha512-n2FJE9vPSiZ0Dn/jaV/iOAO6rXepnk74QGRcgwPSgmN/2syUJnbfEz7Bw5yodBfJhjA3L7cu1YdImYISTj4KZQ==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "scheduler": "^0.20.0" + } + }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -12829,6 +12970,42 @@ "tslib": "^1.0.0" } }, + "react-three-fiber": { + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/react-three-fiber/-/react-three-fiber-5.1.4.tgz", + "integrity": "sha512-ReKiKwKKOOfL0OVljOvyWHlQ8t2yV9OffyBDvBqxq2F8gHCe/cTE+PMFRY8z60HK+5olX+177fTh0PqR74rBAw==", + "requires": { + "@babel/runtime": "^7.12.1", + "@juggle/resize-observer": "^3.2.0", + "react-merge-refs": "^1.1.0", + "react-reconciler": "0.26.0", + "react-use-measure": "^2.0.2", + "resize-observer-polyfill": "^1.5.1", + "scheduler": "0.20.0", + "tiny-emitter": "^2.1.0", + "use-asset": "^0.1.2", + "utility-types": "^3.10.0" + }, + "dependencies": { + "scheduler": { + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.0.tgz", + "integrity": "sha512-XegIgta1bIaz2LdaL6eg1GEcE42g0BY9qFXCqlZ/+s2MuEKfigFCW6DEGBlZzeVFlwDmVusrWEyFtBo4sbkkdA==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + } + } + }, + "react-use-measure": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.0.2.tgz", + "integrity": "sha512-/+eSmQiU2ePNTwFCXX4JPrQNMvyu3sWrSDi/n5F6IMXwboB46IvtU8VHvG7Nc+egvtM7sBJKwmUx/vx6KIRDog==", + "requires": { + "debounce": "^1.2.0" + } + }, "read-pkg": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", @@ -13210,6 +13387,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" }, + "resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "resolve": { "version": "1.18.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz", @@ -14460,6 +14642,11 @@ } } }, + "stats.js": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz", + "integrity": "sha1-scPcRtlEmLV4t/05hbgaznExzH0=" + }, "statuses": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", @@ -15046,6 +15233,11 @@ "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=" }, + "three": { + "version": "0.121.1", + "resolved": "https://registry.npmjs.org/three/-/three-0.121.1.tgz", + "integrity": "sha512-+rYhNpW5W1aBdLkPQDld/GA4Sj/uOKJJKVpCAZUbpk/HZEiYRUlPt8+s+9nmxRglWmRHdBa3ERvUwqg4nmoA5w==" + }, "throat": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz", @@ -15107,6 +15299,11 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" + }, "tiny-invariant": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", @@ -15200,6 +15397,25 @@ "punycode": "^2.1.1" } }, + "troika-three-text": { + "version": "0.34.1", + "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.34.1.tgz", + "integrity": "sha512-67nXL2cPFzkCFmfRTpo0ylH1OY7gqwzRSt1C+SgnG2/rAmFCExhvr+ND2TVX8U4kVctCLgfU/e7V8IOdZ3x/gQ==", + "requires": { + "troika-three-utils": "^0.34.0", + "troika-worker-utils": "^0.34.1" + } + }, + "troika-three-utils": { + "version": "0.34.0", + "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.34.0.tgz", + "integrity": "sha512-6Dm6FzGFpuiehjKkm3wAV3e+SPnHQ+GxwXnHFToKLcQ1/gVDOIL69BWCosrlEUb0SUOQjQv6sd5QpNT6IIewpQ==" + }, + "troika-worker-utils": { + "version": "0.34.1", + "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.34.1.tgz", + "integrity": "sha512-zLTSB6ISd/dpBMG6PFR2v7sqU2bqVwOUd45iWzcgcRE9+w/5YJN8h0+H5EmgRPIVe5xus0UZQKUgVH6FRA+YdQ==" + }, "tryer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", @@ -15502,11 +15718,24 @@ "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==" }, + "use-asset": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/use-asset/-/use-asset-0.1.2.tgz", + "integrity": "sha512-hXnxOm5nDtxN5KPL5PUhEXbNsL9z8xIkYXo4WSBzV2dfS9ahaL6K+P/oMOUUiJ0FfyD1+N5EL8LhwVPUE6xHWA==", + "requires": { + "fast-deep-equal": "^3.1.3" + } + }, "use-callback-ref": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.4.tgz", "integrity": "sha512-rXpsyvOnqdScyied4Uglsp14qzag1JIemLeTWGKbwpotWht57hbP78aNT+Q4wdFKQfQibbUX4fb6Qb4y11aVOQ==" }, + "use-memo-one": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.1.tgz", + "integrity": "sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ==" + }, "use-sidecar": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.0.3.tgz", @@ -15572,6 +15801,11 @@ "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz", "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=" }, + "utility-types": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz", + "integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==" + }, "utils-merge": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", @@ -17166,6 +17400,11 @@ "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" } } + }, + "zustand": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.1.3.tgz", + "integrity": "sha512-Otuzh3r0GsatvsUWeXEwdYjZEw1TItWcAXwDGEHdXE4/k6WbAdVDxC21t/Poq4ZMB+2VaQNKICWu7eCBUJ65tQ==" } } } diff --git a/packages/client/package.json b/packages/client/package.json index fb72c7f..d1ac3c5 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -5,6 +5,8 @@ "dependencies": { "@chakra-ui/core": "^1.0.0-rc.7", "@loadable/component": "^5.14.1", + "@react-three/cannon": "^0.5.3", + "@react-three/drei": "^2.2.2", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", @@ -18,6 +20,8 @@ "react-dom": "^17.0.1", "react-router-dom": "^5.2.0", "react-scripts": "4.0.0", + "react-three-fiber": "^5.1.4", + "three": "^0.121.1", "typescript": "^4.0.3", "web-vitals": "^0.2.4" }, @@ -50,6 +54,7 @@ "eslint": "^7.12.0", "eslint-config-prettier": "^6.14.0", "eslint-plugin-jsx-a11y": "^6.4.1", + "eslint-plugin-only-warn": "^1.0.2", "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-react": "^7.21.5", "eslint-plugin-react-hooks": "^4.2.0", diff --git a/packages/client/public/model/plaza_collision.glb b/packages/client/public/model/plaza_collision.glb new file mode 100644 index 0000000..591e32f --- /dev/null +++ b/packages/client/public/model/plaza_collision.glb @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6960fa465de78a2c11378864a94b1b9f1c93c860b06468ce723e78f481e6fd48 +size 1112 diff --git a/packages/client/src/components/App.tsx b/packages/client/src/components/App.tsx index 0ac137a..39c6e19 100644 --- a/packages/client/src/components/App.tsx +++ b/packages/client/src/components/App.tsx @@ -9,6 +9,10 @@ const LoadableLogin = loadable(() => import('./Login'), { fallback: , }) +const LoadableMuseo = loadable(() => import('./Museo'), { + fallback: , +}) + function App(): JSX.Element { return ( @@ -17,11 +21,9 @@ function App(): JSX.Element { - {/* - - - - */} + + + diff --git a/packages/client/src/components/Museo.tsx b/packages/client/src/components/Museo.tsx new file mode 100644 index 0000000..1cc18a3 --- /dev/null +++ b/packages/client/src/components/Museo.tsx @@ -0,0 +1,141 @@ +import React, { useRef, useState, Suspense, useEffect } from 'react' +import { Box } from '@chakra-ui/core' +import { OrbitControls, Sky } from '@react-three/drei' +import { Canvas, useFrame } from 'react-three-fiber' +import { useSphere } from '@react-three/cannon' + +import Plaza from '../models/Plaza' +import PlazaCollision from '../models/PlazaCollision' +import { Physics } from '@react-three/cannon' +import { Event } from 'three' + +function Cube() { + const [ref, api] = useSphere(() => ({ + fixedRotation: true, + mass: 1, + position: [0, 20, 0], + })) + const velocity = useRef([0, 0, 0]) + + const [moveForward, setMoveForward] = useState(false) + const [moveBackwards, setMoveBackwards] = useState(false) + const [moveLeft, setMoveLeft] = useState(false) + const [moveRight, setMoveRight] = useState(false) + + useEffect(() => { + api.velocity.subscribe((v) => (velocity.current = v)) + + const onKeyDown = (event: Event) => { + switch (event.keyCode) { + case 38: // up + case 87: // w + setMoveForward(true) + break + + case 37: // left + case 65: // a + setMoveLeft(true) + break + + case 40: // down + case 83: // s + setMoveBackwards(true) + break + + case 39: // right + case 68: // d + setMoveRight(true) + break + } + } + + const onKeyUp = (event: Event) => { + switch (event.keyCode) { + case 38: // up + case 87: // w + setMoveForward(false) + break + + case 37: // left + case 65: // a + setMoveLeft(false) + break + + case 40: // down + case 83: // s + setMoveBackwards(false) + break + + case 39: // right + case 68: // d + setMoveRight(false) + break + } + } + + document.addEventListener('keydown', onKeyDown, false) + document.addEventListener('keyup', onKeyUp, false) + }, []) + + useFrame(() => { + if (api && ref.current) { + let x, z + x = z = 0 + + if (moveForward) { + z += -5 + } + if (moveBackwards) { + z += 5 + } + if (moveLeft) { + x += -5 + } + if (moveRight) { + x += 5 + } + + console.log(x, z) + + if (x != 0 || z != 0) { + api.velocity.set(x, velocity.current[1], z) + } + } + }) + + return ( + + + + ) +} + +const Museo: React.FC = () => { + return ( + + + + + + + + + + + + + + + + ) +} + +export default Museo diff --git a/packages/client/src/models/Plaza.tsx b/packages/client/src/models/Plaza.tsx new file mode 100644 index 0000000..b07a3ef --- /dev/null +++ b/packages/client/src/models/Plaza.tsx @@ -0,0 +1,95 @@ +/* +auto-generated by: https://github.com/pmndrs/gltfjsx +*/ +import React, { useRef } from 'react' +import { useGLTF } from '@react-three/drei/useGLTF' + +import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader' + +type GLTFResult = GLTF & { + nodes: { + Plane001_0: THREE.Mesh + ['Plane.001_1_1']: THREE.Mesh + Circle001_0: THREE.Mesh + ['Circle.001_1_1']: THREE.Mesh + staris: THREE.Mesh + hamacas: THREE.Mesh + tobogan: THREE.Mesh + Cube001_0: THREE.Mesh + ['Cube.001_1_1']: THREE.Mesh + Cube002_0: THREE.Mesh + ['Cube.002_1_1']: THREE.Mesh + Plane004_0: THREE.Mesh + ['Plane.004_1_1']: THREE.Mesh + ['Plane.004_2_2']: THREE.Mesh + } + materials: { + grass: THREE.MeshStandardMaterial + dirt: THREE.MeshStandardMaterial + marble: THREE.MeshStandardMaterial + water: THREE.MeshStandardMaterial + metal: THREE.MeshStandardMaterial + green_metal: THREE.MeshStandardMaterial + sidewalk: THREE.MeshStandardMaterial + asfalt: THREE.MeshStandardMaterial + cordon: THREE.MeshStandardMaterial + } +} + +export default function Model(props: JSX.IntrinsicElements['group']) { + const group = useRef() + const { nodes, materials } = useGLTF('/model/plaza.glb') as GLTFResult + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +useGLTF.preload('/plaza.glb') diff --git a/packages/client/src/models/PlazaCollision.tsx b/packages/client/src/models/PlazaCollision.tsx new file mode 100644 index 0000000..951bc4e --- /dev/null +++ b/packages/client/src/models/PlazaCollision.tsx @@ -0,0 +1,41 @@ +/* +auto-generated by: https://github.com/pmndrs/gltfjsx +*/ +import React, { MutableRefObject, useRef } from 'react' +import { useGLTF } from '@react-three/drei/useGLTF' +import { Physics, useConvexPolyhedron } from '@react-three/cannon' + +import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader' +import * as THREE from 'three' + +type GLTFResult = GLTF & { + nodes: { + collision_mesh: THREE.Mesh + } + materials: {} +} + +export default function Model(props: JSX.IntrinsicElements['group']) { + const group = useRef() + const { nodes, materials } = useGLTF('/model/plaza_collision.glb') as GLTFResult + + if (nodes.collision_mesh.geometry === undefined) return null + + const [ref] = useConvexPolyhedron(() => ({ + args: new THREE.Geometry().fromBufferGeometry( + nodes.collision_mesh.geometry as THREE.BufferGeometry, + ), + type: 'Static', + position: [-2.5, 0, -35.03], + })) + + return ( + + + + + + ) +} + +useGLTF.preload('/plaza_collision.glb')