diff --git a/package-lock.json b/package-lock.json index 50457c9..4319ac1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@fortawesome/fontawesome-free": "^5.15.2", + "@types/three": "^0.127.1", "bulma": "^0.9.2", "lodash": "^4.17.21", "normalize.css": "^8.0.1", @@ -58,20 +59,20 @@ "dev": true }, "node_modules/@babel/core": { - "version": "7.13.15", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.13.15.tgz", - "integrity": "sha512-6GXmNYeNjS2Uz+uls5jalOemgIhnTMeaXo+yBUA72kC2uX/8VW6XyhVIo2L8/q0goKQA3EVKx0KOQpVKSeWadQ==", + "version": "7.13.16", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.13.16.tgz", + "integrity": "sha512-sXHpixBiWWFti0AV2Zq7avpTasr6sIAu7Y396c608541qAU2ui4a193m0KSQmfPSKFZLnQ3cvlKDOm3XkuXm3Q==", "dev": true, "dependencies": { "@babel/code-frame": "^7.12.13", - "@babel/generator": "^7.13.9", - "@babel/helper-compilation-targets": "^7.13.13", + "@babel/generator": "^7.13.16", + "@babel/helper-compilation-targets": "^7.13.16", "@babel/helper-module-transforms": "^7.13.14", - "@babel/helpers": "^7.13.10", - "@babel/parser": "^7.13.15", + "@babel/helpers": "^7.13.16", + "@babel/parser": "^7.13.16", "@babel/template": "^7.12.13", "@babel/traverse": "^7.13.15", - "@babel/types": "^7.13.14", + "@babel/types": "^7.13.16", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -88,12 +89,12 @@ } }, "node_modules/@babel/generator": { - "version": "7.13.9", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.9.tgz", - "integrity": "sha512-mHOOmY0Axl/JCTkxTU6Lf5sWOg/v8nUa+Xkt4zMTftX0wqmb6Sh7J8gvcehBw7q0AhrhAR+FDacKjCZ2X8K+Sw==", + "version": "7.13.16", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.16.tgz", + "integrity": "sha512-grBBR75UnKOcUWMp8WoDxNsWCFl//XCK6HWTrBQKTr5SV9f5g0pNOjdyzi/DTBv12S9GnYPInIXQBTky7OXEMg==", "dev": true, "dependencies": { - "@babel/types": "^7.13.0", + "@babel/types": "^7.13.16", "jsesc": "^2.5.1", "source-map": "^0.5.0" } @@ -118,12 +119,12 @@ } }, "node_modules/@babel/helper-compilation-targets": { - "version": "7.13.13", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.13.tgz", - "integrity": "sha512-q1kcdHNZehBwD9jYPh3WyXcsFERi39X4I59I3NadciWtNDyZ6x+GboOxncFK0kXlKIv6BJm5acncehXWUjWQMQ==", + "version": "7.13.16", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.16.tgz", + "integrity": "sha512-3gmkYIrpqsLlieFwjkGgLaSHmhnvlAYzZLlYVjlW+QwI+1zE17kGxuJGmIqDQdYp56XdmGeD+Bswx0UTyG18xA==", "dev": true, "dependencies": { - "@babel/compat-data": "^7.13.12", + "@babel/compat-data": "^7.13.15", "@babel/helper-validator-option": "^7.12.17", "browserslist": "^4.14.5", "semver": "^6.3.0" @@ -210,13 +211,13 @@ } }, "node_modules/@babel/helper-hoist-variables": { - "version": "7.13.0", - "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.13.0.tgz", - "integrity": "sha512-0kBzvXiIKfsCA0y6cFEIJf4OdzfpRuNk4+YTeHZpGGc666SATFKTz6sRncwFnQk7/ugJ4dSrCj6iJuvW4Qwr2g==", + "version": "7.13.16", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.13.16.tgz", + "integrity": "sha512-1eMtTrXtrwscjcAeO4BVK+vvkxaLJSPFz1w1KLawz6HLNi9bPFGBNwwDyVfiu1Tv/vRRFYfoGaKhmAQPGPn5Wg==", "dev": true, "dependencies": { - "@babel/traverse": "^7.13.0", - "@babel/types": "^7.13.0" + "@babel/traverse": "^7.13.15", + "@babel/types": "^7.13.16" } }, "node_modules/@babel/helper-member-expression-to-functions": { @@ -343,14 +344,14 @@ } }, "node_modules/@babel/helpers": { - "version": "7.13.10", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.13.10.tgz", - "integrity": "sha512-4VO883+MWPDUVRF3PhiLBUFHoX/bsLTGFpFK/HqvvfBZz2D57u9XzPVNFVBTc0PW/CWR9BXTOKt8NF4DInUHcQ==", + "version": "7.13.17", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.13.17.tgz", + "integrity": "sha512-Eal4Gce4kGijo1/TGJdqp3WuhllaMLSrW6XcL0ulyUAQOuxHcCafZE8KHg9857gcTehsm/v7RcOx2+jp0Ryjsg==", "dev": true, "dependencies": { "@babel/template": "^7.12.13", - "@babel/traverse": "^7.13.0", - "@babel/types": "^7.13.0" + "@babel/traverse": "^7.13.17", + "@babel/types": "^7.13.17" } }, "node_modules/@babel/highlight": { @@ -365,9 +366,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.13.15", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.15.tgz", - "integrity": "sha512-b9COtcAlVEQljy/9fbcMHpG+UIW9ReF+gpaxDHTlZd0c6/UU9ng8zdySAW9sRTzpvcdCHn6bUcbuYUgGzLAWVQ==", + "version": "7.13.16", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.16.tgz", + "integrity": "sha512-6bAg36mCwuqLO0hbR+z7PHuqWiCeP7Dzg73OpQwsAB1Eb8HnGEz5xYBzCfbu+YjoaJsJs+qheDxVAuqbt3ILEw==", "dev": true, "bin": { "parser": "bin/babel-parser.js" @@ -788,12 +789,12 @@ } }, "node_modules/@babel/plugin-transform-block-scoping": { - "version": "7.12.13", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.13.tgz", - "integrity": "sha512-Pxwe0iqWJX4fOOM2kEZeUuAxHMWb9nK+9oh5d11bsLoB0xMg+mkDpt0eYuDZB7ETrY9bbcVlKUGTOGWy7BHsMQ==", + "version": "7.13.16", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.13.16.tgz", + "integrity": "sha512-ad3PHUxGnfWF4Efd3qFuznEtZKoBp0spS+DgqzVzRPV7urEBvPLue3y2j80w4Jf2YLzZHj8TOv/Lmvdmh3b2xg==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.12.13" + "@babel/helper-plugin-utils": "^7.13.0" }, "peerDependencies": { "@babel/core": "^7.0.0-0" @@ -830,9 +831,9 @@ } }, "node_modules/@babel/plugin-transform-destructuring": { - "version": "7.13.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.13.0.tgz", - "integrity": "sha512-zym5em7tePoNT9s964c0/KU3JPPnuq7VhIxPRefJ4/s82cD+q1mgKfuGRDMCPL0HTyKz4dISuQlCusfgCJ86HA==", + "version": "7.13.17", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.13.17.tgz", + "integrity": "sha512-UAUqiLv+uRLO+xuBKKMEpC+t7YRNVRqBsWWq1yKXbBZBje/t3IXCiSinZhjn/DC3qzBfICeYd2EFGEbHsh5RLA==", "dev": true, "dependencies": { "@babel/helper-plugin-utils": "^7.13.0" @@ -1299,9 +1300,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.13.10", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz", - "integrity": "sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==", + "version": "7.13.17", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.17.tgz", + "integrity": "sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==", "dev": true, "dependencies": { "regenerator-runtime": "^0.13.4" @@ -1319,29 +1320,28 @@ } }, "node_modules/@babel/traverse": { - "version": "7.13.15", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.15.tgz", - "integrity": "sha512-/mpZMNvj6bce59Qzl09fHEs8Bt8NnpEDQYleHUPZQ3wXUMvXi+HJPLars68oAbmp839fGoOkv2pSL2z9ajCIaQ==", + "version": "7.13.17", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.17.tgz", + "integrity": "sha512-BMnZn0R+X6ayqm3C3To7o1j7Q020gWdqdyP50KEoVqaCO2c/Im7sYZSmVgvefp8TTMQ+9CtwuBp0Z1CZ8V3Pvg==", "dev": true, "dependencies": { "@babel/code-frame": "^7.12.13", - "@babel/generator": "^7.13.9", + "@babel/generator": "^7.13.16", "@babel/helper-function-name": "^7.12.13", "@babel/helper-split-export-declaration": "^7.12.13", - "@babel/parser": "^7.13.15", - "@babel/types": "^7.13.14", + "@babel/parser": "^7.13.16", + "@babel/types": "^7.13.17", "debug": "^4.1.0", "globals": "^11.1.0" } }, "node_modules/@babel/types": { - "version": "7.13.14", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.14.tgz", - "integrity": "sha512-A2aa3QTkWoyqsZZFl56MLUsfmh7O0gN41IPvXAE/++8ojpbz12SszD7JEGYVdn4f9Kt4amIei07swF1h4AqmmQ==", + "version": "7.13.17", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.17.tgz", + "integrity": "sha512-RawydLgxbOPDlTLJNtoIypwdmAy//uQIzlKt2+iBiJaRlVuI6QLUxVAyWGNfOzp8Yu4L4lLIacoCyTNtpb4wiA==", "dev": true, "dependencies": { "@babel/helper-validator-identifier": "^7.12.11", - "lodash": "^4.17.19", "to-fast-properties": "^2.0.0" } }, @@ -1463,6 +1463,11 @@ "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==", "dev": true }, + "node_modules/@types/three": { + "version": "0.127.1", + "resolved": "https://registry.npmjs.org/@types/three/-/three-0.127.1.tgz", + "integrity": "sha512-e90iYq3zde3axANg7BPZY0fKrez1AzveamIIFk23PMh9WtCx91geokDy+yEAIymdIldgUpvezAP6+zCV3oekXw==" + }, "node_modules/@webassemblyjs/ast": { "version": "1.11.0", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.0.tgz", @@ -2661,9 +2666,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.3.717", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.717.tgz", - "integrity": "sha512-OfzVPIqD1MkJ7fX+yTl2nKyOE4FReeVfMCzzxQS+Kp43hZYwHwThlGP+EGIZRXJsxCM7dqo8Y65NOX/HP12iXQ==", + "version": "1.3.718", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.718.tgz", + "integrity": "sha512-CikzdUSShGXwjq1pcW740wK8j+KbazgHZiwzlHICejDaczM6OVsPcrZmBHPwzj9i2rj5twg20MBwp+cYZwldYA==", "dev": true }, "node_modules/emoji-regex": { @@ -6247,9 +6252,9 @@ } }, "node_modules/webpack": { - "version": "5.34.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.34.0.tgz", - "integrity": "sha512-+WiFMgaZqhu7zKN64LQ7z0Ml4WWI+9RwG6zmS0wJDQXiCeg3hpN8fYFNJ+6WlosDT55yVxTfK7XHUAOVR4rLyA==", + "version": "5.35.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.35.0.tgz", + "integrity": "sha512-au3gu55yYF/h6NXFr0KZPZAYxS6Nlc595BzYPke8n0CSff5WXcoixtjh5LC/8mXunkRKxhymhXmBY0+kEbR6jg==", "dev": true, "dependencies": { "@types/eslint-scope": "^3.7.0", @@ -6675,20 +6680,20 @@ "dev": true }, "@babel/core": { - "version": "7.13.15", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.13.15.tgz", - "integrity": "sha512-6GXmNYeNjS2Uz+uls5jalOemgIhnTMeaXo+yBUA72kC2uX/8VW6XyhVIo2L8/q0goKQA3EVKx0KOQpVKSeWadQ==", + "version": "7.13.16", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.13.16.tgz", + "integrity": "sha512-sXHpixBiWWFti0AV2Zq7avpTasr6sIAu7Y396c608541qAU2ui4a193m0KSQmfPSKFZLnQ3cvlKDOm3XkuXm3Q==", "dev": true, "requires": { "@babel/code-frame": "^7.12.13", - "@babel/generator": "^7.13.9", - "@babel/helper-compilation-targets": "^7.13.13", + "@babel/generator": "^7.13.16", + "@babel/helper-compilation-targets": "^7.13.16", "@babel/helper-module-transforms": "^7.13.14", - "@babel/helpers": "^7.13.10", - "@babel/parser": "^7.13.15", + "@babel/helpers": "^7.13.16", + "@babel/parser": "^7.13.16", "@babel/template": "^7.12.13", "@babel/traverse": "^7.13.15", - "@babel/types": "^7.13.14", + "@babel/types": "^7.13.16", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -6698,12 +6703,12 @@ } }, "@babel/generator": { - "version": "7.13.9", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.9.tgz", - "integrity": "sha512-mHOOmY0Axl/JCTkxTU6Lf5sWOg/v8nUa+Xkt4zMTftX0wqmb6Sh7J8gvcehBw7q0AhrhAR+FDacKjCZ2X8K+Sw==", + "version": "7.13.16", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.16.tgz", + "integrity": "sha512-grBBR75UnKOcUWMp8WoDxNsWCFl//XCK6HWTrBQKTr5SV9f5g0pNOjdyzi/DTBv12S9GnYPInIXQBTky7OXEMg==", "dev": true, "requires": { - "@babel/types": "^7.13.0", + "@babel/types": "^7.13.16", "jsesc": "^2.5.1", "source-map": "^0.5.0" } @@ -6728,12 +6733,12 @@ } }, "@babel/helper-compilation-targets": { - "version": "7.13.13", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.13.tgz", - "integrity": "sha512-q1kcdHNZehBwD9jYPh3WyXcsFERi39X4I59I3NadciWtNDyZ6x+GboOxncFK0kXlKIv6BJm5acncehXWUjWQMQ==", + "version": "7.13.16", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.16.tgz", + "integrity": "sha512-3gmkYIrpqsLlieFwjkGgLaSHmhnvlAYzZLlYVjlW+QwI+1zE17kGxuJGmIqDQdYp56XdmGeD+Bswx0UTyG18xA==", "dev": true, "requires": { - "@babel/compat-data": "^7.13.12", + "@babel/compat-data": "^7.13.15", "@babel/helper-validator-option": "^7.12.17", "browserslist": "^4.14.5", "semver": "^6.3.0" @@ -6808,13 +6813,13 @@ } }, "@babel/helper-hoist-variables": { - "version": "7.13.0", - "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.13.0.tgz", - "integrity": "sha512-0kBzvXiIKfsCA0y6cFEIJf4OdzfpRuNk4+YTeHZpGGc666SATFKTz6sRncwFnQk7/ugJ4dSrCj6iJuvW4Qwr2g==", + "version": "7.13.16", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.13.16.tgz", + "integrity": "sha512-1eMtTrXtrwscjcAeO4BVK+vvkxaLJSPFz1w1KLawz6HLNi9bPFGBNwwDyVfiu1Tv/vRRFYfoGaKhmAQPGPn5Wg==", "dev": true, "requires": { - "@babel/traverse": "^7.13.0", - "@babel/types": "^7.13.0" + "@babel/traverse": "^7.13.15", + "@babel/types": "^7.13.16" } }, "@babel/helper-member-expression-to-functions": { @@ -6941,14 +6946,14 @@ } }, "@babel/helpers": { - "version": "7.13.10", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.13.10.tgz", - "integrity": "sha512-4VO883+MWPDUVRF3PhiLBUFHoX/bsLTGFpFK/HqvvfBZz2D57u9XzPVNFVBTc0PW/CWR9BXTOKt8NF4DInUHcQ==", + "version": "7.13.17", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.13.17.tgz", + "integrity": "sha512-Eal4Gce4kGijo1/TGJdqp3WuhllaMLSrW6XcL0ulyUAQOuxHcCafZE8KHg9857gcTehsm/v7RcOx2+jp0Ryjsg==", "dev": true, "requires": { "@babel/template": "^7.12.13", - "@babel/traverse": "^7.13.0", - "@babel/types": "^7.13.0" + "@babel/traverse": "^7.13.17", + "@babel/types": "^7.13.17" } }, "@babel/highlight": { @@ -6963,9 +6968,9 @@ } }, "@babel/parser": { - "version": "7.13.15", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.15.tgz", - "integrity": "sha512-b9COtcAlVEQljy/9fbcMHpG+UIW9ReF+gpaxDHTlZd0c6/UU9ng8zdySAW9sRTzpvcdCHn6bUcbuYUgGzLAWVQ==", + "version": "7.13.16", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.16.tgz", + "integrity": "sha512-6bAg36mCwuqLO0hbR+z7PHuqWiCeP7Dzg73OpQwsAB1Eb8HnGEz5xYBzCfbu+YjoaJsJs+qheDxVAuqbt3ILEw==", "dev": true }, "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": { @@ -7281,12 +7286,12 @@ } }, "@babel/plugin-transform-block-scoping": { - "version": "7.12.13", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.13.tgz", - "integrity": "sha512-Pxwe0iqWJX4fOOM2kEZeUuAxHMWb9nK+9oh5d11bsLoB0xMg+mkDpt0eYuDZB7ETrY9bbcVlKUGTOGWy7BHsMQ==", + "version": "7.13.16", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.13.16.tgz", + "integrity": "sha512-ad3PHUxGnfWF4Efd3qFuznEtZKoBp0spS+DgqzVzRPV7urEBvPLue3y2j80w4Jf2YLzZHj8TOv/Lmvdmh3b2xg==", "dev": true, "requires": { - "@babel/helper-plugin-utils": "^7.12.13" + "@babel/helper-plugin-utils": "^7.13.0" } }, "@babel/plugin-transform-classes": { @@ -7314,9 +7319,9 @@ } }, "@babel/plugin-transform-destructuring": { - "version": "7.13.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.13.0.tgz", - "integrity": "sha512-zym5em7tePoNT9s964c0/KU3JPPnuq7VhIxPRefJ4/s82cD+q1mgKfuGRDMCPL0HTyKz4dISuQlCusfgCJ86HA==", + "version": "7.13.17", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.13.17.tgz", + "integrity": "sha512-UAUqiLv+uRLO+xuBKKMEpC+t7YRNVRqBsWWq1yKXbBZBje/t3IXCiSinZhjn/DC3qzBfICeYd2EFGEbHsh5RLA==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.13.0" @@ -7690,9 +7695,9 @@ } }, "@babel/runtime": { - "version": "7.13.10", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz", - "integrity": "sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==", + "version": "7.13.17", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.17.tgz", + "integrity": "sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==", "dev": true, "requires": { "regenerator-runtime": "^0.13.4" @@ -7710,29 +7715,28 @@ } }, "@babel/traverse": { - "version": "7.13.15", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.15.tgz", - "integrity": "sha512-/mpZMNvj6bce59Qzl09fHEs8Bt8NnpEDQYleHUPZQ3wXUMvXi+HJPLars68oAbmp839fGoOkv2pSL2z9ajCIaQ==", + "version": "7.13.17", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.17.tgz", + "integrity": "sha512-BMnZn0R+X6ayqm3C3To7o1j7Q020gWdqdyP50KEoVqaCO2c/Im7sYZSmVgvefp8TTMQ+9CtwuBp0Z1CZ8V3Pvg==", "dev": true, "requires": { "@babel/code-frame": "^7.12.13", - "@babel/generator": "^7.13.9", + "@babel/generator": "^7.13.16", "@babel/helper-function-name": "^7.12.13", "@babel/helper-split-export-declaration": "^7.12.13", - "@babel/parser": "^7.13.15", - "@babel/types": "^7.13.14", + "@babel/parser": "^7.13.16", + "@babel/types": "^7.13.17", "debug": "^4.1.0", "globals": "^11.1.0" } }, "@babel/types": { - "version": "7.13.14", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.14.tgz", - "integrity": "sha512-A2aa3QTkWoyqsZZFl56MLUsfmh7O0gN41IPvXAE/++8ojpbz12SszD7JEGYVdn4f9Kt4amIei07swF1h4AqmmQ==", + "version": "7.13.17", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.17.tgz", + "integrity": "sha512-RawydLgxbOPDlTLJNtoIypwdmAy//uQIzlKt2+iBiJaRlVuI6QLUxVAyWGNfOzp8Yu4L4lLIacoCyTNtpb4wiA==", "dev": true, "requires": { "@babel/helper-validator-identifier": "^7.12.11", - "lodash": "^4.17.19", "to-fast-properties": "^2.0.0" } }, @@ -7838,6 +7842,11 @@ "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==", "dev": true }, + "@types/three": { + "version": "0.127.1", + "resolved": "https://registry.npmjs.org/@types/three/-/three-0.127.1.tgz", + "integrity": "sha512-e90iYq3zde3axANg7BPZY0fKrez1AzveamIIFk23PMh9WtCx91geokDy+yEAIymdIldgUpvezAP6+zCV3oekXw==" + }, "@webassemblyjs/ast": { "version": "1.11.0", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.0.tgz", @@ -8794,9 +8803,9 @@ } }, "electron-to-chromium": { - "version": "1.3.717", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.717.tgz", - "integrity": "sha512-OfzVPIqD1MkJ7fX+yTl2nKyOE4FReeVfMCzzxQS+Kp43hZYwHwThlGP+EGIZRXJsxCM7dqo8Y65NOX/HP12iXQ==", + "version": "1.3.718", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.718.tgz", + "integrity": "sha512-CikzdUSShGXwjq1pcW740wK8j+KbazgHZiwzlHICejDaczM6OVsPcrZmBHPwzj9i2rj5twg20MBwp+cYZwldYA==", "dev": true }, "emoji-regex": { @@ -11553,9 +11562,9 @@ } }, "webpack": { - "version": "5.34.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.34.0.tgz", - "integrity": "sha512-+WiFMgaZqhu7zKN64LQ7z0Ml4WWI+9RwG6zmS0wJDQXiCeg3hpN8fYFNJ+6WlosDT55yVxTfK7XHUAOVR4rLyA==", + "version": "5.35.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.35.0.tgz", + "integrity": "sha512-au3gu55yYF/h6NXFr0KZPZAYxS6Nlc595BzYPke8n0CSff5WXcoixtjh5LC/8mXunkRKxhymhXmBY0+kEbR6jg==", "dev": true, "requires": { "@types/eslint-scope": "^3.7.0", diff --git a/package.json b/package.json index 2fed340..c424c7e 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "main": "dist/main.js", "dependencies": { "@fortawesome/fontawesome-free": "^5.15.2", + "@types/three": "^0.127.1", "bulma": "^0.9.2", "lodash": "^4.17.21", "normalize.css": "^8.0.1", diff --git a/src/js/controls/BoreholePopup.ts b/src/js/controls/BoreholePopup.ts index 4ec5779..d9f6ba9 100644 --- a/src/js/controls/BoreholePopup.ts +++ b/src/js/controls/BoreholePopup.ts @@ -22,6 +22,7 @@ export class BoreholePopup extends Control { height: '100%', parentDiv: null }; + _source; //#region private class fields: private _innerHTML; @@ -99,7 +100,7 @@ export class BoreholePopup extends Control { domEvent.on(this._clearButton, 'mouseup', domEvent.stopPropagation); domEvent.on(this._clearButton, 'click', domEvent.stopPropagation); domEvent.on(this._clearButton, 'click', domEvent.preventDefault); - domEvent.on(this._clearButton, 'click', this._close, this);; + domEvent.on(this._clearButton, 'click', this.close, this);; this._toggleVisibility(false); @@ -108,7 +109,7 @@ export class BoreholePopup extends Control { } } - show(a) { + show() { //this._clearContent(); this._toggleVisibility(true); //this._animate(true); @@ -149,7 +150,7 @@ export class BoreholePopup extends Control { this._contentPane.appendChild(table); } - private _close(e) { + close() { this._clearContent(); this._toggleVisibility(false); this.emit("closed"); @@ -191,7 +192,7 @@ export class BoreholePopup extends Control { // var f = this._eventConnections[i]; // f.remove(); //} - domEvent.off(this._clearButton, 'click', this._close); + domEvent.off(this._clearButton, 'click', this.close); //C.destroy(this.domNode); //this.getContainer().parentNode.removeChild(this.getContainer()); this._innerHTML = this._menu = this._body = this._contentLabel = this._contentPane = this._clearButton = null; diff --git a/src/js/controls/Control.ts b/src/js/controls/Control.ts index 8ede139..2b344d2 100644 --- a/src/js/controls/Control.ts +++ b/src/js/controls/Control.ts @@ -1,5 +1,6 @@ import * as util from '../core/utilities'; import { EventEmitter } from '../core/EventEmitter'; +import { Map } from '../core/Map'; abstract class Control extends EventEmitter { @@ -32,12 +33,12 @@ abstract class Control extends EventEmitter { abstract onAdd(map) : HTMLElement; - addTo(map) { + addTo(map: Map): Control { this._map = map; - var container = this._container = this.onAdd(map); - var pos = this.getPosition();//"topright" - var corner = map._controlCorners[pos]; + let container = this._container = this.onAdd(map); + let pos = this.getPosition();//"topright" + let corner = map.controlCorners[pos]; if (container) { // $(container).addClass('gba-control'); container.classList.add("gba-control"); @@ -49,7 +50,6 @@ abstract class Control extends EventEmitter { corner.appendChild(container); } } - return this; } diff --git a/src/js/core/Map.js b/src/js/core/Map.ts similarity index 81% rename from src/js/core/Map.js rename to src/js/core/Map.ts index 171f1d9..1fdbc62 100644 --- a/src/js/core/Map.js +++ b/src/js/core/Map.ts @@ -1,233 +1,230 @@ -import { OrbitControls } from '../lib/OrbitControls'; -import * as dom from './domUtil'; -import { HomeButton } from '../controls/HomeButton'; -import { ZoomControl } from '../controls/ZoomControl'; -import { BoreholeControl } from '../controls/BoreholeControl'; -import { BoreholePopup } from '../controls/BoreholePopup'; -import * as util from './utilities'; -import { TinLayer } from '../layer/TinLayer'; -import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera'; -import { Vector3 } from 'three/src/math/Vector3'; - -class Map extends OrbitControls { - - container; - _layers; - _controlCorners; - _controlContainer; - _controls; - size; - camera; - container; - length; - width; - height; - x; y; z; - title; - serviceUrl; - basemaps; - title; - - constructor(x, y, z, scene, container) { - - let size = Math.max(x.max - x.min, y.max - y.min, z.max - z.min); - let center = new Vector3((x.min + x.max) / 2, (y.min + y.max) / 2, 0); - let width, height; - if (container.clientWidth && container.clientHeight) { - width = container.clientWidth; - height = container.clientHeight; - } else { - width = window.innerWidth; - height = window.innerHeight; - } - - let camera = new PerspectiveCamera(30, width / height, 100, 100000); - const camDirection = new Vector3(-0.5, -Math.SQRT1_2, 0.5); - // const camDirection = new Vector3(0, 0, 1); - const camOffset = camDirection.multiplyScalar(size * 2); - camera.position.copy(center); - camera.position.add(camOffset); - camera.near = size * 0.1; - camera.far = size * 25; - camera.updateProjectionMatrix(); - - // call parent constructor of OrbitControls - super(size, center, camera, scene, container); - - this.size = size; - this.camera = camera; - this.container = container; - this.length = x.max - x.min; - this.width = y.max - y.min; - this.height = z.max - z.min; - this.x = x; - this.y = y; - this.z = z; - this.center = center; - this.baseExtent = { - x: x, - y: y - }; - - //init the control corners - if (this._initControlPos) { - this._initControlPos(); - } - - // to do: initialize map title via serviceUrl: - // this.title = "Geological 3D model of Vienna"; - - // to do: initialize layers via serviceUrl: - // this.serviceUrl = serviceUrl; - this._layers = {}; - - this.basemaps = { - "currentVersion": 10.01, - "services": [ - { "name": "osm:wms", "type": "MapServer", 'image': 'background_osm_world_topography.png', 'title': 'OSM WMS' }, - { "name": "esri:topograhy", "type": "MapServer", 'image': 'background_esri_world_topography.png', 'title': 'ESRI Topography' }, - - ] - }; - } - - static async build(scene, container, serviceUrl) { - const modelData = await util.getMetadata(serviceUrl); - let modelarea = modelData.modelarea; - - - - - - - // do your async stuff here - // now instantiate and return a class - let map = new Map(modelarea.x, modelarea.y, modelarea.z, scene, container); - map._initDataLayers(modelData.mappedfeatures); - map._initControls(); - - map.title = modelData.model.model_name; - return map; - } - - get layers() { - return this._layers; - } - - async _initDataLayers(mappedFeatures) { - const callStack = []; - for (let i = 0; i < mappedFeatures.length; i++) { - let layerData = mappedFeatures[i]; - let dxfLayer = new TinLayer({ - featuregeom_id: layerData.featuregeom_id, - q: true, - type: "3dface", - name: layerData.preview.legend_text, //layerData.legend_description, - description: "test", - color: layerData.preview.legend_color, //layerData.color - citation: layerData.geologicdescription !== null ? layerData.geologicdescription.citation : null, - feature_type: layerData.geologicdescription !== null ? layerData.geologicdescription['feature type'] : null, - }); - callStack.push(this.addLayer(dxfLayer)) - } - await Promise.all(callStack); - this.emit("ready"); - } - - _initControlPos() { - //var test = document.getElementById("webgl"); - - var corners = this._controlCorners = {}; - var l = 'gba-'; - var container = this._controlContainer = - //util.create('div', l + 'control-container', this.domElement); - dom.createDom("div", { "class": l + 'control-container' }, this.container); - - function createCorner(vSide, hSide) { - var className = l + vSide + ' ' + l + hSide; - - //corners[vSide + hSide] = util.create('div', className, container); - corners[vSide + hSide] = dom.createDom("div", { "class": className }, container); - } - - createCorner('top', 'left'); - createCorner('top', 'right'); - createCorner('bottom', 'left'); - createCorner('bottom', 'right'); - } - - _initControls() { - this._controls = this._controls || {}; - // this._controls.homeControl = (new HomeButton()).addTo(this); - let homeControl = this._controls.homeControl = new HomeButton(); - homeControl.addTo(this); - - let zoomControl = this._controls.zoomControl = new ZoomControl(); - zoomControl.addTo(this); - - this._controls.maptoolControl = new BoreholeControl().addTo(this); - this._controls.boreholePopup = new BoreholePopup({parentDiv: 'gba-borehole-control-parent-id'}); - this._controls.boreholePopup.addTo(this); - } - - async addLayer(layer) { - let id = util.stamp(layer); - if (this._layers[id]) { - return this; - } - this._layers[id] = layer; - - //layer._mapToAdd = this; - layer.index = id; - - //if (layer.beforeAdd) { - // layer.beforeAdd(this); - //} - //this.whenReady(layer._layerAdd, layer); - await layer._layerAdd(this); - this.emit("change"); - return this; - } - - removeLayer(layer) { - let id = util.stamp(layer); - - if (!this._layers[id]) { return this; } - - //if (this._loaded) { - // layer.onRemove(this); - //} - layer.onRemove(this); - this.emit("change"); - //if (layer.getAttribution && this.attributionControl) { - // this.attributionControl.removeAttribution(layer.getAttribution()); - - //} - - //if (layer.getEvents) { - // this.off(layer.getEvents(), layer); - //} - - delete this._layers[id]; - - //if (this._loaded) { - // this.emit('layerremove', { layer: layer }); - // layer.emit('remove'); - //} - - layer._map = layer._mapToAdd = null; - - return this; - } - - hasLayer(layer) { - return !!layer && (util.stamp(layer) in this._layers); - } - - getCenter() { // (Boolean) -> LatLng - return this.target; - } - -} - +import { OrbitControls } from '../lib/OrbitControls'; +import * as dom from './domUtil'; +import { HomeButton } from '../controls/HomeButton'; +import { ZoomControl } from '../controls/ZoomControl'; +import { BoreholeControl } from '../controls/BoreholeControl'; +import { BoreholePopup } from '../controls/BoreholePopup'; +import * as util from './utilities'; +import { TinLayer } from '../layer/TinLayer'; +import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera'; +import { Vector3 } from 'three/src/math/Vector3'; + +class Map extends OrbitControls { + + private _layers; + private _controlContainer; + private _controlCorners; + private _controls; + public container: HTMLElement; + public size: number; + public camera: PerspectiveCamera; + public length: number; + public width: number; + public height: number; + public x: number; public y: number; public z: number; + public title: string; + public serviceUrl: string; + public basemaps: Object; + public baseExtent: Object; + + constructor(x, y, z, scene, container) { + + let size = Math.max(x.max - x.min, y.max - y.min, z.max - z.min); + let center = new Vector3((x.min + x.max) / 2, (y.min + y.max) / 2, 0); + let width, height; + if (container.clientWidth && container.clientHeight) { + width = container.clientWidth; + height = container.clientHeight; + } else { + width = window.innerWidth; + height = window.innerHeight; + } + + let camera = new PerspectiveCamera(30, width / height, 100, 100000); + const camDirection = new Vector3(-0.5, -Math.SQRT1_2, 0.5); + // const camDirection = new Vector3(0, 0, 1); + const camOffset = camDirection.multiplyScalar(size * 2); + camera.position.copy(center); + camera.position.add(camOffset); + camera.near = size * 0.1; + camera.far = size * 25; + camera.updateProjectionMatrix(); + + // call parent constructor of OrbitControls + super(size, center, camera, scene, container); + + this.size = size; + this.camera = camera; + this.container = container; + this.length = x.max - x.min; + this.width = y.max - y.min; + this.height = z.max - z.min; + this.x = x; + this.y = y; + this.z = z; + this.center = center; + this.baseExtent = { + x: x, + y: y + }; + + //init the control corners + if (this._initControlPos) { + this._initControlPos(); + } + + // to do: initialize map title via serviceUrl: + // this.title = "Geological 3D model of Vienna"; + // this.serviceUrl = serviceUrl; + this._layers = {}; + + this.basemaps = { + "currentVersion": 10.01, + "services": [ + { "name": "osm:wms", "type": "MapServer", 'image': 'background_osm_world_topography.png', 'title': 'OSM WMS' }, + { "name": "esri:topograhy", "type": "MapServer", 'image': 'background_esri_world_topography.png', 'title': 'ESRI Topography' }, + + ] + }; + } + + static async build(scene, container, serviceUrl) { + const modelData = await util.getMetadata(serviceUrl); + let modelarea = modelData.modelarea; + + // do your async stuff here + // now instantiate and return a class + let map = new Map(modelarea.x, modelarea.y, modelarea.z, scene, container); + map._initDataLayers(modelData.mappedfeatures); + map._initControls(); + + map.title = modelData.model.model_name; + return map; + } + + get layers() { + return this._layers; + } + + get controlCorners() { + return this._controlCorners; + } + + async _initDataLayers(mappedFeatures) { + const callStack = []; + for (let i = 0; i < mappedFeatures.length; i++) { + let layerData = mappedFeatures[i]; + let dxfLayer = new TinLayer({ + featuregeom_id: layerData.featuregeom_id, + q: true, + type: "3dface", + name: layerData.preview.legend_text, //layerData.legend_description, + description: "test", + color: layerData.preview.legend_color, //layerData.color + citation: layerData.geologicdescription !== null ? layerData.geologicdescription.citation : null, + feature_type: layerData.geologicdescription !== null ? layerData.geologicdescription['feature type'] : null, + }); + callStack.push(this.addLayer(dxfLayer)) + } + await Promise.all(callStack); + this.emit("ready"); + } + + private _initControlPos() { + let corners = this._controlCorners = {}; + let l = 'gba-'; + this._controlContainer = + dom.createDom("div", { "class": l + 'control-container' }, this.container); + + // function createCorner(vSide, hSide) { + // var className = l + vSide + ' ' + l + hSide; + + // //corners[vSide + hSide] = util.create('div', className, container); + // corners[vSide + hSide] = dom.createDom("div", { "class": className }, this._controlContainer); + // } + let createCorner = (vSide: string, hSide: string): void => { + let className = l + vSide + ' ' + l + hSide; + corners[vSide + hSide] = dom.createDom("div", { "class": className }, this._controlContainer); + } + + createCorner('top', 'left'); + createCorner('top', 'right'); + createCorner('bottom', 'left'); + createCorner('bottom', 'right'); + } + + private _initControls() { + this._controls = this._controls || {}; + // this._controls.homeControl = (new HomeButton()).addTo(this); + let homeControl = this._controls.homeControl = new HomeButton(); + homeControl.addTo(this); + + let zoomControl = this._controls.zoomControl = new ZoomControl(); + zoomControl.addTo(this); + + this._controls.maptoolControl = new BoreholeControl().addTo(this); + this._controls.boreholePopup = new BoreholePopup({ parentDiv: 'gba-borehole-control-parent-id' }); + this._controls.boreholePopup.addTo(this); + } + + async addLayer(layer) { + let id = util.stamp(layer); + if (this._layers[id]) { + return this; + } + this._layers[id] = layer; + + //layer._mapToAdd = this; + layer.index = id; + + //if (layer.beforeAdd) { + // layer.beforeAdd(this); + //} + //this.whenReady(layer._layerAdd, layer); + await layer._layerAdd(this); + this.emit("change"); + return this; + } + + removeLayer(layer) { + let id = util.stamp(layer); + + if (!this._layers[id]) { return this; } + + //if (this._loaded) { + // layer.onRemove(this); + //} + layer.onRemove(this); + this.emit("change"); + //if (layer.getAttribution && this.attributionControl) { + // this.attributionControl.removeAttribution(layer.getAttribution()); + + //} + + //if (layer.getEvents) { + // this.off(layer.getEvents(), layer); + //} + + delete this._layers[id]; + + //if (this._loaded) { + // this.emit('layerremove', { layer: layer }); + // layer.emit('remove'); + //} + + layer._map = layer._mapToAdd = null; + + return this; + } + + hasLayer(layer) { + return !!layer && (util.stamp(layer) in this._layers); + } + + getCenter() { // (Boolean) -> LatLng + return this.target; + } + +} + export { Map }; \ No newline at end of file diff --git a/src/js/layer/DemLayer.js b/src/js/layer/DemLayer.js index 5f66d19..77da4d3 100644 --- a/src/js/layer/DemLayer.js +++ b/src/js/layer/DemLayer.js @@ -7,9 +7,8 @@ import { DoubleSide, FlatShading, LinearFilter } from 'three/src/constants'; import * as browser from '../core/browser'; import { Texture } from 'three/src/textures/Texture'; import { TextureLoader } from 'three/src/loaders/TextureLoader'; -import { Plane } from 'three/src/math/Plane'; + import { Vector3 } from 'three/src/math/Vector3'; -import { Color } from 'three/src/math/Color'; import proj4 from 'proj4/dist/proj4'; import { ShaderMaterial } from 'three/src/materials/ShaderMaterial'; import { shader } from '../clip/shader'; @@ -163,13 +162,6 @@ export class DemLayer extends Layer { this.opacity = sum_opacity / this.materials.length; } - - // filterMaterial(filterXMin, filterXMax, filterYMax) { - // this.xMinLocalPlane.constant = filterXMin; - // this.xMaxLocalPlane.constant = filterXMax; - // this.yMaxLocalPlane.constant = filterYMax; - // } - scaleZ(z) { this.objectGroup.scale.z = z; } diff --git a/src/js/layer/Layer.js b/src/js/layer/Layer.ts similarity index 78% rename from src/js/layer/Layer.js rename to src/js/layer/Layer.ts index 93c3e3a..988da1a 100644 --- a/src/js/layer/Layer.js +++ b/src/js/layer/Layer.ts @@ -1,24 +1,38 @@ import { EventEmitter } from '../core/EventEmitter'; import { BoreholePopup } from '../controls/BoreholePopup'; +import { Map } from '../core/Map'; +import { Scene } from 'three/src/scenes/Scene'; -class Layer extends EventEmitter { +abstract class Layer extends EventEmitter { + + // #region "properties" + protected _map: Map; + protected _popup: BoreholePopup; + protected _popupHandlersAdded: boolean = false; + // #endregion "properties" options = { pane: 'overlayPane', nonBubblingEvents: [] // Array of events that should not be bubbled to DOM parents (like the map) }; - constructor(size) { + constructor() { super(); } - addTo(map) { + abstract onAdd(map): void; + abstract onRemove(map): void; + abstract scaleZ(z): void; + abstract setVisible(visible): void; + abstract setWireframeMode(wireframe: boolean): void; + + addTo(map: Map) { map.addLayer(this); return this; } async _layerAdd(e) { - var map = e;//.target; + let map = e;//.target; // check in case layer gets added and then removed before the map is ready if (!map.hasLayer(this)) { return; } @@ -39,11 +53,8 @@ class Layer extends EventEmitter { //map.fire('layeradd', { layer: this }); } - setWireframeMode(wireframe) { - return; - } - getScene() { + getScene(): Scene { return this._map.scene; } @@ -61,7 +72,7 @@ class Layer extends EventEmitter { if (!this._popup) { //this._popup = new L.Popup(options, this); - this._popup = new BoreholePopup({}, this); + this._popup = new BoreholePopup({}); this._popup.addTo(this._map); this._popup.setChartContent(content); } @@ -92,7 +103,7 @@ class Layer extends EventEmitter { // Closes the popup bound to this layer if it is open. closePopup() { if (this._popup) { - this._popup._close(); + this._popup.close(); //this._popup.removeFrom(this._map); } return this; diff --git a/src/js/layer/TinLayer.js b/src/js/layer/TinLayer.ts similarity index 65% rename from src/js/layer/TinLayer.js rename to src/js/layer/TinLayer.ts index 0f7353c..dc3aa04 100644 --- a/src/js/layer/TinLayer.js +++ b/src/js/layer/TinLayer.ts @@ -4,27 +4,44 @@ import { DoubleSide } from 'three/src/constants'; import { Mesh } from 'three/src/objects/Mesh'; import { Layer } from './Layer'; import { BitStream } from '../lib/bitstream'; -import { Plane } from 'three/src/math/Plane'; import { Vector3 } from 'three/src/math/Vector3'; import { Color } from 'three/src/math/Color'; import { MyMeshStandardMaterial } from '../clip/MyMeshStandardMaterial'; import { Group } from 'three/src/objects/Group'; +// topography overlay +// import { Texture } from 'three/src/textures/Texture'; +import { TextureLoader } from 'three/src/loaders/TextureLoader'; +import proj4 from 'proj4/dist/proj4'; const POINTURL = 'https://geusegdi01.geus.dk/geom3d/data/nodes/'; const EDGEURL = 'https://geusegdi01.geus.dk/geom3d/data/triangles/'; class TinLayer extends Layer { + q: boolean; queryableObjects; borderVisible; scale; objectGroup; + visible: boolean; + opacity: number; + materialParameter: Array; + materialsArray: Array; + material: MyMeshStandardMaterial; + featuregeom_id: number; + color: string; + mainMesh; + uniforms: Object; + public baseExtent = { + min: { x: 0, y: 0 }, + max: { x: 0, y: 0 } + }; + index: number; constructor(params) { super(); - //this.features = []; this.visible = true; this.opacity = 1; this.materialParameter = []; @@ -37,6 +54,7 @@ class TinLayer extends Layer { this.borderVisible = false; this.scale = 1; this.objectGroup = new Group(); + this.q = true; } setWireframeMode(wireframe) { @@ -53,23 +71,6 @@ class TinLayer extends Layer { this.emit('visibility-change'); } - addObject (object, queryable) { - if (queryable === undefined) { - queryable = this.q; - } - this.objectGroup.add(object); - if (queryable) { - this._addQueryableObject(object); - } - } - - _addQueryableObject (object) { - this.queryableObjects.push(object); - //for (var i = 0, l = object.children.length; i < l; i++) { - // this._addQueryableObject(object.children[i]); - //} - } - scaleZ(z) { this.scale = z; this.objectGroup.scale.z = z; @@ -80,18 +81,18 @@ class TinLayer extends Layer { map.update(); } - async build(app_scene) { + onRemove(map) { + map.scene.remove(this.objectGroup); + } + async build(app_scene) { let geometry = new BufferGeometry(); - // let positions = new Float32BufferAttribute(this.vertices, 3); let posArray = await (this.points(this.featuregeom_id)); - // console.log(posArray); let positions = new Float32BufferAttribute(posArray, 3); geometry.setAttribute('position', positions); //var TypeArray = this.idx.length > 65535 ? Uint32Array : Uint16Array; //var indices = this.indices = new TypeArray(this.idx); - // let indexArray = this.indices = new Uint16Array(this.idx); let indexArray = await (this.edges(this.featuregeom_id)); let indices = new Uint16BufferAttribute(indexArray, 1);//.setDynamic(true); @@ -101,10 +102,11 @@ class TinLayer extends Layer { geometry.computeBoundingSphere(); geometry.computeVertexNormals();// computed vertex normals are orthogonal to the face f geometry.computeBoundingBox(); - - this.xLocalPlane = new Plane(new Vector3(-1, 0, 0), this._map.x.max); - //this.addObject(this.xLocalPlane, false); - this.yLocalPlane = new Plane(new Vector3(0, 1, 0), this._map.y.max); + let boundingBox = geometry.boundingBox; + this.baseExtent.min.x = boundingBox.min.x; + this.baseExtent.min.y = boundingBox.min.y; + this.baseExtent.max.x = boundingBox.max.x; + this.baseExtent.max.y = boundingBox.max.y; let color = parseInt(this.color, 16); // this.material = new MeshStandardMaterial({ @@ -130,40 +132,52 @@ class TinLayer extends Layer { this.material = new MyMeshStandardMaterial({ color: color, metalness: 0.1, - roughness: 0.75, + roughness: 0.75, flatShading: true, side: DoubleSide, // clippingPlanes: [this.xLocalPlane, this.yLocalPlane], // clipIntersection: false, // clipShadows: true, - }, uniforms.clipping); + }, uniforms.clipping); this.materialsArray.push(this.material); let mesh = this.mainMesh = new Mesh(geometry, this.material); mesh.userData.layerId = this.index; - this.addObject(mesh, true); + this._addObject(mesh, true); if (app_scene) { app_scene.add(this.objectGroup); } } - filterMaterial(filterX, filterY) { - this.xLocalPlane.constant = filterX; - this.yLocalPlane.constant = filterY; + private _addObject(object, queryable) { + if (queryable === undefined) { + queryable = this.q; + } + this.objectGroup.add(object); + if (queryable) { + this._addQueryableObject(object); + } + } + + private _addQueryableObject(object) { + this.queryableObjects.push(object); + //for (var i = 0, l = object.children.length; i < l; i++) { + // this._addQueryableObject(object.children[i]); + //} } async points(geomId) { const url = POINTURL + geomId; - const buffer = await this.request(url); - return this.unpackVertices(buffer); + const buffer = await this._request(url); + return this._unpackVertices(buffer); } async edges(geomId) { const url = EDGEURL + geomId; - const buffer = await this.request(url); - return this.unpackEdges(buffer); + const buffer = await this._request(url); + return this._unpackEdges(buffer); } - async request(url) { + private async _request(url) { const response = await fetch(url); if (response.ok) { return response.arrayBuffer(); @@ -172,7 +186,7 @@ class TinLayer extends Layer { } } - unpackEdges(arrayBuffer) { + private _unpackEdges(arrayBuffer) { const METABYTES = 13; var dv = new DataView(arrayBuffer, METABYTES); var indices = new Uint32Array((arrayBuffer.byteLength - METABYTES) / 4); @@ -182,7 +196,7 @@ class TinLayer extends Layer { return indices; } - unpackVertices(arrayBuffer) { + private _unpackVertices(arrayBuffer) { const DIMENSIONS = 3; const ONEBYTE = 1, FOURBYTE = 4; // bytes count for metadata in PG_pointcloud (significant bits compression) @@ -199,9 +213,9 @@ class TinLayer extends Layer { ptr += FOURBYTE; significantBitsCount = dataView.getUint32(ptr, true); ptr += FOURBYTE; - commonBits = this.readCommonBits(dataView, ptr); + commonBits = this._readCommonBits(dataView, ptr); ptr += FOURBYTE; - significantBits = this.readSignificantBits(dataView, ptr, bytesCount); + significantBits = this._readSignificantBits(dataView, ptr, bytesCount); let value = 0.0; for (var j = dim, i = 0; i < pointsCount; j += DIMENSIONS, i++) { value = significantBits.readBits(significantBitsCount) | commonBits; @@ -216,22 +230,67 @@ class TinLayer extends Layer { return posArray; } - readCommonBits(dataView, ptr) { + private _readCommonBits(dataView, ptr) { var temp = new Int32Array(1); temp[0] = dataView.getInt32(ptr, false); // why false ?? var combits = new BitStream(new Uint8Array(temp.buffer)); return combits.readBits(32); } - readSignificantBits(dataView, ptr, bytesCount) { - var temp = new Int32Array(bytesCount / 4); - for (var i = ptr, j = 0; i < ptr + bytesCount; i += 4, j++) { + private _readSignificantBits(dataView, ptr, bytesCount) { + let temp = new Int32Array(bytesCount / 4); + for (let i = ptr, j = 0; i < ptr + bytesCount; i += 4, j++) { temp[j] = dataView.getInt32(i); } - var sigbits = new BitStream(new Uint8Array(temp.buffer)); + let sigbits = new BitStream(new Uint8Array(temp.buffer)); return sigbits; } + async loadTextureWms(url, imageParameter) { + let dest = new proj4.Proj("EPSG:3857"); + let source = new proj4.Proj("EPSG:3034"); + let p1 = proj4.toPoint([this.baseExtent.min.x, this.baseExtent.min.y]); + let p2 = proj4.toPoint([this.baseExtent.max.x, this.baseExtent.max.y]); + + proj4.transform(source, dest, p1); + proj4.transform(source, dest, p2); + + // let bbox = this.baseExtent.x.min + "," + this.baseExtent.y.min + "," + this.baseExtent.x.max + "," + this.baseExtent.y.max; + let bbox = p1.x + "," + p1.y + "," + p2.x + "," + p2.y; + + let params = { + version: "1.3.0", + service: "WMS", + request: "GetMap", + "width": imageParameter.width, + "height": imageParameter.height, + // "size": imageParameter.width + "," + imageParameter.height, + "crs": "EPSG:3857", // + imageParameter.bboxSR, + // "bboxSR": imageParameter.bboxSR, + // "bbox": "3955850,2183470.1545778836,4527300,2502829.8454221168", + "bbox": bbox, + "styles": "", + // "format": "png", + "format": "image/png", + "layers": "OSM-WMS" + // "f": "pjson" + }; + let query = Object.keys(params) + .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])) + .join('&'); + let texturePath = url + '?' + query; + + const textureLoader = new TextureLoader(); + return new Promise((resolve, reject) => { + textureLoader.load( + texturePath, + (texture) => resolve(texture), + undefined, + err => reject(err) + ); + }); + } + } export { TinLayer }; \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index 3b5b58e..d3faedb 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -40729,11 +40729,6 @@ class Application { } addEventListeners() { - - // domEvent.on(this.mapIcon, 'click', () => { - // this.basemapControl.show(); - // }, this); - domEvent.on(window, 'resize', this.onWindowResize, this); domEvent.on(window, 'keydown', this.keydown, this); @@ -40896,26 +40891,3 @@ class Application { let container = document.getElementById("webgl"); let app = new Application(container); app.build(); - -// new Vue({ -// el: '#app', -// components: { Modal }, -// data() { -// return { -// isModalVisible: false, -// } -// }, -// mounted() { -// let container = document.getElementById("webgl"); -// let app = new Application(container); -// app.build(); -// }, -// methods: { -// showModal() { -// this.isModalVisible = true; -// }, -// closeModal() { -// this.isModalVisible = false; -// }, -// } -// }); diff --git a/src/js/tasks/BoreholeIdentify.js b/src/js/tasks/BoreholeIdentify.js index 355399e..5b16992 100644 --- a/src/js/tasks/BoreholeIdentify.js +++ b/src/js/tasks/BoreholeIdentify.js @@ -14,8 +14,7 @@ export class BoreholeIdentify { this.type = "DxfIdentify"; this.searchUrl = ""; this.camera = defaults.camera; - this.domElement = defaults.domElement; - //this.layer = defaults.layer; + this.domElement = defaults.domElement; this.highlightMaterial = defaults.highlightMaterial; this.layers = defaults.layers; } @@ -35,16 +34,11 @@ export class BoreholeIdentify { } execute(params) { - // let canvasOffset = $(this.domElement).offset(); let canvasOffset = this._getOffset(this.domElement); let xClickedOnCanvas = params.clientX - canvasOffset.left; - let yClickedonCanvas = params.clientY - canvasOffset.top; - //this.camera = params.camera; + let yClickedonCanvas = params.clientY - canvasOffset.top; - let eventsResponse = this._intersectObjects(xClickedOnCanvas, yClickedonCanvas, params.width, params.height); - //if (objs.length == 0) { - // // - //} + let eventsResponse = this._intersectObjects(xClickedOnCanvas, yClickedonCanvas, params.width, params.height); return eventsResponse.then( function (response) { return response; @@ -52,7 +46,6 @@ export class BoreholeIdentify { } _intersectObjects(offsetX, offsetY, width, height) { - // let deferred = $.Deferred(); return new Promise( (resolve, reject) => { // (A) if (offsetX === undefined || offsetY === undefined) { @@ -74,8 +67,7 @@ export class BoreholeIdentify { //var raycaster = new THREE.Raycaster(); //raycaster.set(vector, direction); - //raycaster.setFromCamera(mouse, this.camera); - let visibleMehses = this._getvisibleQueryableObjects();//nur die sichtbar sind + let visibleMehses = this._getvisibleQueryableObjects();//only the visible layers let allMeshes = this._getQueryableObjects2();//alle let intersects = []; let intersects1 = raycaster.intersectObjects(visibleMehses, true); @@ -92,11 +84,7 @@ export class BoreholeIdentify { //for (var i = objs.length - 1; i >= 0; i--) { for (let i = 0; i < intersects.length; i++) { let obj = intersects[i]; - if (!obj.object.visible) continue; - // get layerId and featureId of clicked object - //var object = obj.object; - //var layerId = object.userData.layerId; - //var featureId = obj.faceIndex; + if (!obj.object.visible) continue; ; let layer = obj.object; let layerId = layer.userData.layerId; let objectGroup = layer.parent;