fl-web-component 2.0.16 → 2.0.17

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

@@ -3,10 +3,11 @@ import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
 import { Message } from 'element-ui';
 
 var _this = null;
-var MeasureHeight = function (renderer, scene, camera, width, height) {
+var MeasureHeight = 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 = [];
@@ -22,7 +23,7 @@ var MeasureHeight = function (renderer, scene, camera, width, height) {
   this.height = height;
   this.firstTime = 0;
   this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
-  this.measureName = 'measureObj'
+  this.measureName = 'measureObj';
 };
 
 MeasureHeight.prototype = {
@@ -40,7 +41,45 @@ MeasureHeight.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;
+  },
+  getPosition(e, options = {}) {
     const mouse = new THREE.Vector2();
     const elRect = this.renderer.domElement.getBoundingClientRect();
     const canvasX = e.clientX - elRect.left;
@@ -50,11 +89,17 @@ MeasureHeight.prototype = {
     mouse.y = -(canvasY / elRect.height) * 2.0 + 1.0;
 
     _this.raycaster.setFromCamera(mouse, this.camera);
-    const intersects = _this.raycaster.intersectObjects(_this.scene.children, true);
+    const 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 =
         _this.pointArray.length === 1
@@ -83,11 +128,11 @@ MeasureHeight.prototype = {
       linewidth: 15,
       depthTest: false,
       depthWrite: false,
-      transparent: true
+      transparent: true,
     });
     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;
@@ -97,7 +142,7 @@ MeasureHeight.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;
   },
@@ -128,7 +173,7 @@ MeasureHeight.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;
   },
@@ -141,13 +186,13 @@ MeasureHeight.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) {
+          Message.warning('请点击模型进行测量');
+          return;
+        }
         if (positionResult) {
-          const { point, isModel } = positionResult;
-          if (!isModel) {
-            Message.warning('请点击模型进行测量');
-            return;
-          }
+          const { point } = positionResult;
           // if (_this.tipsLabel) {
           //   _this.tipsLabel.position.set(point.x + 0.1, point.y, point.z + 0.05);
           // } else {
@@ -188,7 +233,6 @@ MeasureHeight.prototype = {
       this.renderer.domElement.style.cursor = 'pointer';
       this.firstTime = 0;
     }
-
   },
   clear() {
     this.remove(this.points);