fl-web-component 1.4.9-beta.0 → 2.0.0-beta.10

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

@@ -1,5 +1,6 @@
 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) {
   this.renderer = renderer;
@@ -54,21 +55,43 @@ MeasureArea.prototype = {
     _this.raycaster.setFromCamera(mouse, _this.camera);
     let intersects = _this.raycaster.intersectObjects(_this.scene.children, true);
     if (intersects.length > 0) {
-      return intersects[0].point;
+      return { point: intersects[0].point, isModel: true };
+    }
+
+    // 如果没有交点，构建一个基于最后一个确认点且面向相机的平面
+    if (_this.pointArray && _this.pointArray.length > 0) {
+      const lastPoint = _this.pointArray.length === 1 
+        ? _this.pointArray[0] 
+        : _this.pointArray[_this.pointArray.length - 2];
+      const cameraDir = new THREE.Vector3();
+      _this.camera.getWorldDirection(cameraDir);
+      const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(cameraDir, lastPoint);
+      const target = new THREE.Vector3();
+      _this.raycaster.ray.intersectPlane(plane, target);
+      if (target) {
+        return { point: target, isModel: false };
+      }
     }
 
     // 如果没有交点，则创建一个在相机视图平面上的点
-    const ray = new THREE.Ray();
-    _this.raycaster.ray.intersectPlane(_this.plane, ray.origin);
-    if (ray.origin) {
-      return ray.origin;
+    const target = new THREE.Vector3();
+    _this.raycaster.ray.intersectPlane(_this.plane, target);
+    if (target) {
+      return { point: target, isModel: false };
     }
     return null;
   },
   createLine(p1, p2, config = { color: 0xff0000 }) {
-    const lineMaterial = new THREE.LineBasicMaterial({ color: config.color, linewidth: 20 });
+    const lineMaterial = new THREE.LineBasicMaterial({
+      color: config.color,
+      linewidth: 20,
+      depthTest: false,
+      depthWrite: false,
+      transparent: true,
+    });
     const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2]);
     const line = new THREE.Line(lineGeometry, lineMaterial);
+    line.renderOrder = 999;
     line.frustumCulled = false;
     return line;
   },
@@ -82,8 +105,9 @@ MeasureArea.prototype = {
   },
   mousemove(e) {
     if (_this.isCompleted || _this.pointArray.length === 0) return;
-    const point = _this.getPosition(e);
-    if (point) {
+    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);
@@ -153,8 +177,13 @@ MeasureArea.prototype = {
       clearTimeout(_this.timer);
       _this.timer = setTimeout(() => {
         _this.isCompleted = false;
-        const point = _this.getPosition(e);
-        if (point) {
+        const positionResult = _this.getPosition(e);
+        if (positionResult) {
+          const { point, isModel } = positionResult;
+          if (!isModel) {
+            Message.warning('请点击模型进行测量');
+            return;
+          }
           if (_this.tipsLabel) {
             _this.tipsLabel.position.set(point.x + 0.01, point.y, point.z + 0.05);
           } else {
@@ -182,8 +211,9 @@ MeasureArea.prototype = {
       _this.tipsLabel = undefined;
     }
     clearTimeout(_this.timer);
-    const point = _this.getPosition(e);
-    if (point) {
+    const positionResult = _this.getPosition(e);
+    if (positionResult) {
+      const point = positionResult.point;
       _this.isCompleted = true;
       if (_this.tempPoints) {
         _this.tempPoints.position.set(point.x, point.y, point.z);

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

@@ -1,5 +1,6 @@
 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) {
   this.renderer = renderer;
@@ -52,22 +53,44 @@ MeasureDistance.prototype = {
     _this.raycaster.setFromCamera(mouse, this.camera);
     let intersects = _this.raycaster.intersectObjects(_this.scene.children, true);
     if (intersects.length > 0) {
-      return intersects[0].point;
+      return { point: intersects[0].point, isModel: true };
+    }
+
+    // 如果没有交点，构建一个基于最后一个确认点且面向相机的平面
+    if (_this.pointArray && _this.pointArray.length > 0) {
+      const lastPoint = _this.pointArray.length === 1 
+        ? _this.pointArray[0] 
+        : _this.pointArray[_this.pointArray.length - 2];
+      const cameraDir = new THREE.Vector3();
+      _this.camera.getWorldDirection(cameraDir);
+      const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(cameraDir, lastPoint);
+      const target = new THREE.Vector3();
+      _this.raycaster.ray.intersectPlane(plane, target);
+      if (target) {
+        return { point: target, isModel: false };
+      }
     }
 
     // 如果没有交点，则创建一个在相机视图平面上的点
-    const ray = new THREE.Ray();
-    _this.raycaster.ray.intersectPlane(_this.plane, ray.origin);
-    if (ray.origin) {
-      return ray.origin;
+    const target = new THREE.Vector3();
+    _this.raycaster.ray.intersectPlane(_this.plane, target);
+    if (target) {
+      return { point: target, isModel: false };
     }
 
     return null;
   },
   createLine(p1, p2, config = { color: 0xff0000 }) {
-    const lineMaterial = new THREE.LineBasicMaterial({ color: config.color, linewidth: 15 });
+    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.renderOrder = 999;
     line.frustumCulled = false;
     return line;
   },
@@ -81,8 +104,9 @@ MeasureDistance.prototype = {
   },
   mousemove(e) {
     if (_this.isCompleted || _this.pointArray.length === 0) return;
-    const point = _this.getPosition(e);
-    if (point) {
+    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);
@@ -137,8 +161,14 @@ MeasureDistance.prototype = {
       clearTimeout(_this.timer);
       _this.timer = setTimeout(() => {
         _this.isCompleted = false;
-        const point = _this.getPosition(e);
-        if (point) {
+        const positionResult = _this.getPosition(e);
+        if (positionResult) {
+          const { point, isModel } = positionResult;
+          if (!isModel) {
+            // 提示请点击模型
+            Message.warning('请点击模型进行测量');
+            return;
+          }
           if (_this.tipsLabel) {
             _this.tipsLabel.position.set(point.x + 0.1, point.y, point.z + 0.05);
           } else {
@@ -167,8 +197,8 @@ MeasureDistance.prototype = {
       _this.tipsLabel = undefined;
     }
     clearTimeout(_this.timer);
-    const point = _this.getPosition(e);
-    if (point) {
+    const positionResult = _this.getPosition(e);
+    if (positionResult) {
       _this.isCompleted = true;
       _this.tempPoints = undefined;
       _this.tempLine = undefined;