From 1a0dd4a47d2209dbdd0e21737e5fdec7bae9d9eb Mon Sep 17 00:00:00 2001 From: VsevolodX <79542055+VsevolodX@users.noreply.github.com> Date: Mon, 21 Aug 2023 10:58:55 -0700 Subject: [PATCH 1/6] feat: install latest threejs and fiber with react 17 --- package-lock.json | 229 ++++++++++++++++++++++++++++++++++------------ package.json | 18 ++-- 2 files changed, 179 insertions(+), 68 deletions(-) diff --git a/package-lock.json b/package-lock.json index bc5a8bc9..e8c13908 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1558,9 +1558,9 @@ } }, "@codemirror/language": { - "version": "6.8.0", - "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.8.0.tgz", - "integrity": "sha512-r1paAyWOZkfY0RaYEZj3Kul+MiQTEbDvYqf8gPGaRvNneHXCmfSaAVFjwRUPlgxS8yflMxw2CTu6uCMp8R8A2g==", + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.9.0.tgz", + "integrity": "sha512-nFu311/0ne/qGuGCL3oKuktBgzVOaxCHZPZv1tLSZkNjPYxxvkjSbzno3MlErG2tgw1Yw1yF8BxMCegeMXqpiw==", "requires": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0", @@ -1847,9 +1847,9 @@ } }, "@exabyte-io/cove.js": { - "version": "2023.8.10-0", - "resolved": "https://registry.npmjs.org/@exabyte-io/cove.js/-/cove.js-2023.8.10-0.tgz", - "integrity": "sha512-xFV89R2bX5KEdvT+0oQw8IVsVMJtbyabVyJkYB+I2CrUrA3DKSFrG4b22aF9mHlr6XGil+XGSOQ+hKjBkDveYw==", + "version": "2023.8.18-0", + "resolved": "https://registry.npmjs.org/@exabyte-io/cove.js/-/cove.js-2023.8.18-0.tgz", + "integrity": "sha512-+1iy9OUeBXmY9qcz6R1kb0HCQwky9pr4iKAXlz2YC9B3Mqhd8rxuvg8mVD7rma47+8zTOiaEhIb/4Vg5uNPWAw==", "requires": { "@babel/eslint-parser": "^7.16.3", "@codemirror/autocomplete": "^6.4.2", @@ -1859,7 +1859,7 @@ "@codemirror/language": "^6.6.0", "@codemirror/legacy-modes": "^6.3.1", "@codemirror/lint": "^6.2.0", - "@mui/x-date-pickers": "^6.0.0", + "@mui/x-date-pickers": "6.11.1", "@toast-ui/editor": "^3.2.2", "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0", "@toast-ui/react-editor": "^3.2.3", @@ -2633,9 +2633,9 @@ } }, "@lezer/common": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.3.tgz", - "integrity": "sha512-JH4wAXCgUOcCGNekQPLhVeUtIqjH0yPBs7vvUdSjyQama9618IOKFJwkv2kcqdhF0my8hQEgCTEJU0GIgnahvA==" + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.4.tgz", + "integrity": "sha512-lZHlk8p67x4aIDtJl6UQrXSOP6oi7dQR3W/geFVrENdA1JDaAJWldnVqVjPMJupbTKbzDfFcePfKttqVidS/dg==" }, "@lezer/highlight": { "version": "1.1.6", @@ -2664,9 +2664,9 @@ } }, "@lezer/lr": { - "version": "1.3.9", - "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.9.tgz", - "integrity": "sha512-XPz6dzuTHlnsbA5M2DZgjflNQ+9Hi5Swhic0RULdp3oOs3rh6bqGZolosVqN/fQIT8uNiepzINJDnS39oweTHQ==", + "version": "1.3.10", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.10.tgz", + "integrity": "sha512-BZfVvf7Re5BIwJHlZXbJn9L8lus5EonxQghyn+ih8Wl36XMFBPTXC0KM0IdUtj9w/diPHsKlXVgL+AlX2jYJ0Q==", "requires": { "@lezer/common": "^1.0.0" } @@ -3253,14 +3253,14 @@ } }, "@mui/x-date-pickers": { - "version": "6.11.0", - "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.11.0.tgz", - "integrity": "sha512-yVGfpH3scUauLaHWvzckD0xswboC48YAaJ4568YTkKozXFSPPkvK7VGSQ+qo1u8K2UjYh1iZoff3k0EoDDPnww==", + "version": "6.11.1", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.11.1.tgz", + "integrity": "sha512-0NnBen60iZNBmJK7m2UU9jPZXW9RRyBL3meAupWyq+j6bLpSWG+8O2TnP1E3KFC7q66bPG6qOGOKKGfzFyR3cg==", "requires": { "@babel/runtime": "^7.22.6", - "@mui/utils": "^5.14.1", + "@mui/utils": "^5.14.3", "@types/react-transition-group": "^4.4.6", - "clsx": "^1.2.1", + "clsx": "^2.0.0", "prop-types": "^15.8.1", "react-transition-group": "^4.4.5" }, @@ -3274,9 +3274,9 @@ } }, "@mui/utils": { - "version": "5.14.4", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.4.tgz", - "integrity": "sha512-4ANV0txPD3x0IcTCSEHKDWnsutg1K3m6Vz5IckkbLXVYu17oOZCVUdOKsb/txUmaCd0v0PmSRe5PW+Mlvns5dQ==", + "version": "5.14.5", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.5.tgz", + "integrity": "sha512-6Hzw63VR9C5xYv+CbjndoRLU6Gntal8rJ5W+GUzkyHrGWIyYPWZPa6AevnyGioySNETATe1H9oXS8f/7qgIHJA==", "requires": { "@babel/runtime": "^7.22.6", "@types/prop-types": "^15.7.5", @@ -3394,6 +3394,24 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" }, + "@react-three/fiber": { + "version": "7.0.29", + "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-7.0.29.tgz", + "integrity": "sha512-TE+/iaGrjluGsPwN2RkLXxKD4ak+unsh0YKIFKGcuAOW9jYcAyMGKAtgFO8MS7/HNCrZZQQSg23sJ8IPgtdkDg==", + "requires": { + "@babel/runtime": "^7.13.10", + "@types/react-reconciler": "^0.26.2", + "react-merge-refs": "^1.1.0", + "react-reconciler": "^0.26.2", + "react-three-fiber": "0.0.0-deprecated", + "react-use-measure": "^2.1.1", + "resize-observer-polyfill": "^1.5.1", + "scheduler": "^0.20.2", + "use-asset": "^1.0.4", + "utility-types": "^3.10.0", + "zustand": "^3.5.1" + } + }, "@rollup/plugin-node-resolve": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz", @@ -3608,6 +3626,12 @@ "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==" }, + "@tweenjs/tween.js": { + "version": "18.6.4", + "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz", + "integrity": "sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ==", + "dev": true + }, "@types/babel__core": { "version": "7.1.19", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.19.tgz", @@ -3809,6 +3833,14 @@ "@types/react": "*" } }, + "@types/react-reconciler": { + "version": "0.26.7", + "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.26.7.tgz", + "integrity": "sha512-mBDYl8x+oyPX/VBb3E638N0B7xG+SPk/EAMcVPeexqus/5aTpTphQi0curhhshOqRrc9t6OPoJfEUkbymse/lQ==", + "requires": { + "@types/react": "*" + } + }, "@types/react-redux": { "version": "7.1.25", "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.25.tgz", @@ -3857,11 +3889,31 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "@types/stats.js": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.0.tgz", + "integrity": "sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==", + "dev": true + }, "@types/tapable": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz", "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==" }, + "@types/three": { + "version": "0.155.0", + "resolved": "https://registry.npmjs.org/@types/three/-/three-0.155.0.tgz", + "integrity": "sha512-IzdbqXsGsbG0flvq9D5L9pZRwySQQps2bGcizLYEsfvK3dM+B0sqKR6S+xAOXbouXemfDmHttrcQjVOM46YnAw==", + "dev": true, + "requires": { + "@tweenjs/tween.js": "~18.6.4", + "@types/stats.js": "*", + "@types/webxr": "*", + "fflate": "~0.6.9", + "lil-gui": "~0.17.0", + "meshoptimizer": "~0.18.1" + } + }, "@types/uglify-js": { "version": "3.16.0", "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.16.0.tgz", @@ -3927,6 +3979,12 @@ } } }, + "@types/webxr": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.3.tgz", + "integrity": "sha512-orrXqFCuuRE5hMuwLZhPaQrukAZxpkMzNJHmKCNJ16XT5yiR5iNBLNdn+xONbfzU2XAXTZR0GA2R99ciUd/2hg==", + "dev": true + }, "@types/yargs": { "version": "15.0.14", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.14.tgz", @@ -6333,9 +6391,9 @@ } }, "clsx": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", - "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==" + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==" }, "co": { "version": "4.6.0", @@ -7192,6 +7250,11 @@ "whatwg-url": "^8.0.0" } }, + "debounce": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz", + "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==" + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -9296,6 +9359,12 @@ "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz", "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==" }, + "fflate": { + "version": "0.6.10", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz", + "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==", + "dev": true + }, "figgy-pudding": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz", @@ -13971,6 +14040,12 @@ "immediate": "~3.0.5" } }, + "lil-gui": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/lil-gui/-/lil-gui-0.17.0.tgz", + "integrity": "sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ==", + "dev": true + }, "lilconfig": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.4.tgz", @@ -14476,6 +14551,12 @@ "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==" }, + "meshoptimizer": { + "version": "0.18.1", + "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz", + "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==", + "dev": true + }, "methods": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", @@ -14936,9 +15017,9 @@ } }, "node-fetch": { - "version": "2.6.12", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz", - "integrity": "sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==", + "version": "2.6.13", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.13.tgz", + "integrity": "sha512-StxNAxh15zr77QvvkmveSQ8uCQ4+v5FkvNTj0OESmiHu+VRi/gXArXtkWMElOsOUNLtUEvI4yS+rdtOHZTwlQA==", "requires": { "whatwg-url": "^5.0.0" }, @@ -17493,6 +17574,13 @@ "requires": { "clsx": "^1.1.1", "prop-types": "^15.8.1" + }, + "dependencies": { + "clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==" + } } }, "react-error-overlay": { @@ -17521,6 +17609,11 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "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-overlays": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.8.3.tgz", @@ -17563,6 +17656,16 @@ "warning": "^3.0.0" } }, + "react-reconciler": { + "version": "0.26.2", + "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.26.2.tgz", + "integrity": "sha512-nK6kgY28HwrMNwDnMui3dvm3rCFjZrcGiuwLc5COUipBK5hWHLOxMJhSnSomirqWwjPBJKV1QcbkI0VJr7Gl1Q==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" + } + }, "react-redux": { "version": "7.2.9", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz", @@ -17956,6 +18059,11 @@ } } }, + "react-three-fiber": { + "version": "0.0.0-deprecated", + "resolved": "https://registry.npmjs.org/react-three-fiber/-/react-three-fiber-0.0.0-deprecated.tgz", + "integrity": "sha512-EblIqTAsIpkYeM8bZtC4lcpTE0A2zCEGipFB52RgcQq/q+0oryrk7Sxt+sqhIjUu6xMNEVywV8dr74lz5yWO6A==" + }, "react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -17967,6 +18075,14 @@ "prop-types": "^15.6.2" } }, + "react-use-measure": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz", + "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==", + "requires": { + "debounce": "^1.2.1" + } + }, "read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -18359,6 +18475,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" }, + "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.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -18895,7 +19016,6 @@ "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", - "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -19148,11 +19268,6 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==" }, - "signals": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/signals/-/signals-1.0.0.tgz", - "integrity": "sha512-dE3lBiqgrgIvpGHYBy6/kiYKfh0HXRmbg0ocakBKiOefbal6ZeTtNlQlxsu9ADkNzv5OmRwRKu+IaTPSqJdZDg==" - }, "simple-concat": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz", @@ -20196,33 +20311,9 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==" }, "three": { - "version": "npm:@exabyte-io/three@2023.6.22-0", - "resolved": "https://registry.npmjs.org/@exabyte-io/three/-/three-2023.6.22-0.tgz", - "integrity": "sha512-en8//YLB2PJt1jWZ0QZ6C+KV8GzwAikSvFjbYk/msrD80VN1GYCbA+cwKBKaGLjSuvBV3hdul9x0Kdhauw8ZxQ==", - "requires": { - "@codemirror/commands": "^6.1.0", - "@codemirror/lang-javascript": "^6.0.2", - "@codemirror/lint": "^6.0.0", - "@codemirror/state": "^6.1.1", - "@codemirror/theme-one-dark": "^6.0.0", - "@codemirror/view": "^6.2.1", - "acorn": "1.0.1", - "codemirror": "^6.0.1", - "esprima": "^3.1.3", - "signals": "1.0.0" - }, - "dependencies": { - "acorn": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-1.0.1.tgz", - "integrity": "sha512-goyeqJaYIEon7Xw+ltfheM2MSoZ1lDffIYDBMP9UyUDYhsBiw1dAV07wlUGwRYntyvlxGpk/Avk58Ff9clZuUw==" - }, - "esprima": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz", - "integrity": "sha512-AWwVMNxwhN8+NIPQzAQZCm7RkLC4RbM3B1OobMuyp3i+w73X57KCKaVIxaRZb+DYCojq7rspo+fmuQfAboyhFg==" - } - } + "version": "0.155.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.155.0.tgz", + "integrity": "sha512-sNgCYmDijnIqkD/bMfk+1pHg3YzsxW7V2ChpuP6HCQ8NiZr3RufsXQr8M3SSUMjW4hG+sUk7YbyuY0DncaDTJQ==" }, "throat": { "version": "5.0.0", @@ -20731,6 +20822,14 @@ "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==" }, + "use-asset": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/use-asset/-/use-asset-1.0.4.tgz", + "integrity": "sha512-7/hqDrWa0iMnCoET9W1T07EmD4Eg/Wmoj/X8TGBc++ECRK4m5yTsjP4O6s0yagbxfqIOuUkIxe2/sA+VR2GxZA==", + "requires": { + "fast-deep-equal": "^3.1.3" + } + }, "use-composed-ref": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz", @@ -20790,6 +20889,11 @@ "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz", "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==" }, + "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", @@ -22358,6 +22462,11 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" + }, + "zustand": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz", + "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==" } } } diff --git a/package.json b/package.json index b473f8e5..7e7f53bc 100644 --- a/package.json +++ b/package.json @@ -38,28 +38,29 @@ "@babel/runtime-corejs2": "7.16.7", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", - "@exabyte-io/cove.js": "2023.8.10-0", + "@exabyte-io/cove.js": "2023.8.18-0", "@exabyte-io/periodic-table.js": "2022.5.5-2", "@mui/icons-material": "^5.11.0", + "@mui/lab": "^5.0.0-alpha.120", "@mui/material": "^5.11.9", "@mui/styles": "^5.11.7", + "@react-three/fiber": "^7.0.0", "classnames": "2.3.1", "enzyme-adapter-react-16": "^1.15.6", "jquery": "3.6.0", "mixwith": "^0.1.1", + "moment": "^2.29.4", "prop-types": "^15.8.0", "react-bootstrap": "0.32.4", "react-scripts": "^4.0.3", - "typescript": "^4.9.5", "sass": "1.45.2", "sprintf-js": "^1.1.2", "static-kdtree": "^1.0.2", "sweetalert": "^2.1.2", - "three": "npm:@exabyte-io/three@2023.6.22-0", + "three": "^0.155.0", + "typescript": "^4.9.5", "underscore": "^1.8.3", - "underscore.string": "^3.3.4", - "@mui/lab": "^5.0.0-alpha.120", - "moment": "^2.29.4" + "underscore.string": "^3.3.4" }, "peerDependencies": { "@exabyte-io/made.js": "*", @@ -70,10 +71,11 @@ "@babel/preset-typescript": "^7.22.5", "@exabyte-io/eslint-config": "^2022.11.17-0", "@exabyte-io/made.js": "2022.5.5-3", - "@typescript-eslint/eslint-plugin": "^5.56.0", - "@typescript-eslint/parser": "^5.56.0", "@types/react": "^18.2.8", "@types/react-dom": "^18.2.4", + "@types/three": "^0.155.0", + "@typescript-eslint/eslint-plugin": "^5.56.0", + "@typescript-eslint/parser": "^5.56.0", "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0", "babel-jest": "^28.1.0", "cross-env": "^7.0.3", From b0f8881fd6207906ab340c63944f63a148b57c04 Mon Sep 17 00:00:00 2001 From: VsevolodX <79542055+VsevolodX@users.noreply.github.com> Date: Mon, 21 Aug 2023 10:59:47 -0700 Subject: [PATCH 2/6] feat: move threejs editor into ThreeDEditor component --- src/components/ThreeDEditor.jsx | 37 +-- src/components/ThreejsEditor.tsx | 48 ++++ src/components/ThreejsEditorModal.jsx | 294 -------------------- src/exports.js | 2 +- tests/__tests__/components/ThreeDEditor.jsx | 4 +- 5 files changed, 61 insertions(+), 324 deletions(-) create mode 100644 src/components/ThreejsEditor.tsx delete mode 100644 src/components/ThreejsEditorModal.jsx diff --git a/src/components/ThreeDEditor.jsx b/src/components/ThreeDEditor.jsx index c271d6a5..c8a79912 100644 --- a/src/components/ThreeDEditor.jsx +++ b/src/components/ThreeDEditor.jsx @@ -35,7 +35,7 @@ import settings from "../settings"; import { exportToDisk } from "../utils"; import IconsToolbar from "./IconsToolbar"; import ParametersMenu from "./ParametersMenu"; -import { ThreejsEditorModal } from "./ThreejsEditorModal"; +import { ThreejsEditor } from "./ThreejsEditor"; import { WaveComponent } from "./WaveComponent"; /** @@ -324,20 +324,6 @@ export class ThreeDEditor extends React.Component { } } - /** - * Returns a cover div to cover the area and prevent user interaction with component - */ - renderCoverDiv() { - const style = { - position: "absolute", - height: "100%", - width: "100%", - }; - const { isInteractive } = this.state; - if (isInteractive) style.display = "none"; - return
; - } - renderWaveComponent() { const { isConventionalCellShown, @@ -629,26 +615,23 @@ export class ThreeDEditor extends React.Component { renderWaveOrThreejsEditorModal() { const { originalMaterial, isThreejsEditorModalShown } = this.state; - if (isThreejsEditorModalShown) { - return ( - - ); - } const { isInteractive } = this.state; return (
- {this.renderCoverDiv()} - {this.renderWaveComponent()} + {!isThreejsEditorModalShown && this.renderWaveComponent()} + {isThreejsEditorModalShown && ( + + )}
); } diff --git a/src/components/ThreejsEditor.tsx b/src/components/ThreejsEditor.tsx new file mode 100644 index 00000000..446f643b --- /dev/null +++ b/src/components/ThreejsEditor.tsx @@ -0,0 +1,48 @@ +// @ts-ignore +import { Made } from "@exabyte-io/made.js"; +import { Box } from "@mui/material"; +import { Canvas, useThree } from "@react-three/fiber"; +import React, { useEffect } from "react"; +import * as THREE from "three"; + +import { materialsToThreeDSceneData } from "../utils"; + +interface ThreejsSceneProps { + materials: Made.Material[]; +} +function ThreejsScene({ materials }: ThreejsSceneProps): JSX.Element | null { + const { scene } = useThree(); + + useEffect(() => { + const loader = new THREE.ObjectLoader(); + const loadedScene = loader.parse(materialsToThreeDSceneData(materials)); + console.log(loadedScene); + // Merges the loaded objects into the existing scene. + scene.add(...loadedScene.children); + }, [materials, scene]); + + return null; // This component is just for side effects, it doesn't render anything +} + +interface ThreejsEditorProps { + materials: Made.Material[]; +} +export function ThreejsEditor({ materials }: ThreejsEditorProps): JSX.Element { + useEffect(() => { + return () => { + // Cleanup actions (equivalent to componentWillUnmount) + window.localStorage.removeItem("threejs-editor"); + }; + }, []); + + return ( + + + + + + + + + ); +} diff --git a/src/components/ThreejsEditorModal.jsx b/src/components/ThreejsEditorModal.jsx deleted file mode 100644 index e0a9b424..00000000 --- a/src/components/ThreejsEditorModal.jsx +++ /dev/null @@ -1,294 +0,0 @@ -import { Made } from "@exabyte-io/made.js"; -import PropTypes from "prop-types"; -import React from "react"; -import { ModalBody } from "react-bootstrap"; -import * as THREE from "three"; -import { RemoveMultipleSelectionGroupCommand } from "three/editor/js/commands/RemoveMultipleSelectionGroupCommand"; -import { SetSceneCommand } from "three/editor/js/commands/SetSceneCommand"; -import { SubmitMultipleSelectionCommand } from "three/editor/js/commands/SubmitMultipleSelectionCommand"; -import { Editor } from "three/editor/js/Editor"; -import { Menubar } from "three/editor/js/Menubar"; -import { Player } from "three/editor/js/Player"; -import { Script } from "three/editor/js/Script"; -import { Sidebar } from "three/editor/js/Sidebar"; -import { Toolbar } from "three/editor/js/Toolbar"; -import { Viewport } from "three/editor/js/Viewport"; - -import settings from "../settings"; -import { materialsToThreeDSceneData, ThreeDSceneDataToMaterial } from "../utils"; -import { AlertDialog } from "./AlertDialog"; -import { ModalDialog } from "./ModalDialog"; - -export class ThreejsEditorModal extends ModalDialog { - constructor(props) { - super(props); - this.editor = undefined; - this.domElement = undefined; - - this.showAlert = this.showAlert.bind(this); - this.submitMultipleSelectionGroup = this.submitMultipleSelectionGroup.bind(this); - this.removeMultipleSelectionGroup = this.removeMultipleSelectionGroup.bind(this); - this.showSubmissionMultipleSelectionModal = - this.showSubmissionMultipleSelectionModal.bind(this); - this.isMultipleSelectionGroupSubmitted = this.isMultipleSelectionGroupSubmitted.bind(this); - this.forceExitFromEditor = this.forceExitFromEditor.bind(this); - this.exitWithCallback = this.exitWithCallback.bind(this); - this.extractMaterialAndHide = this.extractMaterialAndHide.bind(this); - this.onExtractMaterialError = this.onExtractMaterialError.bind(this); - } - - initialize(el) { - if (!el) return; - this.domElement = el; - this.setNumberFormat(); - this.initializeEditor(); - this.addEventListeners(); - this.addSignalsListeners(); - this.loadScene(); - } - - // eslint-disable-next-line no-unused-vars - componentDidUpdate(prevProps, prevState, snapshot) { - window.localStorage.removeItem("threejs-editor"); - } - - /** - * `Number.prototype.format` is used inside three.js editor codebase to format the numbers. - * The editor does not start without it. The ESLint line is a way to turn off the warning shown in the console. - */ - // eslint-disable-next-line class-methods-use-this - setNumberFormat() { - /* eslint func-names: ["off"] */ - /* eslint no-extend-native: [0, { "exceptions": ["Object"] }] */ - Number.prototype.format = function () { - return this.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"); - }; - } - - initializeCamera = () => { - // create a PerspectiveCamera at specific position and pass to the editor to override the default one. - const camera = new THREE.PerspectiveCamera(50, 1, 0.01, 20000); - camera.name = "Camera"; - camera.position.copy(new THREE.Vector3(0, -20, 8)); - camera.lookAt(new THREE.Vector3(0, 0, 0)); - return camera; - }; - - initializeControls = () => { - window.VIEW_HELPER.controls.panSpeed = 0.006; - window.VIEW_HELPER.controls.rotationSpeed = 0.015; - window.VIEW_HELPER.controls.zoomSpeed = 0.2; - }; - - initializeLights() { - const directionalLight = new THREE.DirectionalLight("#FFFFFF"); - directionalLight.position.copy(new THREE.Vector3(0.2, 0.2, -1).normalize()); - directionalLight.intensity = 1.2; - this.editor.scene.add(directionalLight); - } - - /** - * Initialize threejs editor and add it to the DOM. - */ - initializeEditor() { - // adjust the orientation to have Z-axis up/down - THREE.Object3D.DefaultUp.set(0, 0, 1); - - // initialize editor and set the scene background - this.editor = new Editor(this.initializeCamera()); - this.editor.scene.background = new THREE.Color(settings.backgroundColor); - - // pass onHide handler to editor - this.editor.onHide = this.onHide; - - // initialize viewport and add it to the DOM - const viewport = new Viewport(this.editor); - this.domElement.appendChild(viewport.dom); - - // initialize UI elements and add them to the DOM - const script = new Script(this.editor); - this.domElement.appendChild(script.dom); - const player = new Player(this.editor); - this.domElement.appendChild(player.dom); - const menubar = new Menubar(this.editor); - this.domElement.appendChild(menubar.dom); - const sidebar = new Sidebar(this.editor); - this.domElement.appendChild(sidebar.dom); - const toolbar = new Toolbar(this.editor); - this.domElement.appendChild(toolbar.dom); - - this.initializeControls(); - - this.initializeLights(); - } - - /** - * Add dragover listeners to group the objects. - */ - addEventListeners() { - document.addEventListener( - "dragover", - (event) => { - event.preventDefault(); - event.dataTransfer.dropEffect = "copy"; - }, - false, - ); - const onResize = () => this.editor.signals.windowResize.dispatch(); - window.addEventListener("resize", onResize, false); - onResize(); - } - - /** - * Handle signals from the editor - */ - addSignalsListeners() { - this.editor.signals.editorClosed.add(() => { - this.onHide(); - }); - } - - /** - * Load the scene based on the given materials. - */ - loadScene() { - const loader = new THREE.ObjectLoader(); - const scene = loader.parse(materialsToThreeDSceneData(this.props.materials)); - this.editor.execute(new SetSceneCommand(this.editor, scene)); - this.editor.signals.objectSelected.dispatch(this.editor.camera); - } - - /** - * shows alert with specific parameters - * @typedef {{ text: string, onClick: Function }} ButtonsType - * @typedef {{ title: string, content: string, buttons: ButtonsType }} ShowAlertInputType - * @param {ShowAlertInputType} params - */ - showAlert(params) { - this.alertRef.open(params); - } - - /** - * submits multiple selections group - */ - submitMultipleSelectionGroup() { - this.editor.execute( - new SubmitMultipleSelectionCommand(this.editor, this.editor.multipleSelection), - ); - } - - /** - * removes multiple selection group - */ - removeMultipleSelectionGroup() { - this.editor.execute(new RemoveMultipleSelectionGroupCommand(this.editor)); - } - - /** - * this function shows confirm window if user forgets to submit multiple selection and tries to exit from editor - */ - // TODO: probably this logic could be moved to three js library into 3DEditor, when 3DEditor will use a React library. - showSubmissionMultipleSelectionModal() { - this.showAlert({ - title: "Warning!", - content: - "Multiple selection group is not submitted do you want submit and exit or undo latest changes?", - buttons: [ - { text: "Close", onClick: this.alertRef.close }, - { - text: "Undo and Exit", - onClick: this.exitWithCallback(this.removeMultipleSelectionGroup), - }, - { - text: "Submit and Exit", - onClick: this.exitWithCallback(this.submitMultipleSelectionGroup), - }, - ], - }); - } - - /** - * checks is multiple selection submitted - * @returns {Boolean} true - if multiple selection is submitted false - if not - */ - isMultipleSelectionGroupSubmitted() { - const { scene } = this.editor; - const multipleSelectionGroup = scene.getObjectByProperty("type", "MultipleSelectionGroup"); - - return !multipleSelectionGroup; - } - - /** - * force exit from the modal with initially defined materials - */ - forceExitFromEditor() { - super.onHide(this.materials); - } - - /** - * exit form editor and calls callback - * @param {Function} callback - function that should be called before exit from editor - * @returns {Function} - callback that can be applied to event listener - */ - exitWithCallback(callback) { - return () => { - callback(); - this.extractMaterialAndHide(); - }; - } - - /** - * extracts materials and hides editor - */ - extractMaterialAndHide() { - try { - const material = ThreeDSceneDataToMaterial(this.editor.scene); - super.onHide(material); - } catch { - this.onExtractMaterialError(); - } - } - - /** - * displays error confirm window if we have some errors - */ - onExtractMaterialError() { - this.showAlert({ - content: "Unable to extract a material from the editor!", - title: "Error!", - buttons: [ - { text: "Close", onClick: this.alertRef.close }, - { text: "Exit", onClick: this.forceExitFromEditor }, - ], - }); - } - - /** - * function to be called on Escape click or on exit from editor - */ - onHide() { - try { - const isMultipleSelectionGroupSubmitted = this.isMultipleSelectionGroupSubmitted(); - if (!isMultipleSelectionGroupSubmitted) { - this.showSubmissionMultipleSelectionModal(); - } else { - this.extractMaterialAndHide(); - } - } catch { - this.onExtractMaterialError(); - } - } - - renderBody() { - return ( - - (this.alertRef = ref)} /> -
this.initialize(el)} /> - - ); - } -} - -ThreejsEditorModal.propTypes = { - materials: PropTypes.arrayOf(Made.Material).isRequired, -}; diff --git a/src/exports.js b/src/exports.js index e49bd377..c36e5b5d 100644 --- a/src/exports.js +++ b/src/exports.js @@ -1,2 +1,2 @@ export { ThreeDEditor } from "./components/ThreeDEditor"; -export { ThreejsEditorModal } from "./components/ThreejsEditorModal"; +export { ThreejsEditor } from "./components/ThreejsEditor"; diff --git a/tests/__tests__/components/ThreeDEditor.jsx b/tests/__tests__/components/ThreeDEditor.jsx index 53fccc1b..8ffed1db 100644 --- a/tests/__tests__/components/ThreeDEditor.jsx +++ b/tests/__tests__/components/ThreeDEditor.jsx @@ -4,7 +4,7 @@ import Enzyme from "enzyme"; import React from "react"; import { ThreeDEditor } from "../../../src/components/ThreeDEditor"; -import { ThreejsEditorModal } from "../../../src/components/ThreejsEditorModal"; +import { ThreejsEditor } from "../../../src/components/ThreejsEditor"; import { WaveComponent } from "../../../src/components/WaveComponent"; import { ELEMENT_PROPERTIES, getWaveInstance, MATERIAL_CONFIG, WAVE_SETTINGS } from "../../enums"; import { SELECTORS } from "../../selectors"; @@ -90,7 +90,7 @@ test("preserve three.js editor changes", async () => { })), }, }); - const threeJsEditorModal = wrapper.find(ThreejsEditorModal); + const threeJsEditorModal = wrapper.find(ThreejsEditor); threeJsEditorModal.prop("onHide")(modifiedMaterial); wrapper.update(); From 8f8346a5cbb251206cc800b3e9fa6824381b352c Mon Sep 17 00:00:00 2001 From: VsevolodX <79542055+VsevolodX@users.noreply.github.com> Date: Mon, 21 Aug 2023 12:18:51 -0700 Subject: [PATCH 3/6] update: minor adjustments --- package-lock.json | 334 ++++++++++++++++++++++++++++--- package.json | 7 +- src/components/IconsToolbar.tsx | 1 + src/components/ThreeDEditor.jsx | 2 +- src/components/ThreejsEditor.tsx | 6 +- src/index.jsx | 21 ++ 6 files changed, 331 insertions(+), 40 deletions(-) diff --git a/package-lock.json b/package-lock.json index e8c13908..2c627860 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1493,6 +1493,35 @@ "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==" }, + "@chevrotain/cst-dts-gen": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-10.5.0.tgz", + "integrity": "sha512-lhmC/FyqQ2o7pGK4Om+hzuDrm9rhFYIJ/AXoQBeongmn870Xeb0L6oGEiuR8nohFNL5sMaQEJWCxr1oIVIVXrw==", + "requires": { + "@chevrotain/gast": "10.5.0", + "@chevrotain/types": "10.5.0", + "lodash": "4.17.21" + } + }, + "@chevrotain/gast": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-10.5.0.tgz", + "integrity": "sha512-pXdMJ9XeDAbgOWKuD1Fldz4ieCs6+nLNmyVhe2gZVqoO7v8HXuHYs5OV2EzUtbuai37TlOAQHrTDvxMnvMJz3A==", + "requires": { + "@chevrotain/types": "10.5.0", + "lodash": "4.17.21" + } + }, + "@chevrotain/types": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-10.5.0.tgz", + "integrity": "sha512-f1MAia0x/pAVPWH/T73BJVyO2XU5tI4/iE7cnxb7tqdNTNhQI3Uq3XkqcoteTmD4t1aM0LbHCJOhgIDn07kl2A==" + }, + "@chevrotain/utils": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-10.5.0.tgz", + "integrity": "sha512-hBzuU5+JjB2cqNZyszkDHZgOSrUUT8V3dhgRl8Q9Gp6dAj/H5+KILGjbhDpc3Iy9qmqlm/akuOI2ut9VUtzJxQ==" + }, "@cnakazawa/watch": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz", @@ -3394,22 +3423,93 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" }, - "@react-three/fiber": { - "version": "7.0.29", - "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-7.0.29.tgz", - "integrity": "sha512-TE+/iaGrjluGsPwN2RkLXxKD4ak+unsh0YKIFKGcuAOW9jYcAyMGKAtgFO8MS7/HNCrZZQQSg23sJ8IPgtdkDg==", - "requires": { - "@babel/runtime": "^7.13.10", - "@types/react-reconciler": "^0.26.2", - "react-merge-refs": "^1.1.0", - "react-reconciler": "^0.26.2", - "react-three-fiber": "0.0.0-deprecated", - "react-use-measure": "^2.1.1", - "resize-observer-polyfill": "^1.5.1", - "scheduler": "^0.20.2", + "@react-spring/animated": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.3.tgz", + "integrity": "sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==", + "requires": { + "@react-spring/shared": "~9.7.3", + "@react-spring/types": "~9.7.3" + } + }, + "@react-spring/core": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.3.tgz", + "integrity": "sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==", + "requires": { + "@react-spring/animated": "~9.7.3", + "@react-spring/shared": "~9.7.3", + "@react-spring/types": "~9.7.3" + } + }, + "@react-spring/shared": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.3.tgz", + "integrity": "sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==", + "requires": { + "@react-spring/types": "~9.7.3" + } + }, + "@react-spring/types": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.3.tgz", + "integrity": "sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw==" + }, + "@react-spring/web": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.3.tgz", + "integrity": "sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==", + "requires": { + "@react-spring/animated": "~9.7.3", + "@react-spring/core": "~9.7.3", + "@react-spring/shared": "~9.7.3", + "@react-spring/types": "~9.7.3" + } + }, + "@react-three/drei": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-4.3.3.tgz", + "integrity": "sha512-yokp4ZZgKP/4PS36JHqIoES3Zj1C5zJjCO78uWv9qLA/4LFGLB4ev/rVUz0crA/DjKdYcXxDJR09B7NgWlyofg==", + "requires": { + "@babel/runtime": "^7.11.2", + "@react-spring/web": "^9.0.0-rc.3", + "blob-polyfill": "^4.0.20200601", + "detect-gpu": "^3.0.0", + "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", + "three-stdlib": "^2.0.1", + "troika-three-text": "0.38.1", "use-asset": "^1.0.4", "utility-types": "^3.10.0", - "zustand": "^3.5.1" + "zustand": "^3.0.3" + } + }, + "@react-three/fiber": { + "version": "8.13.7", + "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.13.7.tgz", + "integrity": "sha512-fH1wYi8+A2YZX8uYd9N4hfbAV+kHE565s7f62+SMNmpeynaUsN8NzXACmmJ6BpVKAKdxfvOde6dBGwG1BrWOKQ==", + "requires": { + "@babel/runtime": "^7.17.8", + "@types/react-reconciler": "^0.26.7", + "its-fine": "^1.0.6", + "react-reconciler": "^0.27.0", + "react-use-measure": "^2.1.1", + "scheduler": "^0.21.0", + "suspend-react": "^0.1.3", + "zustand": "^3.7.1" + }, + "dependencies": { + "scheduler": { + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz", + "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==", + "requires": { + "loose-envify": "^1.1.0" + } + } } }, "@rollup/plugin-node-resolve": { @@ -3677,6 +3777,11 @@ "classnames": "*" } }, + "@types/draco3d": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.2.tgz", + "integrity": "sha512-goh23EGr6CLV6aKPwN1p8kBD/7tT5V/bLpToSbarKrwVejqNrspVrv8DhliteYkkhZYrlq/fwKZRRUzH4XN88w==" + }, "@types/eslint": { "version": "7.29.0", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.29.0.tgz", @@ -3773,6 +3878,11 @@ "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz", "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==" }, + "@types/offscreencanvas": { + "version": "2019.7.0", + "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.0.tgz", + "integrity": "sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg==" + }, "@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -3982,8 +4092,7 @@ "@types/webxr": { "version": "0.5.3", "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.3.tgz", - "integrity": "sha512-orrXqFCuuRE5hMuwLZhPaQrukAZxpkMzNJHmKCNJ16XT5yiR5iNBLNdn+xONbfzU2XAXTZR0GA2R99ciUd/2hg==", - "dev": true + "integrity": "sha512-orrXqFCuuRE5hMuwLZhPaQrukAZxpkMzNJHmKCNJ16XT5yiR5iNBLNdn+xONbfzU2XAXTZR0GA2R99ciUd/2hg==" }, "@types/yargs": { "version": "15.0.14", @@ -5639,6 +5748,11 @@ } } }, + "blob-polyfill": { + "version": "4.0.20200601", + "resolved": "https://registry.npmjs.org/blob-polyfill/-/blob-polyfill-4.0.20200601.tgz", + "integrity": "sha512-1jB6WOIp6IDxNyng5+9A8g/f0uiphib2ELCN+XAnlssinsW8s1k4VYG9b1TxIUd3pdm9RJSLQuBh6iohYmD4hA==" + }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -6205,6 +6319,19 @@ } } }, + "chevrotain": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-10.5.0.tgz", + "integrity": "sha512-Pkv5rBY3+CsHOYfV5g/Vs5JY9WTHHDEKOlohI2XeygaZhUeqhAlldZ8Hz9cRmxu709bvS08YzxHdTPHhffc13A==", + "requires": { + "@chevrotain/cst-dts-gen": "10.5.0", + "@chevrotain/gast": "10.5.0", + "@chevrotain/types": "10.5.0", + "@chevrotain/utils": "10.5.0", + "lodash": "4.17.21", + "regexp-to-ast": "0.5.0" + } + }, "chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", @@ -7463,6 +7590,14 @@ "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==" }, + "detect-gpu": { + "version": "3.1.30", + "resolved": "https://registry.npmjs.org/detect-gpu/-/detect-gpu-3.1.30.tgz", + "integrity": "sha512-WUOk8imHH56AWVt6iHry69qbNEFsPjtS6qsinurfxeI3bVYQZzFk8zECTaodLxfeRad7QspDjjkJWkp5vBo8WA==", + "requires": { + "webgl-constants": "^1.1.1" + } + }, "detect-libc": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", @@ -7690,6 +7825,11 @@ "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz", "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==" }, + "draco3d": { + "version": "1.5.6", + "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.6.tgz", + "integrity": "sha512-+3NaRjWktb5r61ZFoDejlykPEFKT5N/LkbXsaddlw6xNSXBanUYpFc2AXXpbJDilPHazcSreU/DpQIaxfX0NfQ==" + }, "dup": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/dup/-/dup-1.0.0.tgz", @@ -9362,8 +9502,7 @@ "fflate": { "version": "0.6.10", "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz", - "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==", - "dev": true + "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==" }, "figgy-pudding": { "version": "3.5.2", @@ -9953,6 +10092,11 @@ } } }, + "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==" + }, "glsl-tokenizer": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/glsl-tokenizer/-/glsl-tokenizer-2.1.5.tgz", @@ -11244,6 +11388,24 @@ "istanbul-lib-report": "^3.0.0" } }, + "its-fine": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.1.1.tgz", + "integrity": "sha512-v1Ia1xl20KbuSGlwoaGsW0oxsw8Be+TrXweidxD9oT/1lAh6O3K3/GIM95Tt6WCiv6W+h2M7RB1TwdoAjQyyKw==", + "requires": { + "@types/react-reconciler": "^0.28.0" + }, + "dependencies": { + "@types/react-reconciler": { + "version": "0.28.2", + "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.2.tgz", + "integrity": "sha512-8tu6lHzEgYPlfDf/J6GOQdIc+gs+S2yAqlby3zTsB3SP2svlqTYe5fwZNtZyfactP74ShooP2vvi1BOp9ZemWw==", + "requires": { + "@types/react": "*" + } + } + } + }, "javascript-natural-sort": { "version": "0.7.1", "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz", @@ -13996,6 +14158,11 @@ "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz", "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==" }, + "ktx-parse": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/ktx-parse/-/ktx-parse-0.4.5.tgz", + "integrity": "sha512-MK3FOody4TXbFf8Yqv7EBbySw7aPvEcPX++Ipt6Sox+/YMFvR5xaTyhfNSk1AEmMy+RYIw81ctN4IMxCB8OAlg==" + }, "language-subtag-registry": { "version": "0.3.22", "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz", @@ -14329,6 +14496,16 @@ "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==" }, + "lodash.omit": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz", + "integrity": "sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==" + }, + "lodash.pick": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz", + "integrity": "sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==" + }, "lodash.template": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz", @@ -14781,6 +14958,11 @@ "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==", "dev": true }, + "mmd-parser": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mmd-parser/-/mmd-parser-1.0.4.tgz", + "integrity": "sha512-Qi0VCU46t2IwfGv5KF0+D/t9cizcDug7qnNoy9Ggk7aucp0tssV8IwTMkBlDbm+VqAf3cdQHTCARKSsuS2MYFg==" + }, "moment": { "version": "2.29.4", "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", @@ -15438,6 +15620,15 @@ "is-wsl": "^2.1.1" } }, + "opentype.js": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/opentype.js/-/opentype.js-1.3.4.tgz", + "integrity": "sha512-d2JE9RP/6uagpQAVtJoF0pJJA/fgai89Cc50Yp0EJHk+eLp6QQ7gBoblsnubRULNY132I0J1QKMJ+JTbMqz4sw==", + "requires": { + "string.prototype.codepointat": "^0.2.1", + "tiny-inflate": "^1.0.3" + } + }, "opn": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz", @@ -16818,6 +17009,11 @@ "uniq": "^1.0.1" } }, + "potpack": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz", + "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==" + }, "prebuild-install": { "version": "5.3.6", "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-5.3.6.tgz", @@ -17657,13 +17853,22 @@ } }, "react-reconciler": { - "version": "0.26.2", - "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.26.2.tgz", - "integrity": "sha512-nK6kgY28HwrMNwDnMui3dvm3rCFjZrcGiuwLc5COUipBK5hWHLOxMJhSnSomirqWwjPBJKV1QcbkI0VJr7Gl1Q==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.27.0.tgz", + "integrity": "sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==", "requires": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" + "scheduler": "^0.21.0" + }, + "dependencies": { + "scheduler": { + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz", + "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==", + "requires": { + "loose-envify": "^1.1.0" + } + } } }, "react-redux": { @@ -18059,11 +18264,6 @@ } } }, - "react-three-fiber": { - "version": "0.0.0-deprecated", - "resolved": "https://registry.npmjs.org/react-three-fiber/-/react-three-fiber-0.0.0-deprecated.tgz", - "integrity": "sha512-EblIqTAsIpkYeM8bZtC4lcpTE0A2zCEGipFB52RgcQq/q+0oryrk7Sxt+sqhIjUu6xMNEVywV8dr74lz5yWO6A==" - }, "react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -18241,6 +18441,11 @@ "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.11.tgz", "integrity": "sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==" }, + "regexp-to-ast": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/regexp-to-ast/-/regexp-to-ast-0.5.0.tgz", + "integrity": "sha512-tlbJqcMHnPKI9zSrystikWKwHkBqu2a/Sgw01h3zFjvYrMxEDYHzzoMZnUrbIfpTFEsoRnnviOXNCzFiSc54Qw==" + }, "regexp.prototype.flags": { "version": "1.4.3", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz", @@ -18475,11 +18680,6 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" }, - "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.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -19016,6 +19216,7 @@ "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -19708,6 +19909,11 @@ "typedarray-pool": "^1.0.0" } }, + "stats.js": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz", + "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==" + }, "statuses": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", @@ -19783,6 +19989,11 @@ "strip-ansi": "^6.0.1" } }, + "string.prototype.codepointat": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz", + "integrity": "sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==" + }, "string.prototype.matchall": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz", @@ -19969,6 +20180,11 @@ "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==" }, + "suspend-react": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz", + "integrity": "sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==" + }, "svg-parser": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", @@ -20315,6 +20531,24 @@ "resolved": "https://registry.npmjs.org/three/-/three-0.155.0.tgz", "integrity": "sha512-sNgCYmDijnIqkD/bMfk+1pHg3YzsxW7V2ChpuP6HCQ8NiZr3RufsXQr8M3SSUMjW4hG+sUk7YbyuY0DncaDTJQ==" }, + "three-stdlib": { + "version": "2.24.2", + "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.24.2.tgz", + "integrity": "sha512-+FWg+evDvjcuwIYopqEz6xCrqadSW6j855EV4/5w/kygwEc2BktB7s4Y8iZEQKGq8g6Srfj5eWQpSK0+51C4Hg==", + "requires": { + "@types/draco3d": "^1.4.0", + "@types/offscreencanvas": "^2019.6.4", + "@types/webxr": "^0.5.2", + "chevrotain": "^10.1.2", + "draco3d": "^1.4.1", + "fflate": "^0.6.9", + "ktx-parse": "^0.4.5", + "mmd-parser": "^1.0.4", + "opentype.js": "^1.3.3", + "potpack": "^1.0.1", + "zstddec": "^0.0.2" + } + }, "throat": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz", @@ -20359,6 +20593,11 @@ "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==", "dev": true }, + "tiny-inflate": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz", + "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==" + }, "tiny-invariant": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz", @@ -20451,6 +20690,25 @@ "punycode": "^2.1.1" } }, + "troika-three-text": { + "version": "0.38.1", + "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.38.1.tgz", + "integrity": "sha512-nf4zLsdFc+u1P7UDaVvODclmtmYLXnRs9w43ZC0iiPTZT+iequ7+Vmbd0s3DOYhgEzIeACDXBdX9bSW/PRjXhA==", + "requires": { + "troika-three-utils": "^0.38.1", + "troika-worker-utils": "^0.38.1" + } + }, + "troika-three-utils": { + "version": "0.38.1", + "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.38.1.tgz", + "integrity": "sha512-uJM1K219B/q3q7SNnWzthSWHzE80JGNPqP4yBKPGqZ0RaXLhzTBtFuKvSQlVYYrqb/RK21iCOf13vtGyPhwM2A==" + }, + "troika-worker-utils": { + "version": "0.38.1", + "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.38.1.tgz", + "integrity": "sha512-Ish/wxrTG2fzody/E7cAjluTHbM7bn5hGmqOCUr33Ig5wleTj5B6miVOlxc6tUskf1ZXhC9Z35d0zyHzWJrwww==" + }, "tryer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", @@ -21237,6 +21495,11 @@ "minimalistic-assert": "^1.0.0" } }, + "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==" + }, "webidl-conversions": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz", @@ -22463,6 +22726,11 @@ "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" }, + "zstddec": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/zstddec/-/zstddec-0.0.2.tgz", + "integrity": "sha512-DCo0oxvcvOTGP/f5FA6tz2Z6wF+FIcEApSTu0zV5sQgn9hoT5lZ9YRAKUraxt9oP7l4e8TnNdi8IZTCX6WCkwA==" + }, "zustand": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz", diff --git a/package.json b/package.json index 7e7f53bc..3f7fcc20 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,8 @@ "@mui/lab": "^5.0.0-alpha.120", "@mui/material": "^5.11.9", "@mui/styles": "^5.11.7", - "@react-three/fiber": "^7.0.0", + "@react-three/fiber": "^8.13.7", + "@react-three/drei": "^4.0.4", "classnames": "2.3.1", "enzyme-adapter-react-16": "^1.15.6", "jquery": "3.6.0", @@ -111,8 +112,8 @@ "node": ">=12.0.0" }, "lint-staged": { - "*.{js,jsx}": "eslint --cache --fix", - "*.{js,jsx,css}": "prettier --write" + "*.{js,jsx,tsx}": "eslint --cache --fix", + "*.{js,jsx,tsx,css}": "prettier --write" }, "browserslist": [ ">0.2%", diff --git a/src/components/IconsToolbar.tsx b/src/components/IconsToolbar.tsx index 40f2b17d..627b30ad 100644 --- a/src/components/IconsToolbar.tsx +++ b/src/components/IconsToolbar.tsx @@ -38,6 +38,7 @@ function IconsToolbar(props: IconToolbarProps) { top: "25px", left: "25px", boxShadow: theme.shadows[4], + zIndex: 100, }; const paperSx: SxProps = { diff --git a/src/components/ThreeDEditor.jsx b/src/components/ThreeDEditor.jsx index c8a79912..86258600 100644 --- a/src/components/ThreeDEditor.jsx +++ b/src/components/ThreeDEditor.jsx @@ -629,7 +629,7 @@ export class ThreeDEditor extends React.Component { show={isThreejsEditorModalShown} onHide={this.onThreejsEditorModalHide} materials={[originalMaterial]} - modalId="threejs-editor" + id="threejs-editor" /> )}
diff --git a/src/components/ThreejsEditor.tsx b/src/components/ThreejsEditor.tsx index 446f643b..5b2ab601 100644 --- a/src/components/ThreejsEditor.tsx +++ b/src/components/ThreejsEditor.tsx @@ -36,11 +36,11 @@ export function ThreejsEditor({ materials }: ThreejsEditorProps): JSX.Element { }, []); return ( - - + + - + diff --git a/src/index.jsx b/src/index.jsx index 001d7b7b..27f4f553 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -8,6 +8,27 @@ import ReactDOM from "react-dom"; import { ThreeDEditor } from "./components/ThreeDEditor"; const domElement = document.getElementById("root"); +const newAtom = [ + { id: 3, value: "Au" }, + { id: 4, value: "O" }, + { id: 5, value: "U" }, + { id: 6, value: "Cl" }, + { id: 7, value: "H" }, + { id: 8, value: "Fr" }, +]; +const newCoordinates = [ + { id: 3, value: [0.5, 0.5, 0.5] }, + { id: 4, value: [0.75, 0.95, 0.5] }, + { id: 5, value: [0.25, 0.25, 0.5] }, + { id: 6, value: [0.75, 0.75, 0.5] }, + { id: 7, value: [0.2, 0.75, 0.2] }, + { id: 8, value: [0.75, 0.75, 0.7] }, +]; + +// Adding the new atom to the defaultMaterialConfig +Made.defaultMaterialConfig.basis.elements.push(...newAtom); +Made.defaultMaterialConfig.basis.coordinates.push(...newCoordinates); + const material = new Made.Material(Made.defaultMaterialConfig); // eslint-disable-next-line react/no-render-return-value window.threeDEditor = ReactDOM.render(, domElement); From 0eb1ed69bd093efe96ee4ea75df00d409478fb2f Mon Sep 17 00:00:00 2001 From: VsevolodX <79542055+VsevolodX@users.noreply.github.com> Date: Mon, 21 Aug 2023 12:40:31 -0700 Subject: [PATCH 4/6] update: edit camera --- src/components/ThreejsEditor.tsx | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/components/ThreejsEditor.tsx b/src/components/ThreejsEditor.tsx index 5b2ab601..be789428 100644 --- a/src/components/ThreejsEditor.tsx +++ b/src/components/ThreejsEditor.tsx @@ -2,7 +2,7 @@ import { Made } from "@exabyte-io/made.js"; import { Box } from "@mui/material"; import { Canvas, useThree } from "@react-three/fiber"; -import React, { useEffect } from "react"; +import React, { useEffect, useRef } from "react"; import * as THREE from "three"; import { materialsToThreeDSceneData } from "../utils"; @@ -10,6 +10,7 @@ import { materialsToThreeDSceneData } from "../utils"; interface ThreejsSceneProps { materials: Made.Material[]; } + function ThreejsScene({ materials }: ThreejsSceneProps): JSX.Element | null { const { scene } = useThree(); @@ -21,13 +22,22 @@ function ThreejsScene({ materials }: ThreejsSceneProps): JSX.Element | null { scene.add(...loadedScene.children); }, [materials, scene]); - return null; // This component is just for side effects, it doesn't render anything + return null; // This component doesn't render anything visually itself } interface ThreejsEditorProps { materials: Made.Material[]; } + export function ThreejsEditor({ materials }: ThreejsEditorProps): JSX.Element { + const cameraRef = useRef(null); + + useEffect(() => { + if (cameraRef.current) { + cameraRef.current.lookAt(new THREE.Vector3(0, 0, 0)); + } + }, []); + useEffect(() => { return () => { // Cleanup actions (equivalent to componentWillUnmount) @@ -40,7 +50,11 @@ export function ThreejsEditor({ materials }: ThreejsEditorProps): JSX.Element { - + From 4bc54b33b2c0229e56d8465d9afaab55ffe28a96 Mon Sep 17 00:00:00 2001 From: VsevolodX <79542055+VsevolodX@users.noreply.github.com> Date: Fri, 25 Aug 2023 20:02:45 -0700 Subject: [PATCH 5/6] update: correct imports --- package-lock.json | 334 +++++----------------------------------------- package.json | 3 +- 2 files changed, 34 insertions(+), 303 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2c627860..e8c13908 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1493,35 +1493,6 @@ "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==" }, - "@chevrotain/cst-dts-gen": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-10.5.0.tgz", - "integrity": "sha512-lhmC/FyqQ2o7pGK4Om+hzuDrm9rhFYIJ/AXoQBeongmn870Xeb0L6oGEiuR8nohFNL5sMaQEJWCxr1oIVIVXrw==", - "requires": { - "@chevrotain/gast": "10.5.0", - "@chevrotain/types": "10.5.0", - "lodash": "4.17.21" - } - }, - "@chevrotain/gast": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-10.5.0.tgz", - "integrity": "sha512-pXdMJ9XeDAbgOWKuD1Fldz4ieCs6+nLNmyVhe2gZVqoO7v8HXuHYs5OV2EzUtbuai37TlOAQHrTDvxMnvMJz3A==", - "requires": { - "@chevrotain/types": "10.5.0", - "lodash": "4.17.21" - } - }, - "@chevrotain/types": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-10.5.0.tgz", - "integrity": "sha512-f1MAia0x/pAVPWH/T73BJVyO2XU5tI4/iE7cnxb7tqdNTNhQI3Uq3XkqcoteTmD4t1aM0LbHCJOhgIDn07kl2A==" - }, - "@chevrotain/utils": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-10.5.0.tgz", - "integrity": "sha512-hBzuU5+JjB2cqNZyszkDHZgOSrUUT8V3dhgRl8Q9Gp6dAj/H5+KILGjbhDpc3Iy9qmqlm/akuOI2ut9VUtzJxQ==" - }, "@cnakazawa/watch": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz", @@ -3423,93 +3394,22 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" }, - "@react-spring/animated": { - "version": "9.7.3", - "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.3.tgz", - "integrity": "sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==", - "requires": { - "@react-spring/shared": "~9.7.3", - "@react-spring/types": "~9.7.3" - } - }, - "@react-spring/core": { - "version": "9.7.3", - "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.3.tgz", - "integrity": "sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==", - "requires": { - "@react-spring/animated": "~9.7.3", - "@react-spring/shared": "~9.7.3", - "@react-spring/types": "~9.7.3" - } - }, - "@react-spring/shared": { - "version": "9.7.3", - "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.3.tgz", - "integrity": "sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==", - "requires": { - "@react-spring/types": "~9.7.3" - } - }, - "@react-spring/types": { - "version": "9.7.3", - "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.3.tgz", - "integrity": "sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw==" - }, - "@react-spring/web": { - "version": "9.7.3", - "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.3.tgz", - "integrity": "sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==", - "requires": { - "@react-spring/animated": "~9.7.3", - "@react-spring/core": "~9.7.3", - "@react-spring/shared": "~9.7.3", - "@react-spring/types": "~9.7.3" - } - }, - "@react-three/drei": { - "version": "4.3.3", - "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-4.3.3.tgz", - "integrity": "sha512-yokp4ZZgKP/4PS36JHqIoES3Zj1C5zJjCO78uWv9qLA/4LFGLB4ev/rVUz0crA/DjKdYcXxDJR09B7NgWlyofg==", - "requires": { - "@babel/runtime": "^7.11.2", - "@react-spring/web": "^9.0.0-rc.3", - "blob-polyfill": "^4.0.20200601", - "detect-gpu": "^3.0.0", - "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", - "three-stdlib": "^2.0.1", - "troika-three-text": "0.38.1", - "use-asset": "^1.0.4", - "utility-types": "^3.10.0", - "zustand": "^3.0.3" - } - }, "@react-three/fiber": { - "version": "8.13.7", - "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.13.7.tgz", - "integrity": "sha512-fH1wYi8+A2YZX8uYd9N4hfbAV+kHE565s7f62+SMNmpeynaUsN8NzXACmmJ6BpVKAKdxfvOde6dBGwG1BrWOKQ==", - "requires": { - "@babel/runtime": "^7.17.8", - "@types/react-reconciler": "^0.26.7", - "its-fine": "^1.0.6", - "react-reconciler": "^0.27.0", + "version": "7.0.29", + "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-7.0.29.tgz", + "integrity": "sha512-TE+/iaGrjluGsPwN2RkLXxKD4ak+unsh0YKIFKGcuAOW9jYcAyMGKAtgFO8MS7/HNCrZZQQSg23sJ8IPgtdkDg==", + "requires": { + "@babel/runtime": "^7.13.10", + "@types/react-reconciler": "^0.26.2", + "react-merge-refs": "^1.1.0", + "react-reconciler": "^0.26.2", + "react-three-fiber": "0.0.0-deprecated", "react-use-measure": "^2.1.1", - "scheduler": "^0.21.0", - "suspend-react": "^0.1.3", - "zustand": "^3.7.1" - }, - "dependencies": { - "scheduler": { - "version": "0.21.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz", - "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==", - "requires": { - "loose-envify": "^1.1.0" - } - } + "resize-observer-polyfill": "^1.5.1", + "scheduler": "^0.20.2", + "use-asset": "^1.0.4", + "utility-types": "^3.10.0", + "zustand": "^3.5.1" } }, "@rollup/plugin-node-resolve": { @@ -3777,11 +3677,6 @@ "classnames": "*" } }, - "@types/draco3d": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.2.tgz", - "integrity": "sha512-goh23EGr6CLV6aKPwN1p8kBD/7tT5V/bLpToSbarKrwVejqNrspVrv8DhliteYkkhZYrlq/fwKZRRUzH4XN88w==" - }, "@types/eslint": { "version": "7.29.0", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.29.0.tgz", @@ -3878,11 +3773,6 @@ "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz", "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==" }, - "@types/offscreencanvas": { - "version": "2019.7.0", - "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.0.tgz", - "integrity": "sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg==" - }, "@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -4092,7 +3982,8 @@ "@types/webxr": { "version": "0.5.3", "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.3.tgz", - "integrity": "sha512-orrXqFCuuRE5hMuwLZhPaQrukAZxpkMzNJHmKCNJ16XT5yiR5iNBLNdn+xONbfzU2XAXTZR0GA2R99ciUd/2hg==" + "integrity": "sha512-orrXqFCuuRE5hMuwLZhPaQrukAZxpkMzNJHmKCNJ16XT5yiR5iNBLNdn+xONbfzU2XAXTZR0GA2R99ciUd/2hg==", + "dev": true }, "@types/yargs": { "version": "15.0.14", @@ -5748,11 +5639,6 @@ } } }, - "blob-polyfill": { - "version": "4.0.20200601", - "resolved": "https://registry.npmjs.org/blob-polyfill/-/blob-polyfill-4.0.20200601.tgz", - "integrity": "sha512-1jB6WOIp6IDxNyng5+9A8g/f0uiphib2ELCN+XAnlssinsW8s1k4VYG9b1TxIUd3pdm9RJSLQuBh6iohYmD4hA==" - }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -6319,19 +6205,6 @@ } } }, - "chevrotain": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-10.5.0.tgz", - "integrity": "sha512-Pkv5rBY3+CsHOYfV5g/Vs5JY9WTHHDEKOlohI2XeygaZhUeqhAlldZ8Hz9cRmxu709bvS08YzxHdTPHhffc13A==", - "requires": { - "@chevrotain/cst-dts-gen": "10.5.0", - "@chevrotain/gast": "10.5.0", - "@chevrotain/types": "10.5.0", - "@chevrotain/utils": "10.5.0", - "lodash": "4.17.21", - "regexp-to-ast": "0.5.0" - } - }, "chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", @@ -7590,14 +7463,6 @@ "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==" }, - "detect-gpu": { - "version": "3.1.30", - "resolved": "https://registry.npmjs.org/detect-gpu/-/detect-gpu-3.1.30.tgz", - "integrity": "sha512-WUOk8imHH56AWVt6iHry69qbNEFsPjtS6qsinurfxeI3bVYQZzFk8zECTaodLxfeRad7QspDjjkJWkp5vBo8WA==", - "requires": { - "webgl-constants": "^1.1.1" - } - }, "detect-libc": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", @@ -7825,11 +7690,6 @@ "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz", "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==" }, - "draco3d": { - "version": "1.5.6", - "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.6.tgz", - "integrity": "sha512-+3NaRjWktb5r61ZFoDejlykPEFKT5N/LkbXsaddlw6xNSXBanUYpFc2AXXpbJDilPHazcSreU/DpQIaxfX0NfQ==" - }, "dup": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/dup/-/dup-1.0.0.tgz", @@ -9502,7 +9362,8 @@ "fflate": { "version": "0.6.10", "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz", - "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==" + "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==", + "dev": true }, "figgy-pudding": { "version": "3.5.2", @@ -10092,11 +9953,6 @@ } } }, - "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==" - }, "glsl-tokenizer": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/glsl-tokenizer/-/glsl-tokenizer-2.1.5.tgz", @@ -11388,24 +11244,6 @@ "istanbul-lib-report": "^3.0.0" } }, - "its-fine": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.1.1.tgz", - "integrity": "sha512-v1Ia1xl20KbuSGlwoaGsW0oxsw8Be+TrXweidxD9oT/1lAh6O3K3/GIM95Tt6WCiv6W+h2M7RB1TwdoAjQyyKw==", - "requires": { - "@types/react-reconciler": "^0.28.0" - }, - "dependencies": { - "@types/react-reconciler": { - "version": "0.28.2", - "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.2.tgz", - "integrity": "sha512-8tu6lHzEgYPlfDf/J6GOQdIc+gs+S2yAqlby3zTsB3SP2svlqTYe5fwZNtZyfactP74ShooP2vvi1BOp9ZemWw==", - "requires": { - "@types/react": "*" - } - } - } - }, "javascript-natural-sort": { "version": "0.7.1", "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz", @@ -14158,11 +13996,6 @@ "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz", "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==" }, - "ktx-parse": { - "version": "0.4.5", - "resolved": "https://registry.npmjs.org/ktx-parse/-/ktx-parse-0.4.5.tgz", - "integrity": "sha512-MK3FOody4TXbFf8Yqv7EBbySw7aPvEcPX++Ipt6Sox+/YMFvR5xaTyhfNSk1AEmMy+RYIw81ctN4IMxCB8OAlg==" - }, "language-subtag-registry": { "version": "0.3.22", "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz", @@ -14496,16 +14329,6 @@ "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==" }, - "lodash.omit": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz", - "integrity": "sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==" - }, - "lodash.pick": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz", - "integrity": "sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==" - }, "lodash.template": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz", @@ -14958,11 +14781,6 @@ "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==", "dev": true }, - "mmd-parser": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/mmd-parser/-/mmd-parser-1.0.4.tgz", - "integrity": "sha512-Qi0VCU46t2IwfGv5KF0+D/t9cizcDug7qnNoy9Ggk7aucp0tssV8IwTMkBlDbm+VqAf3cdQHTCARKSsuS2MYFg==" - }, "moment": { "version": "2.29.4", "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", @@ -15620,15 +15438,6 @@ "is-wsl": "^2.1.1" } }, - "opentype.js": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/opentype.js/-/opentype.js-1.3.4.tgz", - "integrity": "sha512-d2JE9RP/6uagpQAVtJoF0pJJA/fgai89Cc50Yp0EJHk+eLp6QQ7gBoblsnubRULNY132I0J1QKMJ+JTbMqz4sw==", - "requires": { - "string.prototype.codepointat": "^0.2.1", - "tiny-inflate": "^1.0.3" - } - }, "opn": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz", @@ -17009,11 +16818,6 @@ "uniq": "^1.0.1" } }, - "potpack": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz", - "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==" - }, "prebuild-install": { "version": "5.3.6", "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-5.3.6.tgz", @@ -17853,22 +17657,13 @@ } }, "react-reconciler": { - "version": "0.27.0", - "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.27.0.tgz", - "integrity": "sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==", + "version": "0.26.2", + "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.26.2.tgz", + "integrity": "sha512-nK6kgY28HwrMNwDnMui3dvm3rCFjZrcGiuwLc5COUipBK5hWHLOxMJhSnSomirqWwjPBJKV1QcbkI0VJr7Gl1Q==", "requires": { "loose-envify": "^1.1.0", - "scheduler": "^0.21.0" - }, - "dependencies": { - "scheduler": { - "version": "0.21.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz", - "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==", - "requires": { - "loose-envify": "^1.1.0" - } - } + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" } }, "react-redux": { @@ -18264,6 +18059,11 @@ } } }, + "react-three-fiber": { + "version": "0.0.0-deprecated", + "resolved": "https://registry.npmjs.org/react-three-fiber/-/react-three-fiber-0.0.0-deprecated.tgz", + "integrity": "sha512-EblIqTAsIpkYeM8bZtC4lcpTE0A2zCEGipFB52RgcQq/q+0oryrk7Sxt+sqhIjUu6xMNEVywV8dr74lz5yWO6A==" + }, "react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -18441,11 +18241,6 @@ "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.11.tgz", "integrity": "sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==" }, - "regexp-to-ast": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/regexp-to-ast/-/regexp-to-ast-0.5.0.tgz", - "integrity": "sha512-tlbJqcMHnPKI9zSrystikWKwHkBqu2a/Sgw01h3zFjvYrMxEDYHzzoMZnUrbIfpTFEsoRnnviOXNCzFiSc54Qw==" - }, "regexp.prototype.flags": { "version": "1.4.3", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz", @@ -18680,6 +18475,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" }, + "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.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -19216,7 +19016,6 @@ "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", - "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -19909,11 +19708,6 @@ "typedarray-pool": "^1.0.0" } }, - "stats.js": { - "version": "0.17.0", - "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz", - "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==" - }, "statuses": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", @@ -19989,11 +19783,6 @@ "strip-ansi": "^6.0.1" } }, - "string.prototype.codepointat": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz", - "integrity": "sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==" - }, "string.prototype.matchall": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz", @@ -20180,11 +19969,6 @@ "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==" }, - "suspend-react": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz", - "integrity": "sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==" - }, "svg-parser": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", @@ -20531,24 +20315,6 @@ "resolved": "https://registry.npmjs.org/three/-/three-0.155.0.tgz", "integrity": "sha512-sNgCYmDijnIqkD/bMfk+1pHg3YzsxW7V2ChpuP6HCQ8NiZr3RufsXQr8M3SSUMjW4hG+sUk7YbyuY0DncaDTJQ==" }, - "three-stdlib": { - "version": "2.24.2", - "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.24.2.tgz", - "integrity": "sha512-+FWg+evDvjcuwIYopqEz6xCrqadSW6j855EV4/5w/kygwEc2BktB7s4Y8iZEQKGq8g6Srfj5eWQpSK0+51C4Hg==", - "requires": { - "@types/draco3d": "^1.4.0", - "@types/offscreencanvas": "^2019.6.4", - "@types/webxr": "^0.5.2", - "chevrotain": "^10.1.2", - "draco3d": "^1.4.1", - "fflate": "^0.6.9", - "ktx-parse": "^0.4.5", - "mmd-parser": "^1.0.4", - "opentype.js": "^1.3.3", - "potpack": "^1.0.1", - "zstddec": "^0.0.2" - } - }, "throat": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz", @@ -20593,11 +20359,6 @@ "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==", "dev": true }, - "tiny-inflate": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz", - "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==" - }, "tiny-invariant": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz", @@ -20690,25 +20451,6 @@ "punycode": "^2.1.1" } }, - "troika-three-text": { - "version": "0.38.1", - "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.38.1.tgz", - "integrity": "sha512-nf4zLsdFc+u1P7UDaVvODclmtmYLXnRs9w43ZC0iiPTZT+iequ7+Vmbd0s3DOYhgEzIeACDXBdX9bSW/PRjXhA==", - "requires": { - "troika-three-utils": "^0.38.1", - "troika-worker-utils": "^0.38.1" - } - }, - "troika-three-utils": { - "version": "0.38.1", - "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.38.1.tgz", - "integrity": "sha512-uJM1K219B/q3q7SNnWzthSWHzE80JGNPqP4yBKPGqZ0RaXLhzTBtFuKvSQlVYYrqb/RK21iCOf13vtGyPhwM2A==" - }, - "troika-worker-utils": { - "version": "0.38.1", - "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.38.1.tgz", - "integrity": "sha512-Ish/wxrTG2fzody/E7cAjluTHbM7bn5hGmqOCUr33Ig5wleTj5B6miVOlxc6tUskf1ZXhC9Z35d0zyHzWJrwww==" - }, "tryer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", @@ -21495,11 +21237,6 @@ "minimalistic-assert": "^1.0.0" } }, - "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==" - }, "webidl-conversions": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz", @@ -22726,11 +22463,6 @@ "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" }, - "zstddec": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/zstddec/-/zstddec-0.0.2.tgz", - "integrity": "sha512-DCo0oxvcvOTGP/f5FA6tz2Z6wF+FIcEApSTu0zV5sQgn9hoT5lZ9YRAKUraxt9oP7l4e8TnNdi8IZTCX6WCkwA==" - }, "zustand": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz", diff --git a/package.json b/package.json index 3f7fcc20..3449d964 100644 --- a/package.json +++ b/package.json @@ -44,8 +44,7 @@ "@mui/lab": "^5.0.0-alpha.120", "@mui/material": "^5.11.9", "@mui/styles": "^5.11.7", - "@react-three/fiber": "^8.13.7", - "@react-three/drei": "^4.0.4", + "@react-three/fiber": "^7.0.0", "classnames": "2.3.1", "enzyme-adapter-react-16": "^1.15.6", "jquery": "3.6.0", From 0f343f9608b9b2e1f6fcaa4bde109ef010732a78 Mon Sep 17 00:00:00 2001 From: VsevolodX <79542055+VsevolodX@users.noreply.github.com> Date: Fri, 25 Aug 2023 20:03:22 -0700 Subject: [PATCH 6/6] update: add camera and orbit controls --- src/components/ThreejsEditor.tsx | 68 +++++++++++++++++++------------- 1 file changed, 40 insertions(+), 28 deletions(-) diff --git a/src/components/ThreejsEditor.tsx b/src/components/ThreejsEditor.tsx index be789428..d062757d 100644 --- a/src/components/ThreejsEditor.tsx +++ b/src/components/ThreejsEditor.tsx @@ -4,8 +4,10 @@ import { Box } from "@mui/material"; import { Canvas, useThree } from "@react-three/fiber"; import React, { useEffect, useRef } from "react"; import * as THREE from "three"; +import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; import { materialsToThreeDSceneData } from "../utils"; +import { WaveComponent } from "./WaveComponent"; interface ThreejsSceneProps { materials: Made.Material[]; @@ -25,38 +27,48 @@ function ThreejsScene({ materials }: ThreejsSceneProps): JSX.Element | null { return null; // This component doesn't render anything visually itself } +function Camera() { + const { camera, gl } = useThree(); + useEffect(() => { + camera.position.set(-20, 0, 10); + camera.up.set(0, 0, 1); + camera.lookAt(new THREE.Vector3(1, 1, 1)); + + const controls = new OrbitControls(camera, gl.domElement); + return () => controls.dispose(); + }, [camera, gl]); + + return null; +} + interface ThreejsEditorProps { materials: Made.Material[]; } -export function ThreejsEditor({ materials }: ThreejsEditorProps): JSX.Element { - const cameraRef = useRef(null); +export class ThreejsEditor extends WaveComponent { + // eslint-disable-next-line no-useless-constructor + constructor(props: ThreejsEditorProps) { + super(props); + } - useEffect(() => { - if (cameraRef.current) { - cameraRef.current.lookAt(new THREE.Vector3(0, 0, 0)); - } - }, []); + // eslint-disable-next-line @typescript-eslint/no-empty-function + componentDidMount() {} - useEffect(() => { - return () => { - // Cleanup actions (equivalent to componentWillUnmount) - window.localStorage.removeItem("threejs-editor"); - }; - }, []); - - return ( - - - - - - - - - ); + componentWillUnmount() { + // Cleanup actions (equivalent to useEffect with return statement) + window.localStorage.removeItem("threejs-editor"); + } + + render() { + return ( + + + + + + + + + ); + } }