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')