diff --git a/package-lock.json b/package-lock.json index 56bc443..372bb06 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,6 @@ "@fortawesome/fontawesome-free": "^5.15.2", "@types/three": "^0.129.1", "bulma": "^0.9.2", - "concaveman": "github:grassick/concaveman#patch-1", "hull.js": "^0.2.11", "lodash": "^4.17.21", "normalize.css": "^8.0.1", @@ -2536,17 +2535,6 @@ "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true }, - "node_modules/concaveman": { - "version": "1.2.0", - "resolved": "git+ssh://git@github.com/grassick/concaveman.git#05682dcd7c21ef09f391e814d0f5df7cfbc3bbae", - "license": "ISC", - "dependencies": { - "point-in-polygon": "^1.0.1", - "rbush": "^3.0.0", - "robust-predicates": "^2.0.4", - "tinyqueue": "^2.0.3" - } - }, "node_modules/concurrently": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.2.0.tgz", @@ -2671,9 +2659,9 @@ } }, "node_modules/core-js-compat": { - "version": "3.15.1", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.15.1.tgz", - "integrity": "sha512-xGhzYMX6y7oEGQGAJmP2TmtBLvR4nZmRGEcFa3ubHOq5YEp51gGN9AovVa0AoujGZIq+Wm6dISiYyGNfdflYww==", + "version": "3.15.2", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.15.2.tgz", + "integrity": "sha512-Wp+BJVvwopjI+A1EFqm2dwUmWYXrvucmtIB2LgXn/Rb+gWPKYxtmb4GKHGKG/KGF1eK9jfjzT38DITbTOCX/SQ==", "dev": true, "dependencies": { "browserslist": "^4.16.6", @@ -2933,9 +2921,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.3.760", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.760.tgz", - "integrity": "sha512-XPKwjX6pHezJWB4FLVuSil9gGmU6XYl27ahUwEHODXF4KjCEB8RuIT05MkU1au2Tdye57o49yY0uCMK+bwUt+A==", + "version": "1.3.762", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.762.tgz", + "integrity": "sha512-LehWjRpfPcK8F1Lf/NZoAwWLWnjJVo0SZeQ9j/tvnBWYcT99qDqgo4raAfS2oTKZjPrR/jxruh85DGgDUmywEA==", "dev": true }, "node_modules/emoji-regex": { @@ -4807,11 +4795,6 @@ "node": ">=8" } }, - "node_modules/point-in-polygon": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz", - "integrity": "sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw==" - }, "node_modules/postcss": { "version": "8.3.5", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.5.tgz", @@ -4977,11 +4960,6 @@ "node": ">=8" } }, - "node_modules/quickselect": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz", - "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==" - }, "node_modules/randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -4991,14 +4969,6 @@ "safe-buffer": "^5.1.0" } }, - "node_modules/rbush": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz", - "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==", - "dependencies": { - "quickselect": "^2.0.0" - } - }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -5404,11 +5374,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/robust-predicates": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-2.0.4.tgz", - "integrity": "sha512-l4NwboJM74Ilm4VKfbAtFeGq7aEjWL+5kVFcmgFA2MrdnQWx9iE/tUGvxY5HyMI7o/WpSIUFLbC5fbeaHgSCYg==" - }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -5467,6 +5432,9 @@ "lodash": "^4.0.0", "scss-tokenizer": "^0.2.3", "yargs": "^13.3.2" + }, + "bin": { + "sassgraph": "bin/sassgraph" } }, "node_modules/sass-graph/node_modules/ansi-regex": { @@ -5868,6 +5836,11 @@ "safer-buffer": "^2.0.2", "tweetnacl": "~0.14.0" }, + "bin": { + "sshpk-conv": "bin/sshpk-conv", + "sshpk-sign": "bin/sshpk-sign", + "sshpk-verify": "bin/sshpk-verify" + }, "engines": { "node": ">=0.10.0" } @@ -6116,11 +6089,6 @@ "three": ">= 0.125.0" } }, - "node_modules/tinyqueue": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz", - "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==" - }, "node_modules/to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -6415,9 +6383,9 @@ } }, "node_modules/webpack": { - "version": "5.41.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.41.0.tgz", - "integrity": "sha512-pCVO7hVm8XiL6DpPtXrFLS8ktmH/tpvtbEex6hn4RweTFe6z6Cugh5FlQoEPZotb15HiirjM2Kv7THTA7sKLzQ==", + "version": "5.41.1", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.41.1.tgz", + "integrity": "sha512-AJZIIsqJ/MVTmegEq9Tlw5mk5EHdGiJbDdz9qP15vmUH+oxI1FdWcL0E9EO8K/zKaRPWqEs7G/OPxq1P61u5Ug==", "dev": true, "dependencies": { "@types/eslint-scope": "^3.7.0", @@ -8669,16 +8637,6 @@ "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true }, - "concaveman": { - "version": "git+ssh://git@github.com/grassick/concaveman.git#05682dcd7c21ef09f391e814d0f5df7cfbc3bbae", - "from": "concaveman@github:grassick/concaveman#patch-1", - "requires": { - "point-in-polygon": "^1.0.1", - "rbush": "^3.0.0", - "robust-predicates": "^2.0.4", - "tinyqueue": "^2.0.3" - } - }, "concurrently": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.2.0.tgz", @@ -8774,9 +8732,9 @@ } }, "core-js-compat": { - "version": "3.15.1", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.15.1.tgz", - "integrity": "sha512-xGhzYMX6y7oEGQGAJmP2TmtBLvR4nZmRGEcFa3ubHOq5YEp51gGN9AovVa0AoujGZIq+Wm6dISiYyGNfdflYww==", + "version": "3.15.2", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.15.2.tgz", + "integrity": "sha512-Wp+BJVvwopjI+A1EFqm2dwUmWYXrvucmtIB2LgXn/Rb+gWPKYxtmb4GKHGKG/KGF1eK9jfjzT38DITbTOCX/SQ==", "dev": true, "requires": { "browserslist": "^4.16.6", @@ -8961,9 +8919,9 @@ } }, "electron-to-chromium": { - "version": "1.3.760", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.760.tgz", - "integrity": "sha512-XPKwjX6pHezJWB4FLVuSil9gGmU6XYl27ahUwEHODXF4KjCEB8RuIT05MkU1au2Tdye57o49yY0uCMK+bwUt+A==", + "version": "1.3.762", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.762.tgz", + "integrity": "sha512-LehWjRpfPcK8F1Lf/NZoAwWLWnjJVo0SZeQ9j/tvnBWYcT99qDqgo4raAfS2oTKZjPrR/jxruh85DGgDUmywEA==", "dev": true }, "emoji-regex": { @@ -10353,11 +10311,6 @@ "find-up": "^4.0.0" } }, - "point-in-polygon": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz", - "integrity": "sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw==" - }, "postcss": { "version": "8.3.5", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.5.tgz", @@ -10467,11 +10420,6 @@ "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==", "dev": true }, - "quickselect": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz", - "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==" - }, "randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -10481,14 +10429,6 @@ "safe-buffer": "^5.1.0" } }, - "rbush": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz", - "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==", - "requires": { - "quickselect": "^2.0.0" - } - }, "read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -10806,11 +10746,6 @@ "glob": "^7.1.3" } }, - "robust-predicates": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-2.0.4.tgz", - "integrity": "sha512-l4NwboJM74Ilm4VKfbAtFeGq7aEjWL+5kVFcmgFA2MrdnQWx9iE/tUGvxY5HyMI7o/WpSIUFLbC5fbeaHgSCYg==" - }, "run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -11348,11 +11283,6 @@ "integrity": "sha512-9wDhf1FOkXJ70JfsnQxuIFi997TRYGP+AWCEiJchxPy6mQysRdQOXgeym07JahkOB83YSTULOr/5hV6Lx2kXPA==", "requires": {} }, - "tinyqueue": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz", - "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==" - }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -11570,9 +11500,9 @@ } }, "webpack": { - "version": "5.41.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.41.0.tgz", - "integrity": "sha512-pCVO7hVm8XiL6DpPtXrFLS8ktmH/tpvtbEex6hn4RweTFe6z6Cugh5FlQoEPZotb15HiirjM2Kv7THTA7sKLzQ==", + "version": "5.41.1", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.41.1.tgz", + "integrity": "sha512-AJZIIsqJ/MVTmegEq9Tlw5mk5EHdGiJbDdz9qP15vmUH+oxI1FdWcL0E9EO8K/zKaRPWqEs7G/OPxq1P61u5Ug==", "dev": true, "requires": { "@types/eslint-scope": "^3.7.0", diff --git a/package.json b/package.json index bc23f4d..9fed887 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,6 @@ "@fortawesome/fontawesome-free": "^5.15.2", "@types/three": "^0.129.1", "bulma": "^0.9.2", - "concaveman": "github:grassick/concaveman#patch-1", "hull.js": "^0.2.11", "lodash": "^4.17.21", "normalize.css": "^8.0.1", diff --git a/src/js/clip/material.js b/src/js/clip/material.js deleted file mode 100644 index f33cbbb..0000000 --- a/src/js/clip/material.js +++ /dev/null @@ -1,80 +0,0 @@ -import { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial'; -import { LineBasicMaterial } from 'three/src/materials/LineBasicMaterial'; -import { ShaderMaterial } from 'three/src/materials/ShaderMaterial'; -import { uniforms } from "./uniforms"; -import { shader } from './shader'; -import { DoubleSide, BackSide, FrontSide } from 'three/src/constants'; -import { DecrementWrapStencilOp, IncrementWrapStencilOp } from 'three/src/constants'; -import { NotEqualStencilFunc, ReplaceStencilOp, AlwaysStencilFunc } from 'three/src/constants'; - -let profileMaterial = new ShaderMaterial({ - color: 0xE91E63, - // metalness: 0.1, - // roughness: 0.75, - // flatShading: true, - stencilWrite: true, - // stencilRef: 0, - stencilFunc: NotEqualStencilFunc, - stencilFail: ReplaceStencilOp, - stencilZFail: ReplaceStencilOp, - stencilZPass: ReplaceStencilOp, - uniforms: uniforms.caps, - vertexShader: shader.vertex, - fragmentShader: shader.fragment -}); - -let frontStencilMaterial = new ShaderMaterial({ - depthWrite: false, - depthTest: false, - colorWrite: false, - stencilWrite: true, - stencilFunc: AlwaysStencilFunc, - uniforms: uniforms.clipping, - vertexShader: shader.vertexClipping, - fragmentShader: shader.fragmentClippingFront, - side: FrontSide, - stencilFail: DecrementWrapStencilOp, - stencilZFail: DecrementWrapStencilOp, - stencilZPass: DecrementWrapStencilOp -}); - -let backStencilMaterial = new ShaderMaterial({ - depthWrite: false, - depthTest: false, - colorWrite: false, - stencilWrite: true, - stencilFunc: AlwaysStencilFunc, - uniforms: uniforms.clipping, - vertexShader: shader.vertexClipping, - fragmentShader: shader.fragmentClippingFront, - side: BackSide, - stencilFail: IncrementWrapStencilOp, - stencilZFail: IncrementWrapStencilOp, - stencilZPass: IncrementWrapStencilOp -}); - -// beige: -// let BoxBackFace = new MeshBasicMaterial({ color: 0xEEDDCC, transparent: true }); -let BoxBackFace = new MeshBasicMaterial({ color: 0xf8f8ff, transparent: true, opacity: 0.5 }); -// black box grid: mouse grey: -// let BoxWireframe = new LineBasicMaterial({ color: 0x000000, linewidth: 2 }); -let BoxWireframe = new LineBasicMaterial({ color: 0x6f6f6f, linewidth: 3 }); - -// yellow select color -let BoxWireActive = new LineBasicMaterial({ color: 0xffff00, linewidth: 4, side: DoubleSide }); - -let Invisible = new ShaderMaterial({ - vertexShader: shader.invisibleVertexShader, - fragmentShader: shader.invisibleFragmentShader, - side: DoubleSide -}); - -export { - profileMaterial, - frontStencilMaterial, - backStencilMaterial, - BoxBackFace, - BoxWireframe, - BoxWireActive, - Invisible -} diff --git a/src/js/clip/material.ts b/src/js/clip/material.ts new file mode 100644 index 0000000..beb5474 --- /dev/null +++ b/src/js/clip/material.ts @@ -0,0 +1,151 @@ +import { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial'; +import { MeshStandardMaterial } from 'three/src/materials/MeshStandardMaterial'; +import { LineBasicMaterial } from 'three/src/materials/LineBasicMaterial'; +import { ShaderMaterial } from 'three/src/materials/ShaderMaterial'; +import { uniforms } from "./uniforms"; +import { shader } from './shader'; +import { DoubleSide, BackSide, FrontSide, EqualStencilFunc, KeepStencilOp, DecrementStencilOp, IncrementStencilOp, InvertStencilOp, GreaterStencilFunc, NeverStencilFunc, LessStencilFunc, LessEqualStencilFunc } from 'three/src/constants'; +import { DecrementWrapStencilOp, IncrementWrapStencilOp } from 'three/src/constants'; +import { NotEqualStencilFunc, ReplaceStencilOp, AlwaysStencilFunc } from 'three/src/constants'; + +// let profileMaterial = new ShaderMaterial({ +// // metalness: 0.1, +// // roughness: 0.75, +// // flatShading: true, +// stencilWrite: true, +// // stencilRef: 0, +// stencilFunc: NotEqualStencilFunc, +// stencilFail: ReplaceStencilOp, +// stencilZFail: ReplaceStencilOp, +// stencilZPass: ReplaceStencilOp, +// uniforms: uniforms.caps, +// vertexShader: shader.vertex, +// fragmentShader: shader.fragment +// }); +let profileMaterial = new MeshStandardMaterial( { + color: 0xE91E63, + metalness: 0.1, + roughness: 0.75, + flatShading: true, + stencilWrite: true, + stencilRef: 0, + stencilFunc: NotEqualStencilFunc, + stencilFail: ReplaceStencilOp, + stencilZFail: ReplaceStencilOp, + stencilZPass: ReplaceStencilOp + // stencilFunc: NotEqualStencilFunc, + // stencilFail: ReplaceStencilOp, + // stencilZFail: ReplaceStencilOp, + // stencilZPass: ReplaceStencilOp +} ); + +let stencilMaterial = new ShaderMaterial({ + depthWrite: false, + depthTest: false, + colorWrite: false, + stencilWrite: true, + stencilFunc: AlwaysStencilFunc, + // uniforms: uniforms.clipping, + vertexShader: shader.vertexClipping, + fragmentShader: shader.fragmentClippingFront, +}); + +let frontStencilMaterial = new ShaderMaterial({ + depthWrite: false, + depthTest: false, + colorWrite: false, + stencilWrite: true, + stencilFunc: AlwaysStencilFunc, + uniforms: uniforms.clipping, + vertexShader: shader.vertexClipping, + fragmentShader: shader.fragmentClippingFront, + side: FrontSide, + // stencilFail: DecrementWrapStencilOp, + // stencilZFail: DecrementWrapStencilOp, + // stencilZPass: DecrementWrapStencilOp + stencilFail: DecrementWrapStencilOp, + stencilZFail: DecrementWrapStencilOp, + stencilZPass: DecrementWrapStencilOp +}); + +let backStencilMaterial = new ShaderMaterial({ + depthWrite: false, + depthTest: false, + colorWrite: false, + stencilWrite: true, + stencilFunc: AlwaysStencilFunc, + uniforms: uniforms.clipping, + vertexShader: shader.vertexClipping, + fragmentShader: shader.fragmentClippingFront, + side: BackSide, + // stencilFail: IncrementWrapStencilOp, + // stencilZFail: IncrementWrapStencilOp, + // stencilZPass: IncrementWrapStencilOp + stencilFail: IncrementWrapStencilOp, + stencilZFail: IncrementWrapStencilOp, + stencilZPass: IncrementWrapStencilOp +}); + +// beige: +// let BoxBackFace = new MeshBasicMaterial({ color: 0xEEDDCC, transparent: true }); +let BoxBackFace = new MeshBasicMaterial({ color: 0xf8f8ff, transparent: true, opacity: 0.5 }); +// black box grid: mouse grey: +// let BoxWireframe = new LineBasicMaterial({ color: 0x000000, linewidth: 2 }); +let BoxWireframe = new LineBasicMaterial({ color: 0x6f6f6f, linewidth: 3 }); + +// yellow select color +let BoxWireActive = new LineBasicMaterial({ color: 0xffff00, linewidth: 4, side: DoubleSide }); + +let Invisible = new ShaderMaterial({ + vertexShader: shader.invisibleVertexShader, + fragmentShader: shader.invisibleFragmentShader, + side: DoubleSide +}); + +// export const profileMat = new MeshStandardMaterial( { + +// color: 0xE91E63, +// metalness: 0.1, +// roughness: 0.75, +// flatShading: true, +// stencilWrite: true, +// // stencilRef: 0, +// stencilFunc: NotEqualStencilFunc, +// stencilFail: ReplaceStencilOp, +// stencilZFail: ReplaceStencilOp, +// stencilZPass: ReplaceStencilOp +// } ); + + +function toBack(mat) { + const material = mat.clone(); + material.side = BackSide, + material.stencilFail = IncrementWrapStencilOp; + material.stencilZFail = IncrementWrapStencilOp; + material.stencilZPass = IncrementWrapStencilOp; + return material; +}; + + +function toFront(mat) { + const material = mat.clone(); + material.side = FrontSide; + material.stencilFail = DecrementWrapStencilOp; + material.stencilZFail = DecrementWrapStencilOp; + material.stencilZPass = DecrementWrapStencilOp; + return material; +}; + + +export { + toBack, + toFront, + stencilMaterial, + profileMaterial, + frontStencilMaterial, + backStencilMaterial, + BoxBackFace, + BoxWireframe, + BoxWireActive, + Invisible +} diff --git a/src/js/layer/TinLayer.ts b/src/js/layer/TinLayer.ts index dd16d89..eebd289 100644 --- a/src/js/layer/TinLayer.ts +++ b/src/js/layer/TinLayer.ts @@ -30,7 +30,6 @@ import { PointsMaterial } from 'three/src/materials/PointsMaterial'; import { Points } from 'three/src/objects/Points'; import { Line } from 'three/src/objects/Line'; import hull from 'hull.js/src/hull'; -import concaveman from 'concaveman/index'; import { Color } from 'three/src/math/Color'; @@ -164,7 +163,8 @@ class TinLayer extends Layer { color: { type: "c", value: new Color(color) } } let profileMaterial = material.profileMaterial.clone(); - profileMaterial.uniforms = caps; + profileMaterial.color = new Color(color); + // profileMaterial.uniforms = caps; this.borderMesh = new Mesh(box, profileMaterial); // this.borderMesh.name = 'stencilFeatureBack_' + this.index; this.borderMesh.name = 'profilePlane_' + this.name; @@ -502,6 +502,7 @@ class TinLayer extends Layer { setVisible(visible) { this.visible = visible; this.objectGroup.visible = visible; + this.mainMesh.visible = visible; this.emit('visibility-change', visible); } @@ -821,9 +822,9 @@ class TinLayer extends Layer { mesh.castShadow = true; mesh.receiveShadow = true; this._addObject(mesh, true); - if (app_scene) { - app_scene.add(this.objectGroup); - } + // if (app_scene) { + // app_scene.add(this.objectGroup); + // } } private _addObject(object, queryable) { diff --git a/src/js/main.js b/src/js/main.js index f0bf8c6..4e9d942 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -126,10 +126,10 @@ class Application { /* Scene: that will hold all our elements such as objects, cameras and lights. */ this.scene = new Scene(); - this.capsScene = new Scene(); - this.backStencil = new Scene(); - this.frontStencil = new Scene(); - this.capsSceneArray = new Array(); + // this.capsScene = new Scene(); + // this.backStencil = new Scene(); + // this.frontStencil = new Scene(); + // this.capsSceneArray = new Array(); this._buildDefaultLights(this.scene); //app.scene.autoUpdate = false; //// show axes in the screen @@ -185,59 +185,79 @@ class Application { map.on('ready', () => { this.selectionBox.setUniforms(); - + // this.capsScene.add(this.selectionBox.boxMesh); // this.scene.add(this.selection.displayMeshes); // this.scene.add(this.selection.touchMeshes); this.map.addLayer(this.selectionBox); + let modelNode = new Group(); let profileNode = new Group(); - for (const [key, layer] of Object.entries(this.map.layers)) { + let stencilNode = new Group(); + for (const [i, layer] of Object.entries(this.map.layers)) { // let layer = map.layers[i]; - if (layer instanceof TinLayer && layer.name != "Topography") { + if (layer instanceof TinLayer && layer.name != "Topography") { + modelNode.add(layer.mainMesh); // this.capsScene.add(layer.borderMesh); profileNode.add(layer.borderMesh); + + // const stencilMaterial = material.stencilMaterial.clone(); + + let stencilFeatureBack = new Mesh(layer.geometry, material.backStencilMaterial.clone()); + stencilFeatureBack.name = 'stencilFeatureBack_' + i; + stencilFeatureBack.userData.layerId = layer.index; + stencilNode.add(stencilFeatureBack); + + let stencilFeatureFront = new Mesh(layer.geometry, material.frontStencilMaterial.clone()); + stencilFeatureFront.name = 'stencilFeatureFront_' + i; + stencilFeatureFront.userData.layerId = layer.index; + stencilNode.add(stencilFeatureFront); + layer.on('visibility-change', (args) => { let visible = args[0]; + stencilFeatureFront.visible = visible; + stencilFeatureBack.visible = visible; layer.borderMesh.visible = visible; }); layer.on('scale-change', (args) => { let z = args[0]; + stencilFeatureFront.scale.z = z; + stencilFeatureBack.scale.z = z; layer.borderMesh.scale.z = z; }); } } // this.scene.add(profileNode); - let stencilNode = new Group(); - for (var i in map.layers) { - let layer = map.layers[i]; - if (layer instanceof TinLayer && layer.name != "Topography") { - let stencilFeatureBack = new Mesh(layer.geometry, material.backStencilMaterial); - stencilFeatureBack.name = 'stencilFeatureBack_' + i; - stencilFeatureBack.userData.layerId = layer.index; - stencilNode.add(stencilFeatureBack); - - let stencilFeatureFront = new Mesh(layer.geometry, material.frontStencilMaterial); - stencilFeatureFront.name = 'stencilFeatureFront_' + i; - stencilFeatureFront.userData.layerId = layer.index; - stencilNode.add(stencilFeatureFront); - layer.on('visibility-change', (args) => { - let visible = args[0]; - stencilFeatureFront.visible = visible; - stencilFeatureBack.visible = visible; - }); - layer.on('scale-change', (args) => { - let z = args[0]; - stencilFeatureFront.scale.z = z; - stencilFeatureBack.scale.z = z; - }); - } - } + + // for (var i in map.layers) { + // let layer = map.layers[i]; + // if (layer instanceof TinLayer && layer.name != "Topography") { + // let stencilFeatureBack = new Mesh(layer.geometry, material.backStencilMaterial); + // stencilFeatureBack.name = 'stencilFeatureBack_' + i; + // stencilFeatureBack.userData.layerId = layer.index; + // stencilNode.add(stencilFeatureBack); + + // let stencilFeatureFront = new Mesh(layer.geometry, material.frontStencilMaterial); + // stencilFeatureFront.name = 'stencilFeatureFront_' + i; + // stencilFeatureFront.userData.layerId = layer.index; + // stencilNode.add(stencilFeatureFront); + // layer.on('visibility-change', (args) => { + // let visible = args[0]; + // stencilFeatureFront.visible = visible; + // stencilFeatureBack.visible = visible; + // }); + // layer.on('scale-change', (args) => { + // let z = args[0]; + // stencilFeatureFront.scale.z = z; + // stencilFeatureBack.scale.z = z; + // }); + // } + // } // scene.add(node('selectNode')); - // scene.add(node('modelNode')); + this.scene.add(modelNode); this.scene.add(stencilNode); this.scene.add(profileNode); @@ -387,7 +407,7 @@ class Application { // // break; // // } // // } - + // gl.stencilFunc(gl.ALWAYS, 1, 0xff); // gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); // this.renderer.render(this.backStencil, this.map.camera);