JS: add measure distance tool (fix minorua#259)

- name every object group under scene
minex3d · Feb 15, 2022 · ae78c1d · ae78c1d
1 parent 0e35362
commit ae78c1d
Show file tree

Hide file tree

Showing 7 changed files with 188 additions and 9 deletions.
diff --git a/css/Qgis2threejs.css b/css/Qgis2threejs.css
@@ -31,6 +31,39 @@ body {
   pointer-events: none;
 }
 
+.tooltip::before {
+  display: block;
+  position: absolute;
+  visibility: hidden;
+  transform: translate(10px, 30px);
+
+  padding: 5px 10px;
+  content: attr(data-tooltip);
+
+  color: black;
+  background: white;
+  font-size: small;
+  white-space: nowrap;
+}
+
+.tooltip:hover::before {
+  visibility: visible;
+}
+
+.tooltip-btn {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border-radius: 8px;
+
+  font-size: 12px;
+  padding-top: 1px;
+  text-align: center;
+  color: white;
+  background-color: #bbb;
+  cursor: pointer;
+}
+
 #progress {
   position: absolute;
   top: 0;
@@ -276,6 +309,15 @@ body {
   text-decoration: none;
 }
 
+/* measure distance */
+table.measure tr:nth-child(odd) {
+  background-color: #eee;
+}
+
+table.measure tr > td:nth-child(2) {
+  text-align: right;
+}
+
 /* print dialog */
 .print div {
   padding: 5px;

diff --git a/html_templates/3DViewer(dat-gui).html b/html_templates/3DViewer(dat-gui).html
@@ -35,8 +35,9 @@
         <tr><td id="qr_coords"></td></tr>
       </table>
 
-      <!-- camera actions -->
-      <div class="action-btn action-orbit" onclick="app.cameraAction.orbit()">Orbit around here</div>
+      <!-- camera actions and measure tool -->
+      <div class="action-btn action-orbit" onclick="app.cameraAction.orbit()">Orbit</div>
+      <div class="action-btn" onclick="app.measure.start()">Measure distance</div>
 
       <!-- attributes -->
       <table id="qr_attrs_table">

diff --git a/html_templates/3DViewer.html b/html_templates/3DViewer.html
@@ -33,8 +33,9 @@
         <tr><td id="qr_coords"></td></tr>
       </table>
 
-      <!-- camera actions -->
-      <div class="action-btn action-orbit" onclick="app.cameraAction.orbit()">Orbit around here</div>
+      <!-- camera actions and measure tool -->
+      <div class="action-btn action-orbit" onclick="app.cameraAction.orbit()">Orbit</div>
+      <div class="action-btn" onclick="app.measure.start()">Measure distance</div>
 
       <!-- attributes -->
       <table id="qr_attrs_table">

diff --git a/html_templates/Mobile.html b/html_templates/Mobile.html
@@ -90,10 +90,11 @@
         <tr><td id="qr_coords"></td></tr>
       </table>
 
-      <!-- camera actions -->
+      <!-- camera actions and measure tool -->
       <div class="action-btn action-move" onclick="startARModeHere()">Start AR mode here</div>
       <div class="action-btn action-move hidden" onclick="moveHere()">Move here</div>
-      <div class="action-btn action-orbit" onclick="app.cameraAction.orbit()">Orbit around here</div>
+      <div class="action-btn action-orbit" onclick="app.cameraAction.orbit()">Orbit</div>
+      <div class="action-btn" onclick="app.measure.start()">Measure distance</div>
 
       <!-- attributes -->
       <table id="qr_attrs_table">

diff --git a/html_templates/RayTracing.html b/html_templates/RayTracing.html
@@ -52,7 +52,7 @@
       </table>
 
       <!-- camera actions -->
-      <div class="action-btn action-orbit" onclick="app.cameraAction.orbit()">Orbit around here</div>
+      <div class="action-btn action-orbit" onclick="app.cameraAction.orbit()">Orbit</div>
 
       <!-- attributes -->
       <table id="qr_attrs_table">

diff --git a/js/Qgis2threejs.js b/js/Qgis2threejs.js
@@ -105,6 +105,17 @@ Q3D.Config = {
     o: 0.8
   },
 
+  measure: {
+    marker: {
+      r: 0.004,
+      c: 0xffff00,
+      o: 0.5
+    },
+    line: {
+      c: 0xffff00
+    }
+  },
+
   coord: {
     visible: true,
     latlon: false
@@ -341,6 +352,7 @@ Q3D.application
     var opt = conf.qmarker;
     app.queryMarker = new THREE.Mesh(new THREE.SphereBufferGeometry(opt.r, 32, 32),
                                      new THREE.MeshLambertMaterial({color: opt.c, opacity: opt.o, transparent: (opt.o < 1)}));
+    app.queryMarker.name = "marker";
 
     app.highlightMaterial = new THREE.MeshLambertMaterial({emissive: 0x999900, transparent: true, opacity: 0.5});
 
@@ -535,6 +547,9 @@ Q3D.application
       }
 
       switch (e.keyCode) {
+        case 8:   // BackSpace
+          if (app.measure.isActive) app.measure.removeLastPoint();
+          return;
         case 13:  // Enter
           app.animation.keyframes.resume();
           return;
@@ -1213,6 +1228,7 @@ Q3D.application
 
     app.scene.remove(app.queryMarker);
     app.highlightFeature(null);
+    app.measure.clear();
     app.render();
 
     app.selectedLayer = null;
@@ -1264,6 +1280,11 @@ Q3D.application
     for (var i = 0, l = objs.length; i < l; i++) {
       obj = objs[i];
 
+      if (app.measure.isActive) {
+        app.measure.addPoint(obj.point, obj.distance);
+        return;
+      }
+
       // get layerId of clicked object
       o = obj.object;
       while (o) {
@@ -1403,6 +1424,114 @@ Q3D.application
       restoreCanvasSize();
     }
   };
+
+  (function () {
+
+    var path = [];
+
+    app.measure = {
+
+      isActive: false,
+
+      precision: 3,
+
+      start: function () {
+        app.scene.remove(app.queryMarker);
+
+        if (!this.geom) {
+          var opt = conf.measure.marker;
+          this.geom = new THREE.SphereBufferGeometry(opt.r, 32, 32);
+          this.mtl = new THREE.MeshLambertMaterial({color: opt.c, opacity: opt.o, transparent: (opt.o < 1)});
+          opt = conf.measure.line;
+          this.lineMtl = new THREE.LineBasicMaterial({color: opt.c});
+          this.markerGroup = new Q3D.Group();
+          this.markerGroup.name = "measure marker";
+          this.lineGroup = new Q3D.Group();
+          this.lineGroup.name = "measure line";
+        }
+
+        this.isActive = true;
+
+        app.scene.add(this.markerGroup);
+        app.scene.add(this.lineGroup);
+
+        this.addPoint(app.queryTargetPosition, app.camera.position.distanceTo(app.queryTargetPosition));
+      },
+
+      addPoint: function (pt, markerSize) {
+        // add a marker
+        var marker = new THREE.Mesh(this.geom, this.mtl);
+        marker.position.copy(pt);
+        marker.scale.setScalar(markerSize);
+
+        this.markerGroup.updateMatrixWorld();
+        this.markerGroup.add(marker);
+
+        path.push(marker.position);
+
+        if (path.length > 1) {
+          // add a line
+          var v = path[path.length - 2].toArray().concat(path[path.length - 1].toArray()),
+              geom = new THREE.BufferGeometry().setAttribute("position", new THREE.Float32BufferAttribute(v, 3)),
+              line = new THREE.Line(geom, this.lineMtl);
+          this.lineGroup.add(line);
+        }
+
+        app.render();
+        this.showResult();
+      },
+
+      removeLastPoint: function () {
+        path.pop();
+        this.markerGroup.children.pop();
+        this.lineGroup.children.pop();
+
+        app.render();
+        this.showResult();
+      },
+
+      clear: function () {
+        if (!this.isActive) return;
+
+        this.markerGroup.clear();
+        this.lineGroup.clear();
+
+        app.scene.remove(this.markerGroup);
+        app.scene.remove(this.lineGroup);
+
+        path = [];
+        this.isActive = false;
+      },
+
+      showResult: function () {
+        var vec2 = new THREE.Vector2(),
+            zScale = app.scene.userData.zScale;
+        var html;
+        if (path.length > 1) {
+          var total = 0, totalxy = 0, dxy, dz;
+          for (var i = path.length - 1; i > 0; i--) {
+            dxy = vec2.copy(path[i]).distanceTo(path[i - 1]);
+            dz = (path[i].z - path[i - 1].z) / zScale;
+
+            total += Math.sqrt(dxy * dxy + dz * dz);
+            totalxy += dxy;
+          }
+          dz = path[path.length - 1].z - path[0].z;
+
+          html = '<table class="measure">';
+          html += "<tr><td>Total distance:</td><td>" + total.toFixed(this.precision) + " m</td><td></td></tr>";
+          html += "<tr><td>Horizontal distance:</td><td>" + totalxy.toFixed(this.precision) + " m</td><td></td></tr>";
+          html += '<tr><td>Elevation difference:</td><td>' + dz.toFixed(this.precision) + ' m</td><td><span class="tooltip tooltip-btn" data-tooltip="elevation difference between start point and end point">?</span></td></tr>';
+          html += "</table>";
+        }
+        else {
+          html = '<div style="font-size:small;">Click on the 3D map to add points to your path.</div>';
+        }
+
+        gui.popup.show(html, "Measure distance");
+      }
+    };
+  })();
 })();
 
 /*
@@ -1869,12 +1998,15 @@ Q3D.Scene = function () {
   this.mapLayers = {};    // map layers contained in this scene. key is layerId.
 
   this.lightGroup = new Q3D.Group();
+  this.lightGroup.name = "light";
   this.add(this.lightGroup);
 
   this.labelGroup = new Q3D.Group();
+  this.labelGroup.name = "label";
   this.add(this.labelGroup);
 
   this.labelConnectorGroup = new Q3D.Group();
+  this.labelConnectorGroup.name = "label connector"
   this.add(this.labelConnectorGroup);
 };
 
@@ -2622,6 +2754,7 @@ Q3D.MapLayer = function () {
   this.materials.addEventListener("renderRequest", this.requestRender.bind(this));
 
   this.objectGroup = new Q3D.Group();
+  this.objectGroup.name = "layer";
   this.objects = [];
 };
 

diff --git a/viewer/viewer.html b/viewer/viewer.html
@@ -96,8 +96,9 @@
         <tr><td id="qr_coords"></td></tr>
       </table>
 
-      <!-- camera actions -->
-      <div class="action-btn action-orbit" onclick="app.cameraAction.orbit()">Orbit around here</div>
+      <!-- camera actions and measure tool -->
+      <div class="action-btn action-orbit" onclick="app.cameraAction.orbit()">Orbit</div>
+      <div class="action-btn" onclick="app.measure.start()">Measure distance</div>
 
       <!-- attributes -->
       <table id="qr_attrs_table">