- add slicing box as layer

- npm updates
- small syntax improvements

src/js/clip/MyMeshStandardMaterial.js

@@ -2,12 +2,13 @@ import { MeshStandardMaterial } from 'three/src/materials/MeshStandardMaterial';
 import { shader } from './shader';
 
 export class MyMeshStandardMaterial extends MeshStandardMaterial {
-  constructor(materialParameters, uniforms) {
 
+  constructor(materialParameters, uniforms) {
     super(materialParameters);
     this.uniforms = uniforms;
+  }
 
-    this.onBeforeCompile = m_shader => {  
+  onBeforeCompile = m_shader => {
 
     m_shader.uniforms.clippingLow = this.uniforms.clippingLow; // { type: "v3", value: new Vector3(0, 0, 0) };
     m_shader.uniforms.clippingHigh = this.uniforms.clippingHigh; // { type: "v3", value: new Vector3(0, 0, 0) };
@@ -62,5 +63,4 @@ export class MyMeshStandardMaterial extends MeshStandardMaterial {
 
   };
   
-  }
 }

src/js/clip/Picking.js

@@ -78,7 +78,7 @@ export class Picking {
     }
 
     mouseMove(event) {
-        if (this.isDraging == true) {
+        if (this.isDraging == true || this.simulation.selection.visible == false) {
             return;
         }
         let point = this._getCanvasPoint(event);
@@ -116,6 +116,9 @@ export class Picking {
     }
 
     beginDrag(event) {
+        if (this.simulation.selection.visible == false) {
+            return;
+        }
         // exit drag method, if not left mouse button was clicked
         if (this.touchCapable == false && event.which != 1) {
             return;

src/js/clip/Selection.js

@@ -6,8 +6,9 @@ import { Object3D } from 'three/src/core/Object3D';
 import { uniforms } from "./uniforms";
 import { SelectionBoxFace } from './SelectionBoxFace';
 import { SelectionBoxLine } from './SelectionBoxLine';
+import { Layer } from '../layer/Layer';
 
-export class Selection {
+export class Selection extends Layer {
     limitLow;
     limitHigh;
     box;
@@ -16,9 +17,16 @@ export class Selection {
     touchMeshes; displayMeshes; meshGeometries; selectables;
     faces;
     map;
+    scale;
 
-    constructor(low, high, map) {
+    constructor(parameters, low, high) {
-        this.map = map;
+        super();
+        this.type = 'Selection';
+        this.visible = true;
+        this.opacity = 1;
+        for (var k in parameters) {
+            this[k] = parameters[k];
+        }
         this.limitLow = low;
         this.limitHigh = high;
         this.limit = {
@@ -27,6 +35,7 @@ export class Selection {
             x2: high.x,
             y2: high.y
         }
+        this.scale = 1;
 
         this.box = new BoxGeometry(1, 1, 1);
         this.boxMesh = new Mesh(this.box, material.capMaterial);
@@ -71,8 +80,39 @@ export class Selection {
         this.boxLines.push(new SelectionBoxLine(v[6], v[7], f[4], f[5], this));
 
         this.setBox();
-        this.setUniforms();
+        // this.setUniforms();
+    }
 
+    onAdd(map) {
+        this.map = map;
+        this.build(this.getScene());
+        //this.update();
+        this.emit('add');
+    }
+
+    build(app_scene) {
+        // app_scene.add(this.boxMesh);
+        app_scene.add(this.displayMeshes);
+        app_scene.add(this.touchMeshes);
+    }
+
+    setWireframeMode(wireframe) {
+        return;
+    }
+
+    setVisible(visible) {
+        this.visible = visible;
+        this.boxMesh.visible = visible;
+        this.displayMeshes.visible = visible;
+        this.touchMeshes.visible = visible;
+        this.emit('visibility-change');
+    }
+
+    scaleZ(z) {
+        this.scale = z;
+        // this.boxMesh.scale.z = z;
+        // this.displayMeshes.scale.z = z;
+        // this.touchMeshes.scale.z = z;
     }
 
     updateVertices() {
@@ -115,7 +155,6 @@ export class Selection {
     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);
@@ -164,7 +203,4 @@ export class Selection {
         this.updateVertices();
         this.updateGeometries();
     }
-
-
-
 }

src/js/clip/SelectionBoxLine.js

@@ -1,12 +1,9 @@
 import { LineSegments } from 'three/src/objects/LineSegments';
-// import { Float32BufferAttribute } from 'three/src/core/BufferAttribute';
 import * as material from './material';
 import { BufferGeometry } from 'three/src/core/BufferGeometry';
 
 export class SelectionBoxLine {
 
-    // material;
-
     constructor(v0, v1, f0, f1, selection) {
         // var lineGeometry = new THREE.Geometry();
         // lineGeometry.vertices.push(v0, v1);

src/js/layer/TinLayer.js

@@ -1,4 +1,3 @@
-// import { Group } from 'three/src/objects/Group';
 import { BufferGeometry } from 'three/src/core/BufferGeometry';
 import { Float32BufferAttribute, Uint16BufferAttribute } from 'three/src/core/BufferAttribute';
 import { DoubleSide } from 'three/src/constants';
@@ -8,7 +7,6 @@ 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';
 
 
@@ -17,8 +15,6 @@ const EDGEURL = 'https://geusegdi01.geus.dk/geom3d/data/triangles/';
 
 class TinLayer extends Layer {
 
-
-
     constructor(params) {
         super();
 
@@ -31,7 +27,6 @@ class TinLayer extends Layer {
             this[k] = params[k];
         }
 
-        // this.objectGroup = new Group();
         this.queryableObjects = [];
         this.borderVisible = false;
     }
@@ -52,7 +47,6 @@ class TinLayer extends Layer {
 
     scaleZ(z) {
         this.mainMesh.scale.z = z;
-        //this.objectGroup.scale.z = z;
     }
 
     async onAdd(map) {
@@ -60,7 +54,6 @@ class TinLayer extends Layer {
         map.update();
     }
 
-    //build BufferGeometry with Index
     async build(app_scene) {
 
         let geometry = new BufferGeometry();
@@ -120,8 +113,6 @@ class TinLayer extends Layer {
         this.materialsArray.push(this.material);
         let mesh = this.mainMesh = new Mesh(geometry, this.material);
         // mesh.userData.layerId = this.index;        
-        // this.addObject(mesh, true);
-        //this.mainMesh = mesh;
         if (app_scene) {
             app_scene.add(mesh);
         }
@@ -132,7 +123,6 @@ class TinLayer extends Layer {
         this.yLocalPlane.constant = filterY;
     }
 
-
     async points(geomId) {
         const url = POINTURL + geomId;
         const buffer = await this.request(url);
@@ -214,10 +204,6 @@ class TinLayer extends Layer {
         return sigbits;
     }
 
-
-
-
 }
 
-
 export { TinLayer };

src/js/main.js

@@ -187,10 +187,11 @@ class Application {
         this.selection = new Selection(
             // new Vector3(-7, -14, -14),
             // new Vector3(14, 9, 3)
+            { name: 'Slicing Box'},
             new Vector3(x.min, y.min, z.min),
-            new Vector3(x.max, y.max, z.max),
+            new Vector3(x.max, y.max, z.max)           
-            map
         );
+        this.map.addLayer(this.selection);
 
         new Picking(size, center, this);
        
@@ -263,9 +264,9 @@ class Application {
         //     new Vector3(x.min, y.min, z.min),
         //     new Vector3(x.max, y.max, z.max)
         // );        
-        this.capsScene.add(this.selection.boxMesh);
+        // this.capsScene.add(this.selection.boxMesh);
-        this.scene.add(this.selection.displayMeshes);
+        // this.scene.add(this.selection.displayMeshes);
-        this.scene.add(this.selection.touchMeshes);
+        // this.scene.add(this.selection.touchMeshes);
 
         // domEvent.on(window, 'resize', this.onWindowResize, this);
         // domEvent.on(window, 'keydown', this.keydown, this);