fl-web-component 2.0.16 → 2.0.18

package/src/utils/threejs/measure-area.js

@@ -2,10 +2,11 @@ import * as THREE from 'three';
 import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
 import { Message } from 'element-ui';
 var _this = null;
-var MeasureArea = function (renderer, scene, camera, width, height) {
+var MeasureArea = function (renderer, scene, camera, width, height, options = {}) {
   this.renderer = renderer;
   this.scene = scene;
   this.camera = camera;
+  this.pickRoots = options.pickRoots || null;
   this.pointArray = []; // 保存当前操作所添加的点
   this.raycaster = new THREE.Raycaster();
   this.points = []; // 保存页面中所添加的点
@@ -16,13 +17,14 @@ var MeasureArea = function (renderer, scene, camera, width, height) {
   this.tempLabel = undefined;
   this.tipsLabel = undefined;
   this.isCompleted = false;
+  this.hasTempPoint = false;
   this.timer = null;
   this.polygonMesh = undefined;
   this.polygons = [];
   this.width = width;
   this.height = height;
   this.firstTime = 0;
-  this.measureName = 'measureObj'
+  this.measureName = 'measureObj';
   // 创建一个辅助平面来捕获鼠标事件
   this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
 };
@@ -43,7 +45,99 @@ MeasureArea.prototype = {
     this.width = width;
     this.height = height;
   },
-  getPosition(e) {
+  getPickRoots() {
+    const roots = typeof _this.pickRoots === 'function' ? _this.pickRoots() : _this.pickRoots;
+    if (Array.isArray(roots) && roots.length > 0) {
+      return roots.filter(Boolean);
+    }
+    if (roots) {
+      return [roots];
+    }
+    return _this.scene && _this.scene.children ? _this.scene.children : [];
+  },
+  isExcludedIntersection(object) {
+    let current = object;
+    while (current) {
+      const userData = current.userData || {};
+      if (current.visible === false) return true;
+      if (current.name === _this.measureName || userData.isMeasureObject === true) return true;
+      if (userData.transformControlHelper === true || userData.outlineProxy === true) return true;
+      if (current.isCamera || current.isLight) return true;
+      if (
+        typeof current.type === 'string' &&
+        (/Helper$/i.test(current.type) ||
+          current.type === 'CSS2DObject' ||
+          current.type === 'TransformControlsRoot')
+      ) {
+        return true;
+      }
+      current = current.parent;
+    }
+    return false;
+  },
+  markMeasureObject(object) {
+    object.name = this.measureName;
+    if (!object.userData) {
+      object.userData = {};
+    }
+    object.userData.isMeasureObject = true;
+    return object;
+  },
+  disposeObject(object) {
+    if (!object) return;
+    if (object.geometry) {
+      object.geometry.dispose();
+    }
+    if (object.material) {
+      object.material.dispose();
+    }
+    this.scene.remove(object);
+  },
+  removeArrayItem(array, item) {
+    if (!item) return;
+    const index = array.indexOf(item);
+    if (index !== -1) {
+      array.splice(index, 1);
+    }
+  },
+  clearTempMeasure() {
+    if (this.hasTempPoint && this.pointArray.length > 0) {
+      this.pointArray.pop();
+    }
+    this.removeArrayItem(this.points, this.tempPoints);
+    this.removeArrayItem(this.polyline, this.tempLine);
+    this.disposeObject(this.tempPoints);
+    this.disposeObject(this.tempLine);
+    this.tempPoints = undefined;
+    this.tempLine = undefined;
+    this.hasTempPoint = false;
+    this.updateAreaMeasure();
+  },
+  updateAreaMeasure() {
+    if (this.pointArray.length <= 2) {
+      this.removeArrayItem(this.polygons, this.polygonMesh);
+      this.removeArrayItem(this.labels, this.tempLabel);
+      this.disposeObject(this.polygonMesh);
+      this.disposeObject(this.tempLabel);
+      this.polygonMesh = undefined;
+      this.tempLabel = undefined;
+      return;
+    }
+    const area = this.calculateArea(this.pointArray);
+    this.createPolygon(this.pointArray);
+    if (!this.polygonMesh) return;
+    this.polygonMesh.geometry.computeBoundingSphere();
+    const center = this.polygonMesh.geometry.boundingSphere.center;
+    if (this.tempLabel) {
+      this.tempLabel.element.textContent = this.numberToString(area);
+      this.tempLabel.position.set(center.x, center.y, center.z);
+    } else {
+      this.tempLabel = this.createLabel('measure-label', this.numberToString(area), center);
+      this.labels.push(this.tempLabel);
+      this.scene.add(this.tempLabel);
+    }
+  },
+  getPosition(e, options = {}) {
     const mouse = new THREE.Vector2();
     const elRect = this.renderer.domElement.getBoundingClientRect();
     const canvasX = e.clientX - elRect.left;
@@ -53,11 +147,17 @@ MeasureArea.prototype = {
     mouse.y = -(canvasY / elRect.height) * 2.0 + 1.0;
 
     _this.raycaster.setFromCamera(mouse, _this.camera);
-    let intersects = _this.raycaster.intersectObjects(_this.scene.children, true);
+    let intersects = _this.raycaster
+      .intersectObjects(_this.getPickRoots(), true)
+      .filter(item => item && item.object && !_this.isExcludedIntersection(item.object));
     if (intersects.length > 0) {
       return { point: intersects[0].point, isModel: true };
     }
 
+    if (options.allowPlaneFallback === false) {
+      return null;
+    }
+
     // 如果没有交点，构建一个基于最后一个确认点且面向相机的平面
     if (_this.pointArray && _this.pointArray.length > 0) {
       const lastPoint =
@@ -92,7 +192,7 @@ MeasureArea.prototype = {
     });
     const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2]);
     const line = new THREE.Line(lineGeometry, lineMaterial);
-    line.name = this.measureName;
+    this.markMeasureObject(line);
     line.renderOrder = 999;
     line.frustumCulled = false;
     return line;
@@ -102,7 +202,7 @@ MeasureArea.prototype = {
     div.className = name;
     div.textContent = text;
     const divLabel = new CSS2DObject(div);
-    divLabel.name = this.measureName
+    this.markMeasureObject(divLabel);
     divLabel.position.set(position.x, position.y, position.z);
     return divLabel;
   },
@@ -111,9 +211,12 @@ MeasureArea.prototype = {
     const positionResult = _this.getPosition(e);
     if (positionResult) {
       const point = positionResult.point;
-      _this.pointArray.length === 1
-        ? _this.pointArray.push(point)
-        : _this.pointArray.splice(_this.pointArray.length - 1, 1, point);
+      if (_this.hasTempPoint) {
+        _this.pointArray.splice(_this.pointArray.length - 1, 1, point);
+      } else {
+        _this.pointArray.push(point);
+        _this.hasTempPoint = true;
+      }
       const length = _this.pointArray.length;
       if (_this.tempPoints) {
         _this.tempPoints.position.set(point.x, point.y, point.z);
@@ -132,29 +235,7 @@ MeasureArea.prototype = {
         _this.polyline.push(_this.tempLine);
         _this.scene.add(_this.tempLine);
       }
-      if (_this.pointArray.length > 2) {
-        const area = _this.calculateArea(_this.pointArray);
-        _this.createPolygon(_this.pointArray);
-        if (_this.tempLabel) {
-          _this.polygonMesh.geometry.computeBoundingSphere();
-          _this.tempLabel.element.textContent = _this.numberToString(area); // + '㎡'
-          _this.tempLabel.position.set(
-            _this.polygonMesh.geometry.boundingSphere.center.x,
-            _this.polygonMesh.geometry.boundingSphere.center.y,
-            _this.polygonMesh.geometry.boundingSphere.center.z
-          );
-        } else {
-          _this.polygonMesh.geometry.computeBoundingSphere();
-          console.log(_this.polygonMesh.geometry);
-          _this.tempLabel = _this.createLabel(
-            'measure-label',
-            area,
-            _this.polygonMesh.geometry.boundingSphere.center
-          );
-          _this.labels.push(_this.tempLabel);
-          _this.scene.add(_this.tempLabel);
-        }
-      }
+      _this.updateAreaMeasure();
       if (_this.tipsLabel) {
         _this.tipsLabel.position.set(point.x + 0.1, point.y, point.z + 0.05);
       }
@@ -165,7 +246,7 @@ MeasureArea.prototype = {
     div.className = 'tips-label';
     div.textContent = label;
     const tipsLabel = new CSS2DObject(div);
-    tipsLabel.name = this.measureName
+    this.markMeasureObject(tipsLabel);
     tipsLabel.position.set(position.x + 0.1, position.y, position.z + 0.05);
     return tipsLabel;
   },
@@ -181,13 +262,20 @@ MeasureArea.prototype = {
       clearTimeout(_this.timer);
       _this.timer = setTimeout(() => {
         _this.isCompleted = false;
-        const positionResult = _this.getPosition(e);
+        const positionResult = _this.getPosition(e, { allowPlaneFallback: false });
+        if (!positionResult || !positionResult.isModel) {
+          _this.clearTempMeasure();
+          Message.warning('请点击模型进行测量');
+          return;
+        }
         if (positionResult) {
-          const { point, isModel } = positionResult;
-          if (!isModel) {
-            Message.warning('请点击模型进行测量');
-            return;
+          const { point } = positionResult;
+          if (_this.hasTempPoint && _this.pointArray.length > 0) {
+            _this.pointArray.splice(_this.pointArray.length - 1, 1, point);
+          } else {
+            _this.pointArray.push(point);
           }
+          _this.hasTempPoint = false;
           if (_this.tipsLabel) {
             _this.tipsLabel.position.set(point.x + 0.01, point.y, point.z + 0.05);
           } else {
@@ -202,8 +290,20 @@ MeasureArea.prototype = {
             _this.points.push(geom);
             _this.scene.add(geom);
           }
+          const length = _this.pointArray.length;
+          if (length > 1) {
+            const p1 = _this.pointArray[length - 2];
+            const p2 = _this.pointArray[length - 1];
+            if (_this.tempLine) {
+              _this.tempLine.geometry.setFromPoints([p1, p2]);
+            } else {
+              _this.tempLine = _this.createLine(p1, p2);
+              _this.polyline.push(_this.tempLine);
+              _this.scene.add(_this.tempLine);
+            }
+          }
           _this.tempLine = undefined;
-          _this.pointArray.push(point);
+          _this.updateAreaMeasure();
         }
       }, 0);
     }
@@ -217,16 +317,13 @@ MeasureArea.prototype = {
     clearTimeout(_this.timer);
     const positionResult = _this.getPosition(e);
     if (positionResult) {
-      const point = positionResult.point;
+      _this.clearTempMeasure();
       _this.isCompleted = true;
-      if (_this.tempPoints) {
-        _this.tempPoints.position.set(point.x, point.y, point.z);
-        _this.tempPoints = undefined;
-      }
       _this.tempLine = undefined;
       _this.tempLabel = undefined;
       _this.polygonMesh = undefined;
       _this.pointArray.splice(0);
+      _this.hasTempPoint = false;
       _this.renderer.domElement.removeEventListener('mousemove', _this.mousemove);
     }
   },
@@ -247,6 +344,7 @@ MeasureArea.prototype = {
       this.tempPoints = undefined;
       this.tempLabel = undefined;
       this.tempLine = undefined;
+      this.hasTempPoint = false;
       this.scene.remove(this.tipsLabel);
       this.tipsLabel = undefined;
     }
@@ -265,6 +363,7 @@ MeasureArea.prototype = {
     this.tempPoints = undefined;
     this.tempLabel = undefined;
     this.tempLine = undefined;
+    this.hasTempPoint = false;
     this.scene.remove(this.tipsLabel);
     this.tipsLabel = undefined;
   },
@@ -326,8 +425,7 @@ MeasureArea.prototype = {
         });
         const mesh = new THREE.Mesh(geom, material);
         mesh.frustumCulled = false;
-        // mesh.name = 'polygonMesh';
-        mesh.name = _this.measureName;
+        _this.markMeasureObject(mesh);
         _this.polygonMesh = mesh;
         _this.scene.add(mesh);
         _this.polygons.push(mesh);

package/src/utils/threejs/measure-clear-distance.js

@@ -0,0 +1,346 @@
+import * as THREE from 'three';
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
+import { Message } from 'element-ui';
+
+var _this = null;
+var MeasureClearDistance = function (renderer, scene, camera, width, height) {
+  this.renderer = renderer;
+  this.scene = scene;
+  this.camera = camera;
+  this.pointArray = []; // 保存当前操作所添加的点
+  this.raycaster = new THREE.Raycaster();
+  this.points = []; // 保存页面中所添加的点
+  this.polyline = []; //保存页面中所添加的直线
+  this.labels = []; // 保存页面中所添加的文本
+  this.timer = null;
+  this.width = width;
+  this.height = height;
+  this.firstTime = 0;
+  this.measureName = 'measureObj'
+  this.selectedObjects = []
+};
+
+MeasureClearDistance.prototype = {
+  start() {
+    _this = this;
+    this.renderer.domElement.style.cursor = 'crosshair';
+    this.renderer.domElement.addEventListener('mouseup', this.click, false);
+    this.renderer.domElement.addEventListener('mousedown', this.mousedown, false);
+  },
+  updateParams(width, height) {
+    this.camera.aspect = width / height;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(width, height, true);
+    this.width = width;
+    this.height = height;
+  },
+  getPosition(e) {
+    const mouse = new THREE.Vector2();
+    const elRect = this.renderer.domElement.getBoundingClientRect();
+    const canvasX = e.clientX - elRect.left;
+    const canvasY = e.clientY - elRect.top;
+
+    mouse.x = (canvasX / elRect.width) * 2.0 - 1.0;
+    mouse.y = -(canvasY / elRect.height) * 2.0 + 1.0;
+
+    _this.raycaster.setFromCamera(mouse, this.camera);
+    let intersects = _this.raycaster.intersectObjects(_this.scene.children, true);
+    if (intersects.length > 0) {
+      return intersects[0]
+    }
+    return null
+  },
+  createLine(p1, p2, config = { color: 0xff0000 }) {
+    const lineMaterial = new THREE.LineBasicMaterial({
+      color: config.color,
+      linewidth: 15,
+      depthTest: false,
+      depthWrite: false,
+      transparent: true,
+    });
+    const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2]);
+    const line = new THREE.Line(lineGeometry, lineMaterial);
+    line.name = this.measureName;
+    line.renderOrder = 999;
+    line.frustumCulled = false;
+    return line;
+  },
+
+  createLabel(name, text, position) {
+    const div = document.createElement('div');
+    div.className = name;
+    div.textContent = text;
+    const divLabel = new CSS2DObject(div);
+    divLabel.name = this.measureName
+    divLabel.position.set(position.x, position.y, position.z);
+    return divLabel;
+  },
+  createTipsLabel(label, position) {
+    const div = document.createElement('div');
+    div.className = 'tips-label';
+    div.textContent = label;
+    const tipsLabel = new CSS2DObject(div);
+    tipsLabel.name = this.measureName
+    tipsLabel.position.set(position.x + 0.1, position.y, position.z + 0.05);
+    return tipsLabel;
+  },
+  mousedown() {
+    this.firstTime = new Date().getTime();
+  },
+  click(e) {
+    let lastTime = new Date().getTime();
+    if (lastTime - this.firstTime < 300) {
+      const measureObj = _this.getPosition(e);
+
+      if (measureObj) {
+        _this.selectedObjects.push(measureObj)
+
+        if (_this.selectedObjects.length % 2 === 0) {
+          _this.calculateClearDistance()
+        }
+      } else {
+        Message.warning('请点击模型进行测量');
+      }
+    }
+  },
+  calculateClearDistance() {
+    const l = this.selectedObjects.length;
+    // 每次都取最后两个
+    const obj1 = this.selectedObjects[l - 2];
+    const obj2 = this.selectedObjects[l - 1];
+    const isParallel = this.checkParallelism(obj1.object, obj1.instanceId, obj2.object, obj2.instanceId);
+    console.log(isParallel)
+    const pts1 = this.getInstanceSurfacePoints(obj1.object, obj1.instanceId, 600);
+    const pts2 = this.getInstanceSurfacePoints(obj2.object, obj2.instanceId, 600);
+    if (pts1.length === 0 || pts2.length === 0) {
+      return
+    }
+    const closestPair = this.findClosestPair(pts1, pts2);
+    const position = new THREE.Vector3((closestPair.point1.x + closestPair.point2.x) / 2, (closestPair.point1.y + closestPair.point2.y) / 2, (closestPair.point1.z + closestPair.point2.z) / 2);
+    // 将测量结果显示在页面中
+    const circleTag1 = this.createLabel('circle-tag', '', closestPair.point1);
+    const circleTag2 = this.createLabel('circle-tag', '', closestPair.point2);
+    const line = this.createLine(closestPair.point1, closestPair.point2)
+    const label = this.createLabel('measure-label', `${this.numberToString(closestPair.distance)}`, position)
+    this.points.push(circleTag1);
+    this.points.push(circleTag1);
+    this.polyline.push(line);
+    this.labels.push(label);
+    this.scene.add(circleTag1);
+    this.scene.add(circleTag2);
+    this.scene.add(line);
+    this.scene.add(label);
+  },
+  getInstanceSurfacePoints(instancedMesh, instanceId, maxPoints = 1000) {
+    const geometry = instancedMesh.geometry;
+    // let localPoints = this.generateGenericLocalPoints(geometry, maxPoints);
+    let localPoints = this.sampleGeometrySurface(geometry, maxPoints);
+    const worldMatrix = this.getInstanceWorldMatrix(instancedMesh, instanceId);
+    const worldPoints = localPoints.map(p => p.clone().applyMatrix4(worldMatrix));
+    return worldPoints.slice(0, maxPoints);
+  },
+  sampleGeometrySurface(geometry, maxPoints = 600) {
+    const positions = geometry.getAttribute('position');
+    if (!positions) return [];
+
+    // 获取三角形（优先使用索引）
+    let triangles = [];
+    if (geometry.index) {
+      const index = geometry.index.array;
+      for (let i = 0; i < index.length; i += 3) {
+        const a = new THREE.Vector3(positions.getX(index[i]), positions.getY(index[i]), positions.getZ(index[i]));
+        const b = new THREE.Vector3(positions.getX(index[i + 1]), positions.getY(index[i + 1]), positions.getZ(index[i + 1]));
+        const c = new THREE.Vector3(positions.getX(index[i + 2]), positions.getY(index[i + 2]), positions.getZ(index[i + 2]));
+        triangles.push([a, b, c]);
+      }
+    } else {
+      // 无索引时，每三个顶点组成一个三角形
+      for (let i = 0; i < positions.count; i += 3) {
+        const a = new THREE.Vector3(positions.getX(i), positions.getY(i), positions.getZ(i));
+        const b = new THREE.Vector3(positions.getX(i + 1), positions.getY(i + 1), positions.getZ(i + 1));
+        const c = new THREE.Vector3(positions.getX(i + 2), positions.getY(i + 2), positions.getZ(i + 2));
+        triangles.push([a, b, c]);
+      }
+    }
+
+    if (triangles.length === 0) return [];
+
+    // 计算每个三角形的面积
+    const areas = triangles.map(([a, b, c]) => {
+      const ab = new THREE.Vector3().subVectors(b, a);
+      const ac = new THREE.Vector3().subVectors(c, a);
+      return new THREE.Vector3().crossVectors(ab, ac).length() * 0.5;
+    });
+    const totalArea = areas.reduce((sum, a) => sum + a, 0);
+
+    // 按面积比例分配采样点数
+    const points = [];
+    for (let i = 0; i < triangles.length; i++) {
+      const [a, b, c] = triangles[i];
+      const area = areas[i];
+      let samplesForFace = Math.round((area / totalArea) * maxPoints);
+      if (samplesForFace < 1 && points.length < maxPoints) samplesForFace = 1; // 确保每个面至少一个点
+
+      for (let j = 0; j < samplesForFace; j++) {
+        // 重心坐标随机采样
+        const u = Math.random();
+        const v = Math.random() * (1 - u);
+        const w = 1 - u - v;
+        const point = new THREE.Vector3()
+          .addScaledVector(a, u)
+          .addScaledVector(b, v)
+          .addScaledVector(c, w);
+        points.push(point);
+      }
+    }
+
+    // 如果点数不够，随机补充
+    while (points.length < maxPoints) {
+      const triIdx = Math.floor(Math.random() * triangles.length);
+      const [a, b, c] = triangles[triIdx];
+      const u = Math.random();
+      const v = Math.random() * (1 - u);
+      const w = 1 - u - v;
+      points.push(new THREE.Vector3().addScaledVector(a, u).addScaledVector(b, v).addScaledVector(c, w));
+    }
+    return points.slice(0, maxPoints);
+  },
+  generateGenericLocalPoints(geometry, maxPoints = 1000) {
+    const pos = geometry.getAttribute('position');
+    if (!pos) return [];
+    const allVerts = [];
+    for (let i = 0; i < pos.count; i++) {
+      allVerts.push(new THREE.Vector3(pos.getX(i), pos.getY(i), pos.getZ(i)));
+    }
+    let sourceVerts = allVerts;
+    if (geometry.index) {
+      const indexArr = geometry.index.array;
+      const seen = new Set();
+      sourceVerts = [];
+      for (let i = 0; i < indexArr.length; i++) {
+        const v = allVerts[indexArr[i]];
+        const key = `${v.x.toFixed(4)},${v.y.toFixed(4)},${v.z.toFixed(4)}`;
+        if (!seen.has(key)) {
+          seen.add(key);
+          sourceVerts.push(v.clone());
+        }
+      }
+    }
+    if (sourceVerts.length > maxPoints) {
+      const step = Math.ceil(sourceVerts.length / maxPoints);
+      const sampled = [];
+      for (let i = 0; i < sourceVerts.length; i += step) sampled.push(sourceVerts[i]);
+      sourceVerts = sampled;
+    }
+    return sourceVerts;
+
+  },
+  findClosestPair(points1, points2) {
+    let minDist = Infinity;
+    const c1 = new THREE.Vector3();
+    const c2 = new THREE.Vector3();
+    for (const p1 of points1) {
+      for (const p2 of points2) {
+        const d = p1.distanceTo(p2);
+        if (d < minDist) {
+          minDist = d;
+          c1.copy(p1);
+          c2.copy(p2);
+        }
+      }
+    }
+    return { point1: c1, point2: c2, distance: minDist };
+  },
+
+  // 平行判断 (基于包围盒主轴方向)
+  checkParallelism(inst1, id1, inst2, id2) {
+    const mat1 = this.getInstanceWorldMatrix(inst1, id1);
+    const mat2 = this.getInstanceWorldMatrix(inst2, id2);
+    const box1 = new THREE.Box3();
+    const box2 = new THREE.Box3();
+
+    // 确保包围盒存在
+    if (!inst1.geometry.boundingBox) inst1.geometry.computeBoundingBox();
+    if (!inst2.geometry.boundingBox) inst2.geometry.computeBoundingBox();
+
+    box1.copy(inst1.geometry.boundingBox).applyMatrix4(mat1);
+    box2.copy(inst2.geometry.boundingBox).applyMatrix4(mat2);
+
+    const size1 = new THREE.Vector3(); box1.getSize(size1);
+    const size2 = new THREE.Vector3(); box2.getSize(size2);
+
+    const getMainDir = (s) => {
+      if (s.x >= s.y && s.x >= s.z) return new THREE.Vector3(1, 0, 0);
+      if (s.y >= s.x && s.y >= s.z) return new THREE.Vector3(0, 1, 0);
+      return new THREE.Vector3(0, 0, 1);
+    };
+    const d1 = getMainDir(size1);
+    const d2 = getMainDir(size2);
+
+    const rot1 = new THREE.Quaternion().setFromRotationMatrix(new THREE.Matrix4().extractRotation(mat1));
+    const rot2 = new THREE.Quaternion().setFromRotationMatrix(new THREE.Matrix4().extractRotation(mat2));
+    d1.applyQuaternion(rot1);
+    d2.applyQuaternion(rot2);
+
+    return Math.abs(d1.dot(d2)) > 0.95;
+  },
+  getInstanceWorldMatrix(instancedMesh, instanceId) {
+    const matrix = new THREE.Matrix4();
+    const instanceMatrix = new THREE.Matrix4();
+    instancedMesh.getMatrixAt(instanceId, instanceMatrix);
+    matrix.multiplyMatrices(instancedMesh.matrixWorld, instanceMatrix);
+    return matrix;
+  },
+  close(isClear) {
+    this.renderer.domElement.removeEventListener('mousedown', this.mousedown);
+    this.renderer.domElement.removeEventListener('mouseup', this.click)
+    if (!isClear) {
+      this.remove(this.points);
+      this.remove(this.polyline);
+      this.remove(this.labels);
+      this.pointArray.splice(0);
+      this.points.splice(0);
+      this.polyline.splice(0);
+      this.labels.splice(0);
+      this.firstTime = 0;
+    }
+    this.renderer.domElement.style.cursor = 'pointer';
+  },
+  clear() {
+    this.remove(this.points);
+    this.remove(this.polyline);
+    this.remove(this.labels);
+    this.pointArray.splice(0);
+    this.points.splice(0);
+    this.polyline.splice(0);
+    this.labels.splice(0);
+    this.firstTime = 0;
+  },
+  remove(array) {
+    for (let index = 0; index < array.length; index++) {
+      const element = array[index];
+      if (element.geometry) {
+        element.geometry.dispose();
+      }
+      this.scene.remove(element);
+    }
+  },
+  numberToString(num) {
+    if (num < 0.0001) {
+      return num.toString();
+    }
+    let fractionDigits = 2;
+    if (num < 0.01) {
+      fractionDigits = 4;
+    } else if (num < 0.1) {
+      fractionDigits = 3;
+    }
+    return num.toFixed(fractionDigits);
+  },
+  preventContextMenu(event) {
+    event.preventDefault();
+  },
+};
+export default {
+  MeasureClearDistance
+};