From 2f3a0e7b92f9035a471d3b4d06ae32d290df5bfa Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Wed, 5 May 2021 10:50:05 +0200 Subject: [PATCH] - npm updates - correct slicing of blend areas (via UpdatableBoxGeometry.ts) --- package-lock.json | 74 +++++++++++----------- src/js/clip/{Selection.js => Selection.ts} | 50 +++++++-------- src/js/clip/UpdatableBoxGeometry.ts | 49 ++++++++++++++ src/js/layer/TinLayer.ts | 5 +- 4 files changed, 111 insertions(+), 67 deletions(-) rename src/js/clip/{Selection.js => Selection.ts} (90%) create mode 100644 src/js/clip/UpdatableBoxGeometry.ts diff --git a/package-lock.json b/package-lock.json index 7c5df3d..f742828 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1509,9 +1509,9 @@ "peer": true }, "node_modules/@types/node": { - "version": "15.0.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-15.0.1.tgz", - "integrity": "sha512-TMkXt0Ck1y0KKsGr9gJtWGjttxlZnnvDtphxUOSd0bfaR6Q1jle+sPvrzNR1urqYTWMinoKvjKfXUGsumaO1PA==", + "version": "15.0.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-15.0.2.tgz", + "integrity": "sha512-p68+a+KoxpoB47015IeYZYRrdqMUcpbK8re/zpFB8Ld46LHC1lPEbp3EXgkEhAYEcPvjJF6ZO+869SQ0aH1dcA==", "dev": true }, "node_modules/@types/normalize-package-data": { @@ -1726,9 +1726,9 @@ "dev": true }, "node_modules/acorn": { - "version": "8.2.2", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.2.2.tgz", - "integrity": "sha512-VrMS8kxT0e7J1EX0p6rI/E0FbfOVcvBpbIqHThFv+f8YrZIlMfVotYcXKVPmTvPW8sW5miJzfUFrrvthUZg8VQ==", + "version": "8.2.4", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.2.4.tgz", + "integrity": "sha512-Ibt84YwBDDA890eDiDCEqcbwvHlBvzzDkU2cGBBDDI1QWT12jTiXIOn2CIw5KK4i6N5Z2HUxwYjzriDyqaqqZg==", "dev": true, "bin": { "acorn": "bin/acorn" @@ -2125,9 +2125,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001221", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001221.tgz", - "integrity": "sha512-b9TOZfND3uGSLjMOrLh8XxSQ41x8mX+9MLJYDM4AAHLfaZHttrLNPrScWjVnBITRZbY5sPpCt7X85n7VSLZ+/g==", + "version": "1.0.30001222", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001222.tgz", + "integrity": "sha512-rPmwUK0YMjfMlZVmH6nVB5U3YJ5Wnx3vmT5lnRO3nIKO8bJ+TRWMbGuuiSugDJqESy/lz+1hSrlQEagCtoOAWQ==", "dev": true }, "node_modules/caseless": { @@ -2616,9 +2616,9 @@ } }, "node_modules/date-fns": { - "version": "2.21.1", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.21.1.tgz", - "integrity": "sha512-m1WR0xGiC6j6jNFAyW4Nvh4WxAi4JF4w9jRJwSI8nBmNcyZXPcP9VUQG+6gHQXAmqaGEKDKhOqAtENDC941UkA==", + "version": "2.21.2", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.21.2.tgz", + "integrity": "sha512-FMkG7pIPx64mGIpS2LOb3Wp3O606H/hatoiz7G0oiYWai1izdM4tF1dd7QABv2NogkIDI4wxsfLLFQSuVvDHgA==", "dev": true, "engines": { "node": ">=0.11" @@ -2704,12 +2704,12 @@ } }, "node_modules/dotenv": { - "version": "8.2.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz", - "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==", + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.5.1.tgz", + "integrity": "sha512-qC1FbhCH7UH7B+BcRNUDhAk04d/n+tnGGB1ctwndZkVFeehYJOn39pRWWzmdzpFqImyX1KB8tO0DCHLf8yRaYQ==", "dev": true, "engines": { - "node": ">=8" + "node": ">=10" } }, "node_modules/ecc-jsbn": { @@ -2723,9 +2723,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.3.725", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.725.tgz", - "integrity": "sha512-2BbeAESz7kc6KBzs7WVrMc1BY5waUphk4D4DX5dSQXJhsc3tP5ZFaiyuL0AB7vUKzDYpIeYwTYlEfxyjsGUrhw==", + "version": "1.3.726", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.726.tgz", + "integrity": "sha512-dw7WmrSu/JwtACiBzth8cuKf62NKL1xVJuNvyOg0jvruN/n4NLtGYoTzciQquCPNaS2eR+BT5GrxHbslfc/w1w==", "dev": true }, "node_modules/emoji-regex": { @@ -7933,9 +7933,9 @@ "peer": true }, "@types/node": { - "version": "15.0.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-15.0.1.tgz", - "integrity": "sha512-TMkXt0Ck1y0KKsGr9gJtWGjttxlZnnvDtphxUOSd0bfaR6Q1jle+sPvrzNR1urqYTWMinoKvjKfXUGsumaO1PA==", + "version": "15.0.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-15.0.2.tgz", + "integrity": "sha512-p68+a+KoxpoB47015IeYZYRrdqMUcpbK8re/zpFB8Ld46LHC1lPEbp3EXgkEhAYEcPvjJF6ZO+869SQ0aH1dcA==", "dev": true }, "@types/normalize-package-data": { @@ -8137,9 +8137,9 @@ "dev": true }, "acorn": { - "version": "8.2.2", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.2.2.tgz", - "integrity": "sha512-VrMS8kxT0e7J1EX0p6rI/E0FbfOVcvBpbIqHThFv+f8YrZIlMfVotYcXKVPmTvPW8sW5miJzfUFrrvthUZg8VQ==", + "version": "8.2.4", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.2.4.tgz", + "integrity": "sha512-Ibt84YwBDDA890eDiDCEqcbwvHlBvzzDkU2cGBBDDI1QWT12jTiXIOn2CIw5KK4i6N5Z2HUxwYjzriDyqaqqZg==", "dev": true }, "adjust-sourcemap-loader": { @@ -8442,9 +8442,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001221", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001221.tgz", - "integrity": "sha512-b9TOZfND3uGSLjMOrLh8XxSQ41x8mX+9MLJYDM4AAHLfaZHttrLNPrScWjVnBITRZbY5sPpCt7X85n7VSLZ+/g==", + "version": "1.0.30001222", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001222.tgz", + "integrity": "sha512-rPmwUK0YMjfMlZVmH6nVB5U3YJ5Wnx3vmT5lnRO3nIKO8bJ+TRWMbGuuiSugDJqESy/lz+1hSrlQEagCtoOAWQ==", "dev": true }, "caseless": { @@ -8831,9 +8831,9 @@ } }, "date-fns": { - "version": "2.21.1", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.21.1.tgz", - "integrity": "sha512-m1WR0xGiC6j6jNFAyW4Nvh4WxAi4JF4w9jRJwSI8nBmNcyZXPcP9VUQG+6gHQXAmqaGEKDKhOqAtENDC941UkA==", + "version": "2.21.2", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.21.2.tgz", + "integrity": "sha512-FMkG7pIPx64mGIpS2LOb3Wp3O606H/hatoiz7G0oiYWai1izdM4tF1dd7QABv2NogkIDI4wxsfLLFQSuVvDHgA==", "dev": true }, "debug": { @@ -8889,9 +8889,9 @@ } }, "dotenv": { - "version": "8.2.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz", - "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==", + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.5.1.tgz", + "integrity": "sha512-qC1FbhCH7UH7B+BcRNUDhAk04d/n+tnGGB1ctwndZkVFeehYJOn39pRWWzmdzpFqImyX1KB8tO0DCHLf8yRaYQ==", "dev": true }, "ecc-jsbn": { @@ -8905,9 +8905,9 @@ } }, "electron-to-chromium": { - "version": "1.3.725", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.725.tgz", - "integrity": "sha512-2BbeAESz7kc6KBzs7WVrMc1BY5waUphk4D4DX5dSQXJhsc3tP5ZFaiyuL0AB7vUKzDYpIeYwTYlEfxyjsGUrhw==", + "version": "1.3.726", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.726.tgz", + "integrity": "sha512-dw7WmrSu/JwtACiBzth8cuKf62NKL1xVJuNvyOg0jvruN/n4NLtGYoTzciQquCPNaS2eR+BT5GrxHbslfc/w1w==", "dev": true }, "emoji-regex": { diff --git a/src/js/clip/Selection.js b/src/js/clip/Selection.ts similarity index 90% rename from src/js/clip/Selection.js rename to src/js/clip/Selection.ts index 249f0c7..9ff2ee5 100644 --- a/src/js/clip/Selection.js +++ b/src/js/clip/Selection.ts @@ -1,4 +1,3 @@ -import { BoxGeometry } from 'three/src/geometries/BoxGeometry'; import { Mesh } from 'three/src/objects/Mesh'; import * as material from './material'; import { Vector3 } from 'three/src/math/Vector3'; @@ -7,6 +6,7 @@ import { SelectionBoxFace } from './SelectionBoxFace'; import { SelectionBoxLine } from './SelectionBoxLine'; import { Layer } from '../layer/Layer'; import { Group } from 'three/src/objects/Group'; +import { UpdatableBoxGeometry } from './UpdatableBoxGeometry'; export class Selection extends Layer { visible; @@ -15,10 +15,10 @@ export class Selection extends Layer { limit; limitLow; limitHigh; - box; - boxMesh; + box: UpdatableBoxGeometry; + boxMesh: Mesh; vertices; - touchMeshes; displayMeshes; meshGeometries; selectables; + touchMeshes; displayMeshes; meshGeometries; lineGeometries; selectables; faces; map; scale; @@ -44,8 +44,7 @@ export class Selection extends Layer { } this.scale = 1.0; - this.box = new BoxGeometry(1, 1, 1); - this.boxMesh = new Mesh(this.box, material.capMaterial); + this.vertices = [ new Vector3(), new Vector3(), @@ -53,10 +52,15 @@ export class Selection extends Layer { new Vector3(), new Vector3(), new Vector3(), new Vector3() ]; - this.updateVertices(); + + this._updateVertices(); + + // this.box = new BoxGeometry(1, 1, 1); + let box = this.box = new UpdatableBoxGeometry(this.vertices) + this.boxMesh = new Mesh(box, material.capMaterial); + let v = this.vertices; - this.touchMeshes = new Group(); //Object3D(); this.displayMeshes = new Group(); // Object3D(); this.meshGeometries = []; @@ -86,14 +90,13 @@ export class Selection extends Layer { this.boxLines.push(new SelectionBoxLine(v[5], v[7], f[3], f[5], this)); this.boxLines.push(new SelectionBoxLine(v[6], v[7], f[4], f[5], this)); - this.setBox(); + // this.setBox(); // this.setUniforms(); } onAdd(map) { this.map = map; - this.build(this.getScene()); - //this.update(); + this.build(this.getScene()); this.emit('add'); } @@ -114,12 +117,13 @@ export class Selection extends Layer { setVisible(visible) { this.visible = visible; - this.boxMesh.visible = visible; + // this.boxMesh.visible = visible; this.displayMeshes.visible = visible; this.touchMeshes.visible = visible; this.emit('visibility-change'); } - toggle () { + + toggle() { let visible = !this.visible; this.visible = visible; this.boxMesh.visible = visible; @@ -130,13 +134,13 @@ export class Selection extends Layer { scaleZ(z) { this.scale = z; - // this.boxMesh.scale.z = z; - this.displayMeshes.scale.z = z; + this.boxMesh.scale.z = z; + this.displayMeshes.scale.z = z; this.touchMeshes.scale.z = z; this.setUniforms(); } - updateVertices() { + _updateVertices() { this.vertices[0].set(this.limitLow.x, this.limitLow.y, this.limitLow.z); this.vertices[1].set(this.limitHigh.x, this.limitLow.y, this.limitLow.z); this.vertices[2].set(this.limitLow.x, this.limitHigh.y, this.limitLow.z); @@ -173,14 +177,6 @@ export class Selection extends Layer { } } - setBox() { - let width = new Vector3(); - width.subVectors(this.limitHigh, this.limitLow); - this.boxMesh.scale.copy(width); - width.multiplyScalar(0.5).add(this.limitLow); - this.boxMesh.position.copy(width); - } - setUniforms() { let unif = uniforms.clipping; unif.clippingLow.value.copy(this.limitLow); @@ -223,10 +219,12 @@ export class Selection extends Layer { this.limitHigh.z = Math.max(this.limitLow.z + buffer, Math.min(this.limit.z2, value)); } - this.setBox(); + this.setUniforms(); - this.updateVertices(); + this._updateVertices(); this.updateGeometries(); + // this.setBox(); + this.box.update(); } } \ No newline at end of file diff --git a/src/js/clip/UpdatableBoxGeometry.ts b/src/js/clip/UpdatableBoxGeometry.ts new file mode 100644 index 0000000..d53c3ab --- /dev/null +++ b/src/js/clip/UpdatableBoxGeometry.ts @@ -0,0 +1,49 @@ +import { BufferGeometry } from 'three/src/core/BufferGeometry'; +import { Uint16BufferAttribute } from 'three/src/core/BufferAttribute'; +import { Vector3 } from 'three/src/math/Vector3'; + + +class UpdatableBoxGeometry extends BufferGeometry { + + faces; + vertices: Array; + indexArray: Array; + + constructor(vertices: Array) { + super(); + + this.indexArray = new Array(); + this.vertices = new Array(); + this.buildPlane(0, vertices[0], vertices[1], vertices[5], vertices[4]); //y1 + this.buildPlane(4, vertices[0], vertices[2], vertices[3], vertices[1]); //z1 + this.buildPlane(8, vertices[0], vertices[4], vertices[6], vertices[2]); //x1 + this.buildPlane(12, vertices[7], vertices[5], vertices[1], vertices[3]); //x2 + this.buildPlane(16, vertices[7], vertices[3], vertices[2], vertices[6]); //y2 + this.buildPlane(20, vertices[7], vertices[6], vertices[4], vertices[5]); //z2 + this.setFromPoints(this.vertices); + + let indices = new Uint16BufferAttribute(this.indexArray, 1);//.setDynamic(true); + this.setIndex(indices); + + this.computeVertexNormals(); + } + + buildPlane(i, v0, v1, v2, v3) { + // let frontFaceGeometry = new PlaneGeometry(v0, v1, v2, v3); + // let frontFaceMesh = new Mesh(frontFaceGeometry, material.Invisible); + // frontFaceMesh.axis = axis; + this.vertices.push(v0, v1, v2, v3); + + this.indexArray.push(i, i +1, i + 2, i, i +2, i+3); + // let indexArray = [0, 1, 2, 0, 2, 3]; + } + + update() { + this.setFromPoints(this.vertices); + this.attributes.position.needsUpdate = true; + this.computeBoundingSphere(); + } + +} + +export { UpdatableBoxGeometry }; \ No newline at end of file diff --git a/src/js/layer/TinLayer.ts b/src/js/layer/TinLayer.ts index e539e86..7f5bca6 100644 --- a/src/js/layer/TinLayer.ts +++ b/src/js/layer/TinLayer.ts @@ -5,19 +5,16 @@ import { Mesh } from 'three/src/objects/Mesh'; import { Layer } from './Layer'; import { BitStream } from '../lib/bitstream'; 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'; import { TextureLoader } from 'three/src/loaders/TextureLoader'; -import proj4 from 'proj4/dist/proj4'; +import proj4 from 'proj4/dist/proj4-src'; import { ShaderMaterial } from 'three/src/materials/ShaderMaterial'; import { shader } from '../clip/shader'; import { Material } from 'three/src/materials/Material'; -import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial'; import { Vector2 } from 'three/src/math/Vector2'; import { Matrix4 } from 'three/src/math/Matrix4'; import { Box3 } from 'three/src/math/Box3'; -import { PlaneGeometry } from 'three/src/geometries/PlaneGeometry'; import { uniforms } from '../clip/uniforms'; const POINTURL = 'https://geusegdi01.geus.dk/geom3d/data/nodes/';