fl-web-component 2.0.15 → 2.0.17

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-distance.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 MeasureDistance = function (renderer, scene, camera, width, height) {
+var MeasureDistance = 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,11 +17,12 @@ var MeasureDistance = function (renderer, scene, camera, width, height) {
   this.tempLabel = undefined;
   this.tipsLabel = undefined;
   this.isCompleted = false;
+  this.hasTempPoint = false;
   this.timer = null;
   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);
 };
@@ -41,7 +43,78 @@ MeasureDistance.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.removeArrayItem(this.labels, this.tempLabel);
+    this.disposeObject(this.tempPoints);
+    this.disposeObject(this.tempLine);
+    this.disposeObject(this.tempLabel);
+    this.tempPoints = undefined;
+    this.tempLine = undefined;
+    this.tempLabel = undefined;
+    this.hasTempPoint = false;
+  },
+  getPosition(e, options = {}) {
     const mouse = new THREE.Vector2();
     const elRect = this.renderer.domElement.getBoundingClientRect();
     const canvasX = e.clientX - elRect.left;
@@ -51,11 +124,17 @@ MeasureDistance.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 =
@@ -91,7 +170,7 @@ MeasureDistance.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;
@@ -101,7 +180,7 @@ MeasureDistance.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;
   },
@@ -110,9 +189,12 @@ MeasureDistance.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);
@@ -149,7 +231,7 @@ MeasureDistance.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;
   },
@@ -157,7 +239,6 @@ MeasureDistance.prototype = {
     this.firstTime = new Date().getTime();
   },
   click(e) {
-    console.log(_this.points)
     let lastTime = new Date().getTime();
     if (lastTime - this.firstTime < 300) {
       if (_this.isCompleted) {
@@ -166,14 +247,20 @@ MeasureDistance.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.1, point.y, point.z + 0.05);
           } else {
@@ -188,9 +275,35 @@ MeasureDistance.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];
+            const dist = p1.distanceTo(p2);
+            const label = `${_this.numberToString(dist)}`;
+            const position = new THREE.Vector3(
+              (p1.x + p2.x) / 2,
+              (p1.y + p2.y) / 2,
+              (p1.z + p2.z) / 2
+            );
+            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);
+            }
+            if (_this.tempLabel) {
+              _this.tempLabel.element.textContent = label;
+              _this.tempLabel.position.set(position.x, position.y, position.z);
+            } else {
+              _this.tempLabel = _this.createLabel('measure-label', label, position);
+              _this.labels.push(_this.tempLabel);
+              _this.scene.add(_this.tempLabel);
+            }
+          }
           _this.tempLine = undefined;
           _this.tempLabel = undefined;
-          _this.pointArray.push(point);
         }
       });
     }
@@ -204,11 +317,13 @@ MeasureDistance.prototype = {
     clearTimeout(_this.timer);
     const positionResult = _this.getPosition(e);
     if (positionResult) {
+      _this.clearTempMeasure();
       _this.isCompleted = true;
       _this.tempPoints = undefined;
       _this.tempLine = undefined;
       _this.tempLabel = undefined;
       _this.pointArray.splice(0);
+      _this.hasTempPoint = false;
       _this.renderer.domElement.removeEventListener('mousemove', _this.mousemove);
     }
   },
@@ -228,6 +343,7 @@ MeasureDistance.prototype = {
       this.tempPoints = undefined;
       this.tempLabel = undefined;
       this.tempLine = undefined;
+      this.hasTempPoint = false;
       this.scene.remove(this.tipsLabel);
       this.tipsLabel = undefined;
       this.firstTime = 0;
@@ -245,6 +361,7 @@ MeasureDistance.prototype = {
     this.tempPoints = undefined;
     this.tempLabel = undefined;
     this.tempLine = undefined;
+    this.hasTempPoint = false;
     this.scene.remove(this.tipsLabel);
     this.tipsLabel = undefined;
     this.firstTime = 0;