- throttling threejs animation in main.js

- use Group class instead of Object3D for touchMeshes and displayMeshes in Selection.js
- npm updates

src/js/clip/Picking.js

@@ -98,11 +98,12 @@ export class Picking {
                 if (this.intersected !== null) {
                     this.intersected.guardian.rayOut();
                 }
+                // select yellow color
                 candidate.guardian.rayOver();
                 this.intersected = candidate;
                 this.simulation.renderer.domElement.style.cursor = 'pointer';
                 // this.simulation.throttledRender();
-                this.simulation.animate();
+                this.simulation.deferringThrottle();
             }
 
         } else if (this.intersected !== null) {
@@ -111,7 +112,7 @@ export class Picking {
             this.intersected = null;
             this.simulation.renderer.domElement.style.cursor = 'auto';
             // this.simulation.throttledRender();
-            this.simulation.animate();
+            this.simulation.deferringThrottle();
         }
     }
 
@@ -160,7 +161,7 @@ export class Picking {
             this.plane.lookAt(newNormal.add(intersectionPoint));
             this.simulation.renderer.domElement.style.cursor = 'grab';
             // simulation.throttledRender();
-            this.simulation.animate();
+            this.simulation.deferringThrottle();
 
             let continueDrag = function (event) {
                 event.preventDefault();
@@ -187,7 +188,7 @@ export class Picking {
                     this.simulation.selection.setValue(axis, value);
                     // this.simulation.selection.setValue('x1', 4452960);
                     // this.simulation.throttledRender();
-                    this.simulation.animate();
+                    this.simulation.deferringThrottle();
                 }
 
             };

src/js/clip/Selection.js

@@ -7,6 +7,7 @@ import { uniforms } from "./uniforms";
 import { SelectionBoxFace } from './SelectionBoxFace';
 import { SelectionBoxLine } from './SelectionBoxLine';
 import { Layer } from '../layer/Layer';
+import { Group } from 'three/src/objects/Group';
 
 export class Selection extends Layer {
     limitLow;
@@ -33,7 +34,9 @@ export class Selection extends Layer {
             x1: low.x,
             y1: low.y,
             x2: high.x,
-            y2: high.y
+            y2: high.y,
+            z1: low.z - 5000,
+            z2: high.z + 5000
         }
         this.scale = 1;
 
@@ -50,8 +53,8 @@ export class Selection extends Layer {
 
         let v = this.vertices;
 
-        this.touchMeshes = new Object3D();
-        this.displayMeshes = new Object3D();
+        this.touchMeshes = new Group(); //Object3D();
+        this.displayMeshes = new Group(); // Object3D();
         this.meshGeometries = [];
         this.lineGeometries = [];
         this.selectables = [];
@@ -93,7 +96,7 @@ export class Selection extends Layer {
     build(app_scene) {
         // app_scene.add(this.boxMesh);
         app_scene.add(this.displayMeshes);
-        app_scene.add(this.touchMeshes);
+        // app_scene.add(this.touchMeshes);
     }
 
     setWireframeMode(wireframe) {
@@ -112,6 +115,7 @@ export class Selection extends Layer {
         this.scale = z;
         // this.boxMesh.scale.z = z;
         // this.displayMeshes.scale.z = z;
+        this.displayMeshes.scale.set(1, 1, z);
         // this.touchMeshes.scale.z = z;
     }
 
@@ -155,7 +159,7 @@ export class Selection extends Layer {
     setBox() {
         let width = new Vector3();
         width.subVectors(this.limitHigh, this.limitLow);
-        this.boxMesh.scale.copy(width);           
+        this.boxMesh.scale.copy(width);
         width.multiplyScalar(0.5).add(this.limitLow);
         this.boxMesh.position.copy(width);
     }
@@ -177,7 +181,7 @@ export class Selection extends Layer {
 
     setValue(axis, value) {
         let buffer = 1000;
-        let limit = 14000;
+        // let limit = 14000;
 
         if (axis === 'x1') {
             // this.limitLow.x = Math.max(-limit, Math.min(this.limitHigh.x - buffer, value));            
@@ -192,9 +196,11 @@ export class Selection extends Layer {
             // this.limitHigh.y = Math.max(this.limitLow.y + buffer, Math.min(limit, value));          
             this.limitHigh.y = Math.max(this.limitLow.y + buffer, Math.min(this.limit.y2, value));
         } else if (axis === 'z1') {
-            this.limitLow.z = Math.max(-limit, Math.min(this.limitHigh.z - buffer, value));
+            // this.limitLow.z = Math.max(-limit, Math.min(this.limitHigh.z - buffer, value));
+            this.limitLow.z = Math.max(this.limit.z1, Math.min(this.limitHigh.z - buffer, value));
         } else if (axis === 'z2') {
-            this.limitHigh.z = Math.max(this.limitLow.z + buffer, Math.min(limit, value));
+            // this.limitHigh.z = Math.max(this.limitLow.z + buffer, Math.min(limit, value));
+            this.limitHigh.z = Math.max(this.limitLow.z + buffer, Math.min(this.limit.z2, value));
         }
 
         this.setBox();

src/js/main.js

@@ -25,6 +25,7 @@ import { MobileDialog } from "./controls/MobileDialog";
 import { Picking } from './clip/Picking';
 
 import { Selection } from './clip/Selection';
+import _ from "lodash";
 
 import '../css/page.scss'; /* style loader will import it */
 
@@ -352,6 +353,8 @@ class Application {
         this.animate();
     }
 
+    deferringThrottle = _.throttle(this.animate, 40);
+
     animate() {
         this.renderer.clear();