From 24bd021f193a2dda016641921dc0ace603e3b56a Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Thu, 8 Apr 2021 17:40:34 +0200 Subject: [PATCH] - orientation box in NorthArrow Control.js - needed extra BoxGeometry.js for orientation box - npm updates --- package-lock.json | 152 ++++++++++++------------- src/js/controls/NorthArrow.js | 208 ++++++++++++++++++++++++++++++---- src/js/core/BoxGeometry.js | 136 ++++++++++++++++++++++ 3 files changed, 398 insertions(+), 98 deletions(-) create mode 100644 src/js/core/BoxGeometry.js diff --git a/package-lock.json b/package-lock.json index 9b6def4..9de4864 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1360,9 +1360,9 @@ } }, "node_modules/@types/eslint": { - "version": "7.2.7", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.7.tgz", - "integrity": "sha512-EHXbc1z2GoQRqHaAT7+grxlTJ3WE2YNeD6jlpPoRc83cCoThRY+NUWjCUZaYmk51OICkPXn2hhphcWcWXgNW0Q==", + "version": "7.2.8", + "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.8.tgz", + "integrity": "sha512-RTKvBsfz0T8CKOGZMfuluDNyMFHnu5lvNr4hWEsQeHXH6FcmIDIozOyWMh36nLGMwVd5UFNXC2xztA8lln22MQ==", "dev": true, "dependencies": { "@types/estree": "*", @@ -1893,9 +1893,9 @@ } }, "node_modules/balanced-match": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.1.tgz", + "integrity": "sha512-qyTw2VPYRg31SlVU5WDdvCSyMTJ3YSP4Kz2CidWZFPFawCiHJdCyKyZeXIGMJ5ebMQYXEI56kDR8tcnDkbZstg==", "dev": true }, "node_modules/bcrypt-pbkdf": { @@ -2021,9 +2021,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001204", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001204.tgz", - "integrity": "sha512-JUdjWpcxfJ9IPamy2f5JaRDCaqJOxDzOSKtbdx4rH9VivMd1vIzoPumsJa9LoMIi4Fx2BV2KZOxWhNkBjaYivQ==", + "version": "1.0.30001207", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001207.tgz", + "integrity": "sha512-UPQZdmAsyp2qfCTiMU/zqGSWOYaY9F9LL61V8f+8MrubsaDGpaHD9HRV/EWZGULZn0Hxu48SKzI5DgFwTvHuYw==", "dev": true }, "node_modules/caseless": { @@ -2206,9 +2206,9 @@ "dev": true }, "node_modules/concurrently": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.0.0.tgz", - "integrity": "sha512-Ik9Igqnef2ONLjN2o/OVx1Ow5tymVvvEwQeYCQdD/oV+CN9oWhxLk7ibcBdOtv0UzBqHCEKRwbKceYoTK8t3fQ==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.0.1.tgz", + "integrity": "sha512-YCF/Wf31a910hXu7eGN9/SyHKD/usw3Shw4IPYuqIsxxC39v92engYlIlOs/zXnBJtX/6aVuhgzfhZeGJkhU4w==", "dev": true, "dependencies": { "chalk": "^4.1.0", @@ -2329,9 +2329,9 @@ } }, "node_modules/core-js-compat": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.9.1.tgz", - "integrity": "sha512-jXAirMQxrkbiiLsCx9bQPJFA6llDadKMpYrBJQJ3/c4/vsPP/fAf29h24tviRlvwUL6AmY5CHLu2GvjuYviQqA==", + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.10.0.tgz", + "integrity": "sha512-9yVewub2MXNYyGvuLnMHcN1k9RkvB7/ofktpeKTIaASyB88YYqGzUnu0ywMMhJrDHOMiTjSHWGzR+i7Wb9Z1kQ==", "dev": true, "dependencies": { "browserslist": "^4.16.3", @@ -2623,9 +2623,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.3.701", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.701.tgz", - "integrity": "sha512-Zd9ofdIMYHYhG1gvnejQDvC/kqSeXQvtXF0yRURGxgwGqDZm9F9Fm3dYFnm5gyuA7xpXfBlzVLN1sz0FjxpKfw==", + "version": "1.3.708", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.708.tgz", + "integrity": "sha512-+A8ggYZ5riOLMcVAuzHx6bforaPzaiLnW1QOMD2SlMYQVi7QQTyQ/WrlZoebIH9ikmgr+tLJGpNITFFCUiQcPw==", "dev": true }, "node_modules/emoji-regex": { @@ -2678,9 +2678,9 @@ } }, "node_modules/envinfo": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.7.4.tgz", - "integrity": "sha512-TQXTYFVVwwluWSFis6K2XKxgrD22jEv0FTuLCQI+OjH7rn93+iY0fSSFM5lrSxFY+H1+B0/cvvlamr3UsBivdQ==", + "version": "7.8.1", + "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz", + "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==", "dev": true, "bin": { "envinfo": "dist/cli.js" @@ -3946,21 +3946,21 @@ } }, "node_modules/mime-db": { - "version": "1.46.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.46.0.tgz", - "integrity": "sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ==", + "version": "1.47.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.47.0.tgz", + "integrity": "sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw==", "dev": true, "engines": { "node": ">= 0.6" } }, "node_modules/mime-types": { - "version": "2.1.29", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.29.tgz", - "integrity": "sha512-Y/jMt/S5sR9OaqteJtslsFZKWOIIqMACsJSiHghlCAyhf7jfVYjKBmLiX8OgpWeW+fjJ2b+Az69aPFPkUOY6xQ==", + "version": "2.1.30", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.30.tgz", + "integrity": "sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg==", "dev": true, "dependencies": { - "mime-db": "1.46.0" + "mime-db": "1.47.0" }, "engines": { "node": ">= 0.6" @@ -4544,13 +4544,13 @@ } }, "node_modules/postcss": { - "version": "8.2.8", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.8.tgz", - "integrity": "sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw==", + "version": "8.2.9", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.9.tgz", + "integrity": "sha512-b+TmuIL4jGtCHtoLi+G/PisuIl9avxs8IZMSmlABRwNz5RLUUACrC+ws81dcomz1nRezm5YPdXiMEzBEKgYn+Q==", "dev": true, "dependencies": { "colorette": "^1.2.2", - "nanoid": "^3.1.20", + "nanoid": "^3.1.22", "source-map": "^0.6.1" }, "engines": { @@ -6223,9 +6223,9 @@ } }, "node_modules/webpack": { - "version": "5.28.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.28.0.tgz", - "integrity": "sha512-1xllYVmA4dIvRjHzwELgW4KjIU1fW4PEuEnjsylz7k7H5HgPOctIq7W1jrt3sKH9yG5d72//XWzsHhfoWvsQVg==", + "version": "5.30.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.30.0.tgz", + "integrity": "sha512-Zr9NIri5yzpfmaMea2lSMV1UygbW0zQsSlGLMgKUm63ACXg6alhd1u4v5UBSBjzYKXJN6BNMGVM7w165e7NxYA==", "dev": true, "dependencies": { "@types/eslint-scope": "^3.7.0", @@ -6536,9 +6536,9 @@ "dev": true }, "node_modules/y18n": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.5.tgz", - "integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==", + "version": "5.0.6", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.6.tgz", + "integrity": "sha512-PlVX4Y0lDTN6E2V4ES2tEdyvXkeKzxa8c/vo0pxPr/TqbztddTP0yn7zZylIyiAuxerqj0Q5GhpJ1YJCP8LaZQ==", "dev": true, "engines": { "node": ">=10" @@ -7722,9 +7722,9 @@ } }, "@types/eslint": { - "version": "7.2.7", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.7.tgz", - "integrity": "sha512-EHXbc1z2GoQRqHaAT7+grxlTJ3WE2YNeD6jlpPoRc83cCoThRY+NUWjCUZaYmk51OICkPXn2hhphcWcWXgNW0Q==", + "version": "7.2.8", + "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.8.tgz", + "integrity": "sha512-RTKvBsfz0T8CKOGZMfuluDNyMFHnu5lvNr4hWEsQeHXH6FcmIDIozOyWMh36nLGMwVd5UFNXC2xztA8lln22MQ==", "dev": true, "requires": { "@types/estree": "*", @@ -8177,9 +8177,9 @@ } }, "balanced-match": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.1.tgz", + "integrity": "sha512-qyTw2VPYRg31SlVU5WDdvCSyMTJ3YSP4Kz2CidWZFPFawCiHJdCyKyZeXIGMJ5ebMQYXEI56kDR8tcnDkbZstg==", "dev": true }, "bcrypt-pbkdf": { @@ -8276,9 +8276,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001204", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001204.tgz", - "integrity": "sha512-JUdjWpcxfJ9IPamy2f5JaRDCaqJOxDzOSKtbdx4rH9VivMd1vIzoPumsJa9LoMIi4Fx2BV2KZOxWhNkBjaYivQ==", + "version": "1.0.30001207", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001207.tgz", + "integrity": "sha512-UPQZdmAsyp2qfCTiMU/zqGSWOYaY9F9LL61V8f+8MrubsaDGpaHD9HRV/EWZGULZn0Hxu48SKzI5DgFwTvHuYw==", "dev": true }, "caseless": { @@ -8433,9 +8433,9 @@ "dev": true }, "concurrently": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.0.0.tgz", - "integrity": "sha512-Ik9Igqnef2ONLjN2o/OVx1Ow5tymVvvEwQeYCQdD/oV+CN9oWhxLk7ibcBdOtv0UzBqHCEKRwbKceYoTK8t3fQ==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.0.1.tgz", + "integrity": "sha512-YCF/Wf31a910hXu7eGN9/SyHKD/usw3Shw4IPYuqIsxxC39v92engYlIlOs/zXnBJtX/6aVuhgzfhZeGJkhU4w==", "dev": true, "requires": { "chalk": "^4.1.0", @@ -8527,9 +8527,9 @@ } }, "core-js-compat": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.9.1.tgz", - "integrity": "sha512-jXAirMQxrkbiiLsCx9bQPJFA6llDadKMpYrBJQJ3/c4/vsPP/fAf29h24tviRlvwUL6AmY5CHLu2GvjuYviQqA==", + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.10.0.tgz", + "integrity": "sha512-9yVewub2MXNYyGvuLnMHcN1k9RkvB7/ofktpeKTIaASyB88YYqGzUnu0ywMMhJrDHOMiTjSHWGzR+i7Wb9Z1kQ==", "dev": true, "requires": { "browserslist": "^4.16.3", @@ -8743,9 +8743,9 @@ } }, "electron-to-chromium": { - "version": "1.3.701", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.701.tgz", - "integrity": "sha512-Zd9ofdIMYHYhG1gvnejQDvC/kqSeXQvtXF0yRURGxgwGqDZm9F9Fm3dYFnm5gyuA7xpXfBlzVLN1sz0FjxpKfw==", + "version": "1.3.708", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.708.tgz", + "integrity": "sha512-+A8ggYZ5riOLMcVAuzHx6bforaPzaiLnW1QOMD2SlMYQVi7QQTyQ/WrlZoebIH9ikmgr+tLJGpNITFFCUiQcPw==", "dev": true }, "emoji-regex": { @@ -8786,9 +8786,9 @@ "dev": true }, "envinfo": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.7.4.tgz", - "integrity": "sha512-TQXTYFVVwwluWSFis6K2XKxgrD22jEv0FTuLCQI+OjH7rn93+iY0fSSFM5lrSxFY+H1+B0/cvvlamr3UsBivdQ==", + "version": "7.8.1", + "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz", + "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==", "dev": true }, "error-ex": { @@ -9781,18 +9781,18 @@ } }, "mime-db": { - "version": "1.46.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.46.0.tgz", - "integrity": "sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ==", + "version": "1.47.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.47.0.tgz", + "integrity": "sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw==", "dev": true }, "mime-types": { - "version": "2.1.29", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.29.tgz", - "integrity": "sha512-Y/jMt/S5sR9OaqteJtslsFZKWOIIqMACsJSiHghlCAyhf7jfVYjKBmLiX8OgpWeW+fjJ2b+Az69aPFPkUOY6xQ==", + "version": "2.1.30", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.30.tgz", + "integrity": "sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg==", "dev": true, "requires": { - "mime-db": "1.46.0" + "mime-db": "1.47.0" } }, "mimic-fn": { @@ -10222,13 +10222,13 @@ } }, "postcss": { - "version": "8.2.8", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.8.tgz", - "integrity": "sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw==", + "version": "8.2.9", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.9.tgz", + "integrity": "sha512-b+TmuIL4jGtCHtoLi+G/PisuIl9avxs8IZMSmlABRwNz5RLUUACrC+ws81dcomz1nRezm5YPdXiMEzBEKgYn+Q==", "dev": true, "requires": { "colorette": "^1.2.2", - "nanoid": "^3.1.20", + "nanoid": "^3.1.22", "source-map": "^0.6.1" }, "dependencies": { @@ -11516,9 +11516,9 @@ } }, "webpack": { - "version": "5.28.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.28.0.tgz", - "integrity": "sha512-1xllYVmA4dIvRjHzwELgW4KjIU1fW4PEuEnjsylz7k7H5HgPOctIq7W1jrt3sKH9yG5d72//XWzsHhfoWvsQVg==", + "version": "5.30.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.30.0.tgz", + "integrity": "sha512-Zr9NIri5yzpfmaMea2lSMV1UygbW0zQsSlGLMgKUm63ACXg6alhd1u4v5UBSBjzYKXJN6BNMGVM7w165e7NxYA==", "dev": true, "requires": { "@types/eslint-scope": "^3.7.0", @@ -11744,9 +11744,9 @@ "dev": true }, "y18n": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.5.tgz", - "integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==", + "version": "5.0.6", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.6.tgz", + "integrity": "sha512-PlVX4Y0lDTN6E2V4ES2tEdyvXkeKzxa8c/vo0pxPr/TqbztddTP0yn7zZylIyiAuxerqj0Q5GhpJ1YJCP8LaZQ==", "dev": true }, "yallist": { diff --git a/src/js/controls/NorthArrow.js b/src/js/controls/NorthArrow.js index 31d856a..68030d1 100644 --- a/src/js/controls/NorthArrow.js +++ b/src/js/controls/NorthArrow.js @@ -8,9 +8,12 @@ import * as domEvent from '../core/domEvent'; import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer'; import { Scene } from 'three/src/scenes/Scene'; import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera'; -// import { BoxGeometry } from 'three/src/geometries/BoxGeometry'; -// import { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial'; -// import { Mesh } from 'three/src/objects/Mesh'; +import { BoxGeometry } from '../core/BoxGeometry'; +import { Mesh } from 'three/src/objects/Mesh'; +import * as material from '../clip/material'; +import { Texture } from 'three/src/textures/Texture'; +import { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial'; +import { DoubleSide } from 'three/src/constants'; import './NorthArrow.css'; @@ -48,34 +51,23 @@ export class NorthArrow extends Control { domEvent.on(this._container, 'mousewheel', domEvent.stopPropagation); let renderer = this.renderer = new WebGLRenderer({ alpha: true }); - renderer.setSize(this.options.width, this.options.height); + renderer.setSize(this.options.width, this.options.height); container.appendChild(renderer.domElement); this._scene = new Scene(); - this._camera = new PerspectiveCamera(30, this.options.width / this.options.height, 0.1, 10000); + this._camera = new PerspectiveCamera(30, this.options.width / this.options.height, 0.1, 10000); this._camera.lookAt(map.center); const camDirection = new Vector3(-0.5, -Math.SQRT1_2, 0.5); // const camDirection = new Vector3(0, 0, 1); const camOffset = camDirection.multiplyScalar(map.size * 2); this._camera.position.copy(map.center); - this._camera.position.add(camOffset); + this._camera.position.add(camOffset); this._camera.lookAt(map.center); this._camera.up = this._map.camera.up; this._camera.updateProjectionMatrix(); this._createArrow(this._scene); - this._buildLabels(); - - // this.geometry = new BoxGeometry(10000, 10000, 10000); - // this.material = new MeshBasicMaterial({ - // color: 800080 - // }); - // this.materials = []; - // this.materials.push(this.material); - // this.mesh = new Mesh(this.geometry, this.material); - // this.mesh.position.set(map.center.x, map.center.y, map.center.z); - // this._scene.add(this.mesh); - + // this._buildLabels(); return container; } @@ -97,7 +89,7 @@ export class NorthArrow extends Control { // this._camera.updateProjectionMatrix(); this.renderer.render(this._scene, this._camera); - this._updateInsetLabelPositions(); + // this._updateInsetLabelPositions(); } _createArrow(app_scene, size = 6) { @@ -111,7 +103,7 @@ export class NorthArrow extends Control { //(this.objectGroup.add(new ArrowHelper(xTo, from, this._map.size * 0.5, 0xf00000, headLength, headWidth)); // Red = x this.objectGroup.add(new ArrowHelper(xTo, from, size, 0xff0000, headLength, headWidth)); // Red = x - let yTo = new Vector3(0, -1, 0); + let yTo = new Vector3(0, 1, 0); // let yTo = new Vector3(from.x, from.y + 1, from.z); // let yDirection = yTo.clone().sub(from); this.objectGroup.add(new ArrowHelper(yTo, from, size, 0x3ad29f, headLength, headWidth)); // Green = y @@ -120,17 +112,188 @@ export class NorthArrow extends Control { // let zTo = new Vector3(from.x, from.y, from.z + 1); // let zDirection = zTo.clone().sub(from); this.objectGroup.add(new ArrowHelper(zTo, from, size, 0x6b716f, headLength, headWidth)); //8 is the length, Gray = z; 20 and 10 are head length and width + + // let spritey = this._makeTextSprite( + // "top", + // { fontsize: 32, backgroundColor: { r: 255, g: 100, b: 100, a: 1 } } + // ); + // // spritey.position.set(2.5, 2.5, 5); + // this.objectGroup.add(spritey); + + + // let myText = this.sprite = new SpriteText('top', 2); + // myText.position.set(2.5, 2.5, 6); + // this.objectGroup.add(myText); + + + + let eastTexture = this._makeTextTexture("E", 0.6, 'rgba(0,0,0,1)'); + let eastMaterial = new MeshBasicMaterial({ + transparent: true, + side: DoubleSide, + map: eastTexture, + // wireframe: true + }); + let westTexture = this._makeTextTexture("W", 0.6, 'rgba(0,0,0,1)'); + let westMaterial = new MeshBasicMaterial({ + transparent: true, + side: DoubleSide, + map: westTexture + }); + let northTexture = this._makeTextTexture("N", 0.6, 'rgba(0,0,0,1)'); + let northMaterial = new MeshBasicMaterial({ + transparent: true, + side: DoubleSide, + map: northTexture + }); + let southTexture = this._makeTextTexture("S", 0.6, 'rgba(0,0,0,1)'); + let southMaterial = new MeshBasicMaterial({ + transparent: true, + side: DoubleSide, + map: southTexture + }); + let topTexture = this._makeTextTexture("top", 0.6, 'rgba(0,0,0,1)'); + let topMaterial = new MeshBasicMaterial({ + transparent: true, + side: DoubleSide, + map: topTexture + }); + + // var mesh1 = new Mesh( + // new PlaneGeometry(5, 5), + // material1 + // ); + // // const yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2; + // // mesh1.scale.set(yScale * canvas.width / canvas.height, yScale, 0); + + // mesh1.position.set(2.5, 2.5, 5.1); + // this.objectGroup.add(mesh1); + + //add box: + this.boxGeometry = new BoxGeometry(5, 5, 5); + this.boxMesh = new Mesh(this.boxGeometry, + [eastMaterial, westMaterial, northMaterial, southMaterial, topMaterial, material.BoxBackFace]); + // material.BoxBackFace.wireframe = true; + this.boxMesh.position.set(2.5, 2.5, 2.5); + this.objectGroup.add(this.boxMesh); if (app_scene) { app_scene.add(this.objectGroup); } } + _makeTextTexture(message, textHeight = 0.6, color = 'rgba(0,0,0,1)') { + let text = `${message}`; + // this.textHeight = textHeight; + // this.color = color; + let backgroundColor = 'rgba(248,248,255,0.8)'; // no background color + + let _padding = 3; + let borderWidth = 0; + let _borderRadius = 0; + let borderColor = 'white'; + + let strokeWidth = 0; + let strokeColor = 'white'; + + let fontFace = 'Arial'; + let fontSize = 100; // defines text resolution + let fontWeight = 'normal'; + + + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + const border = Array.isArray(borderWidth) ? borderWidth : [borderWidth, borderWidth]; // x,y border + const relBorder = border.map(b => b * fontSize * 0.1); // border in canvas units + + const borderRadius = Array.isArray(_borderRadius) ? _borderRadius : [_borderRadius, _borderRadius, _borderRadius, _borderRadius]; // tl tr br bl corners + const relBorderRadius = borderRadius.map(b => b * fontSize * 0.1); // border radius in canvas units + + const padding = Array.isArray(_padding) ? _padding : [_padding, _padding]; // x,y padding + const relPadding = padding.map((p) => p * fontSize * 0.1); // padding in canvas units + + const lines = text.split('\n'); + const font = `${fontWeight} ${fontSize}px ${fontFace}`; + + ctx.font = font; // measure canvas with appropriate font + const innerWidth = Math.max(...lines.map(line => ctx.measureText(line).width)); + const innerHeight = fontSize * lines.length; + canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2; + canvas.height = innerHeight + relBorder[1] * 2 + relPadding[1] * 2; + + // ctx.fillStyle = "rgba( 0, 0, 0, 0 )"; // transparent + // ctx.fillRect( 0, 0, innerWidth, innerHeight ); + // paint background + if (backgroundColor) { + ctx.fillStyle = backgroundColor; + if (!_borderRadius) { + ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, canvas.height - relBorder[1] * 2); + } else { // fill with rounded corners + ctx.beginPath(); + ctx.moveTo(relBorder[0], relBorderRadius[0]); + [ + [relBorder[0], relBorderRadius[0], canvas.width - relBorderRadius[1], relBorder[1], relBorder[1], relBorder[1]], // t + [canvas.width - relBorder[0], canvas.width - relBorder[0], canvas.width - relBorder[0], relBorder[1], relBorderRadius[1], canvas.height - relBorderRadius[2]], // r + [canvas.width - relBorder[0], canvas.width - relBorderRadius[2], relBorderRadius[3], canvas.height - relBorder[1], canvas.height - relBorder[1], canvas.height - relBorder[1]], // b + [relBorder[0], relBorder[0], relBorder[0], canvas.height - relBorder[1], canvas.height - relBorderRadius[3], relBorderRadius[0]], // t + ].forEach(([x0, x1, x2, y0, y1, y2]) => { + ctx.quadraticCurveTo(x0, y0, x1, y1); + ctx.lineTo(x2, y2); + }); + ctx.closePath(); + ctx.fill(); + } + } + + // ctx.font = "Bold 10px Arial"; + // ctx.fillStyle = "rgba(255,0,0,1)"; + // ctx.textAlign = 'center'; + // ctx.textBaseline = 'middle'; + // ctx.fillText('Hello, world!', 5, 5); + ctx.translate(...relBorder); + ctx.translate(...relPadding); + + // paint text + ctx.font = font; // Set font again after canvas is resized, as context properties are reset + ctx.fillStyle = color; + + ctx.textBaseline = 'bottom'; + + const drawTextStroke = strokeWidth > 0; + if (drawTextStroke) { + ctx.lineWidth = strokeWidth * fontSize / 10; + ctx.strokeStyle = strokeColor; + } + + lines.forEach((line, index) => { + const lineX = (innerWidth - ctx.measureText(line).width) / 2; + const lineY = (index + 1) * fontSize; + + + + drawTextStroke == true && ctx.strokeText(line, lineX, lineY); + ctx.fillText(line, lineX, lineY); + + }); + + + + + + + // canvas contents will be used for a texture + let texture = new Texture(canvas) + texture.needsUpdate = true; + + return texture; + } + _buildLabels() { let f = [ { a: ["x"], cl: "red-label", centroid: [[8, 0, 0]] }, - { a: ["y"], cl: "green-label", centroid: [[0, -8, 0]] }, + { a: ["y"], cl: "green-label", centroid: [[0, 8, 0]] }, { a: ["z"], cl: "gray-label", centroid: [[0, 0, 8]] } ]; @@ -174,10 +337,11 @@ export class NorthArrow extends Control { } _updateInsetLabelPositions() { + // this.sprite.quaternion.copy(this._camera.quaternion); // to look at camera let widthHalf = this.options.width / 2; let heightHalf = this.options.height / 2; // var autosize = appSettings.Options.label.autoSize; - + let camera_pos = this._camera.position; let target = new Vector3(0, 0, 0); let c2t = target.sub(camera_pos); diff --git a/src/js/core/BoxGeometry.js b/src/js/core/BoxGeometry.js new file mode 100644 index 0000000..cf5e516 --- /dev/null +++ b/src/js/core/BoxGeometry.js @@ -0,0 +1,136 @@ +import { BufferGeometry } from 'three/src/core/BufferGeometry'; +import { Float32BufferAttribute } from 'three/src/core/BufferAttribute'; +import { Vector3 } from 'three/src/math/Vector3'; + +class BoxGeometry extends BufferGeometry { + + constructor(width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1) { + + super(); + this.type = 'BoxGeometry'; + this.parameters = { + width: width, + height: height, + depth: depth, + widthSegments: widthSegments, + heightSegments: heightSegments, + depthSegments: depthSegments + }; + // const scope = this; + + // segments + widthSegments = Math.floor(widthSegments); + heightSegments = Math.floor(heightSegments); + depthSegments = Math.floor(depthSegments); + + // buffers + const indices = this.indices = []; + const vertices = this.vertices = []; + const normals = this.normals = []; + const uvs = this.uvs = []; + + // helper variables + this.numberOfVertices = 0; + this.groupStart = 0; + + // build each side of the box geometry + let east = this.buildPlane('z', 'y', 'x', - 1, - 1, depth, height, width, depthSegments, heightSegments, 0); // px + // let east = this.buildPlane('z', 'y', 'x', + 1, + 1, depth, height, width, depthSegments, heightSegments, 0); // px + let west = this.buildPlane('z', 'y', 'x', 1, - 1, depth, height, - width, depthSegments, heightSegments, 1); // nx + let north = this.buildPlane('x', 'z', 'y', 1, 1, width, depth, height, widthSegments, depthSegments, 2); // py + let south = this.buildPlane('x', 'z', 'y', 1, - 1, width, depth, - height, widthSegments, depthSegments, 3); // ny + let top = this.buildPlane('x', 'y', 'z', 1, - 1, width, height, depth, widthSegments, heightSegments, 4); // pz + let bottom = this.buildPlane('x', 'y', 'z', - 1, - 1, width, height, - depth, widthSegments, heightSegments, 5); // nz + + // build geometry + this.setIndex(indices); + this.setAttribute('position', new Float32BufferAttribute(vertices, 3)); + this.setAttribute('normal', new Float32BufferAttribute(normals, 3)); + this.setAttribute('uv', new Float32BufferAttribute(uvs, 2)); + } + + buildPlane(u, v, w, udir, vdir, width, height, depth, gridX, gridY, materialIndex) { + const segmentWidth = width / gridX; + const segmentHeight = height / gridY; + + const widthHalf = width / 2; + const heightHalf = height / 2; + const depthHalf = depth / 2; + + const gridX1 = gridX + 1; + const gridY1 = gridY + 1; + + let vertexCounter = 0; + let groupCount = 0; + + let vector = new Vector3(); + // generate vertices, normals and uvs + for (let iy = 0; iy < gridY1; iy++) { + let y = iy * segmentHeight - heightHalf; + for (let ix = 0; ix < gridX1; ix++) { + let x = ix * segmentWidth - widthHalf; + + // set values to correct vector component + vector[u] = x * udir; + vector[v] = y * vdir; + vector[w] = depthHalf; + + // now apply vector to vertex buffer + this.vertices.push(vector.x, vector.y, vector.z); + + // set values to correct vector component + vector[u] = 0; + vector[v] = 0; + vector[w] = depth > 0 ? 1 : - 1; + + // now apply vector to normal buffer + this.normals.push(vector.x, vector.y, vector.z); + + // uvs + this.uvs.push(ix / gridX); + this.uvs.push(1 - (iy / gridY)); + + // counters + vertexCounter += 1; + } + + } + + // indices + + // 1. you need three indices to draw a single face + // 2. a single segment consists of two faces + // 3. so we need to generate six (2*3) indices per segment + for (let iy = 0; iy < gridY; iy++) { + for (let ix = 0; ix < gridX; ix++) { + const a = this.numberOfVertices + ix + gridX1 * iy; + const b = this.numberOfVertices + ix + gridX1 * (iy + 1); + const c = this.numberOfVertices + (ix + 1) + gridX1 * (iy + 1); + const d = this.numberOfVertices + (ix + 1) + gridX1 * iy; + + // faces + this.indices.push(b, c, d); + this.indices.push(a, b, d); + + + + // increase counter + groupCount += 6; + } + } + + // add a group to the geometry. this will ensure multi material support + this.addGroup(this.groupStart, groupCount, materialIndex); + + // calculate new start value for groups + this.groupStart += groupCount; + + // update total number of vertices + this.numberOfVertices += vertexCounter; + + return materialIndex; + } + +} + +export { BoxGeometry, BoxGeometry as BoxBufferGeometry }; \ No newline at end of file