fl-web-component 2.0.0-beta.1 → 2.0.0-beta.10

package/packages/utils/StreamLoader.js

@@ -1424,15 +1424,6 @@ export class StreamLoader {
       this.updateModelRegistry(item, materialData, sceneBox, boxIndex);
       console.log('modelRegistry', this.modelRegistry)
 
-      // 获取区域划分数据
-      // const divideData = await this.getPrimitivesByDivide(item.id);
-
-      // if (divideData && divideData.length > 0) {
-      //   await this.batchLoadRegions(item, divideData, options);
-        options.onComplete?.();
-      // } else {
-      // }
-
       return { modelResourceMap: modelResourceMapObj, sceneBox, boxIndex, item };
     } catch (error) {
       return null;

package/src/utils/flgltf-parser.js

@@ -1,245 +1,245 @@
-import * as THREE from 'three';
-
-const NODE_TYPES = {
-  pbsGrp: 1,
-  major: 2,
-  model: 3,
-};
-
-  // 处理mesh数据，生成drawObjs
-function processMeshData(input, options) {
-  const drawObjMap = new Map();
-
-  if (!input.mesh) {
-    return [];
-  }
-
-  input.mesh.forEach(meshItem => {
-    const geomList = [];
-    meshItem.primitives.forEach(primitive => {
-      const primitiveData = input.primitive.find(g => g.id === primitive.prmid);
-      if (primitiveData) {
-        const material = input.material?.find(m => m.id === primitiveData.material);
-        const prop = {
-          color: material?.color || [255, 255, 255, 1],
-          fontsize: material?.fontsize !== undefined ? material?.fontsize : 20,
-          frontname: material?.frontname !== undefined ? material?.frontname : '',
-          italic: material?.italic,
-          linepacing: 1, // 默认值
-          linewidth: material?.linewidth !== undefined ? material?.linewidth : 1, // 默认值
-          visible: material?.visible === false ? false : true,
-          transparent: material?.transp !== undefined ? material?.transp : 0,
-        };
-
-        const identity = new THREE.Matrix4().identity();
-
-        geomList.push({
-          matrix: {
-            val: primitive.matrix?.length ? primitive.matrix : identity.elements,
-            // val: identity.elements,
-          },
-          // originMatrix: meshItem.id == primitive.prmid ? [] : identity.elements,
-          prmid: primitive.prmid,
-          geomId: primitiveData.id,
-          type: primitiveData.geomType,
-          text: primitiveData.geomText,
-          points: primitiveData.position,
-          alignType: primitiveData.alignType,
-          normals: primitiveData.normal,
-          triangles: primitiveData.indices || [],
-          max: primitiveData.max,
-          min: primitiveData.min,
-          prop: prop,
-        });
-      }
-    });
-
-    drawObjMap.set(meshItem.id, {
-      drawObjId: meshItem.id,
-      geoms: geomList,
-      // lodLevel: meshItem.type || 2,
-    });
-  });
-
-  return Array.from(drawObjMap.values());
-}
-
-// 处理node数据，生成instances
-function processNodeData(input, options) {
-  const flatNode = options?.flatNode;
-
-  function flattenAndComputeWorldMatrices(
-    nodes,
-    result = [],
-    // parentWorldMatrix = null,
-    fatherId = ''
-  ) {
-    for (const node of nodes) {
-      const { category, instanceId, matrix, children, drawObject, groupId, nodeType } = node;
-
-      // 构造本地矩阵
-      let localMatrix;
-      if (matrix && matrix.val) {
-        localMatrix = new THREE.Matrix4().fromArray(matrix.val);
-      } else {
-        localMatrix = new THREE.Matrix4().identity(); // 默认为单位矩阵
-      }
-
-      // 计算世界矩阵
-      // const worldMatrix = parentWorldMatrix
-      //   ? parentWorldMatrix.clone().multiply(localMatrix)
-      //   : localMatrix.clone();
-      const worldMatrix = localMatrix.clone();
-
-      // 构造输出节点
-      result.push({
-        drawObject,
-        category,
-        instanceId,
-        // matrix,
-        matrix: {
-          val: Array.from(worldMatrix.toArray()),
-        },
-        fatherId,
-        groupId,
-        nodeType,
-      });
-
-      // 递归处理子节点，传递当前世界矩阵
-      if (children) {
-        flattenAndComputeWorldMatrices(children, result, instanceId);
-      }
-    }
-
-    return result;
-  }
-
-  if(!flatNode){
-    const formatInstances = [];
-    const preNode = input.node ? input.node : generateNode(input.mesh);
-    const rootInstances = parseNode(preNode);
-    flattenAndComputeWorldMatrices(rootInstances, formatInstances);
-
-    return formatInstances
-  }else{
-    return parseNode(input.node, flatNode);
-  }
-}
-
-// 处理一个primitive，生成多个drawObj
-function processOnePrimtiveToMultiMesh(primitive){
-  return {
-    instanceId: primitive.drawObjId, // 实例与drawObj一对多关系
-    drawObject: primitive.geoms[0]?.prmid || '',
-    matrix: primitive.geoms[0]?.matrix || [],
-  }
-}
-
-// 主解析函数，整合两个独立模块的结果
-function parseData(input, options) {
-  const drawObjs = processMeshData(input, options);
-  const instances = drawObjs.map((item) => {
-    return processOnePrimtiveToMultiMesh(item); // 实例与drawObj一对多关系
-  })
-  // const instances = drawObjs.map((item) => {
-  //   return {
-  //     instanceId: item.drawObjId, // 实例与drawObj一对一关系
-  //     drawObject: item.drawObjId,
-  //   }
-  // })
-  // const instances = processNodeData(input);
-
-  const map = {
-    drawObjs,
-    instances,
-  };
-  // console.log('parseData', map);
-  return map;
-}
-
-// 递归处理节点实例
-function parseNode(node, isFlatNode) {
-  function processInstance(instance, parentInstanceId, instanceMap, groupId, isFlatNode) {
-    const newInstance = {
-      category: instance.category || instance.name,
-      drawObject: instance.drawObject || instance.mesh,
-      fatherId: parentInstanceId || '',
-      instanceId: instance.id || instance.batchId,
-      matrix: instance.matrix,
-      children: [],
-      nodeType: instance.nodeType,
-      groupId: instance.nodeType === NODE_TYPES.pbsGrp ? instance._batchId : groupId,
-    };
-
-    if(!isFlatNode){
-      // 处理子实例
-      if (instance.children && instance.children.length > 0) {
-        instance.children.forEach(childId => {
-          const childInstance = instanceMap.get(childId);
-          if (childInstance) {
-            const processedChild = processInstance(
-              childInstance,
-              instance._batchId,
-              instanceMap,
-              newInstance.groupId
-            );
-            newInstance.children.push(processedChild);
-          }
-        });
-      }
-    }
-
-    return newInstance;
-  }
-
-  const rootInstances = [];
-  // 创建实例映射
-  if(!isFlatNode){
-    const instanceMap = new Map();
-    node.forEach(instance => {
-      instanceMap.set(instance.id, instance);
-    });
-
-    // 处理根实例
-    instanceMap.forEach(instance => {
-      let isRoot = true;
-      instanceMap.forEach(otherInstance => {
-        if (otherInstance.children && otherInstance.children.includes(instance.id)) {
-          isRoot = false;
-        }
-      });
-      if (isRoot) {
-        const processed = processInstance(instance, instance._batchId, instanceMap);
-        rootInstances.push(processed);
-      }
-    });
-  }else{
-    // 处理根实例
-    node.forEach(instance => {
-      const processed = processInstance(instance, instance._batchId, {}, 0, isFlatNode);
-      rootInstances.push(processed);
-    });
-  }
-  return rootInstances
-}
-// 生成默认node节点
-function generateNode(mesh) {
-  let nodes = [];
-  mesh.forEach(item => {
-    if (item.primitives.length) {
-      let tempNode = {
-        id: item.id,
-        _batchId: item.id,
-        name: item.id,
-        mesh: item.id,
-        matrix: {},
-        nodeType: 3,
-      };
-      nodes.push(tempNode);
-    }
-  });
-
-  return nodes;
-}
-
-export { parseData, parseNode, processMeshData, processNodeData };
+import * as THREE from 'three';
+
+const NODE_TYPES = {
+  pbsGrp: 1,
+  major: 2,
+  model: 3,
+};
+
+  // 处理mesh数据，生成drawObjs
+function processMeshData(input, options) {
+  const drawObjMap = new Map();
+
+  if (!input.mesh) {
+    return [];
+  }
+
+  input.mesh.forEach(meshItem => {
+    const geomList = [];
+    meshItem.primitives.forEach(primitive => {
+      const primitiveData = input.primitive.find(g => g.id === primitive.prmid);
+      if (primitiveData) {
+        const material = input.material?.find(m => m.id === primitiveData.material);
+        const prop = {
+          color: material?.color || [255, 255, 255, 1],
+          fontsize: material?.fontsize !== undefined ? material?.fontsize : 20,
+          frontname: material?.frontname !== undefined ? material?.frontname : '',
+          italic: material?.italic,
+          linepacing: 1, // 默认值
+          linewidth: material?.linewidth !== undefined ? material?.linewidth : 1, // 默认值
+          visible: material?.visible === false ? false : true,
+          transparent: material?.transp !== undefined ? material?.transp : 0,
+        };
+
+        const identity = new THREE.Matrix4().identity();
+
+        geomList.push({
+          matrix: {
+            val: primitive.matrix?.length ? primitive.matrix : identity.elements,
+            // val: identity.elements,
+          },
+          // originMatrix: meshItem.id == primitive.prmid ? [] : identity.elements,
+          prmid: primitive.prmid,
+          geomId: primitiveData.id,
+          type: primitiveData.geomType,
+          text: primitiveData.geomText,
+          points: primitiveData.position,
+          alignType: primitiveData.alignType,
+          normals: primitiveData.normal,
+          triangles: primitiveData.indices || [],
+          max: primitiveData.max,
+          min: primitiveData.min,
+          prop: prop,
+        });
+      }
+    });
+
+    drawObjMap.set(meshItem.id, {
+      drawObjId: meshItem.id,
+      geoms: geomList,
+      // lodLevel: meshItem.type || 2,
+    });
+  });
+
+  return Array.from(drawObjMap.values());
+}
+
+// 处理node数据，生成instances
+function processNodeData(input, options) {
+  const flatNode = options?.flatNode;
+
+  function flattenAndComputeWorldMatrices(
+    nodes,
+    result = [],
+    // parentWorldMatrix = null,
+    fatherId = ''
+  ) {
+    for (const node of nodes) {
+      const { category, instanceId, matrix, children, drawObject, groupId, nodeType } = node;
+
+      // 构造本地矩阵
+      let localMatrix;
+      if (matrix && matrix.val) {
+        localMatrix = new THREE.Matrix4().fromArray(matrix.val);
+      } else {
+        localMatrix = new THREE.Matrix4().identity(); // 默认为单位矩阵
+      }
+
+      // 计算世界矩阵
+      // const worldMatrix = parentWorldMatrix
+      //   ? parentWorldMatrix.clone().multiply(localMatrix)
+      //   : localMatrix.clone();
+      const worldMatrix = localMatrix.clone();
+
+      // 构造输出节点
+      result.push({
+        drawObject,
+        category,
+        instanceId,
+        // matrix,
+        matrix: {
+          val: Array.from(worldMatrix.toArray()),
+        },
+        fatherId,
+        groupId,
+        nodeType,
+      });
+
+      // 递归处理子节点，传递当前世界矩阵
+      if (children) {
+        flattenAndComputeWorldMatrices(children, result, instanceId);
+      }
+    }
+
+    return result;
+  }
+
+  if(!flatNode){
+    const formatInstances = [];
+    const preNode = input.node ? input.node : generateNode(input.mesh);
+    const rootInstances = parseNode(preNode);
+    flattenAndComputeWorldMatrices(rootInstances, formatInstances);
+
+    return formatInstances
+  }else{
+    return parseNode(input.node, flatNode);
+  }
+}
+
+// 处理一个primitive，生成多个drawObj
+function processOnePrimtiveToMultiMesh(primitive){
+  return {
+    instanceId: primitive.drawObjId, // 实例与drawObj一对多关系
+    drawObject: primitive.geoms[0]?.prmid || '',
+    matrix: primitive.geoms[0]?.matrix || [],
+  }
+}
+
+// 主解析函数，整合两个独立模块的结果
+function parseData(input, options) {
+  const drawObjs = processMeshData(input, options);
+  const instances = drawObjs.map((item) => {
+    return processOnePrimtiveToMultiMesh(item); // 实例与drawObj一对多关系
+  })
+  // const instances = drawObjs.map((item) => {
+  //   return {
+  //     instanceId: item.drawObjId, // 实例与drawObj一对一关系
+  //     drawObject: item.drawObjId,
+  //   }
+  // })
+  // const instances = processNodeData(input);
+
+  const map = {
+    drawObjs,
+    instances,
+  };
+  // console.log('parseData', map);
+  return map;
+}
+
+// 递归处理节点实例
+function parseNode(node, isFlatNode) {
+  function processInstance(instance, parentInstanceId, instanceMap, groupId, isFlatNode) {
+    const newInstance = {
+      category: instance.category || instance.name,
+      drawObject: instance.drawObject || instance.mesh,
+      fatherId: parentInstanceId || '',
+      instanceId: instance.id || instance.batchId,
+      matrix: instance.matrix,
+      children: [],
+      nodeType: instance.nodeType,
+      groupId: instance.nodeType === NODE_TYPES.pbsGrp ? instance._batchId : groupId,
+    };
+
+    if(!isFlatNode){
+      // 处理子实例
+      if (instance.children && instance.children.length > 0) {
+        instance.children.forEach(childId => {
+          const childInstance = instanceMap.get(childId);
+          if (childInstance) {
+            const processedChild = processInstance(
+              childInstance,
+              instance._batchId,
+              instanceMap,
+              newInstance.groupId
+            );
+            newInstance.children.push(processedChild);
+          }
+        });
+      }
+    }
+
+    return newInstance;
+  }
+
+  const rootInstances = [];
+  // 创建实例映射
+  if(!isFlatNode){
+    const instanceMap = new Map();
+    node.forEach(instance => {
+      instanceMap.set(instance.id, instance);
+    });
+
+    // 处理根实例
+    instanceMap.forEach(instance => {
+      let isRoot = true;
+      instanceMap.forEach(otherInstance => {
+        if (otherInstance.children && otherInstance.children.includes(instance.id)) {
+          isRoot = false;
+        }
+      });
+      if (isRoot) {
+        const processed = processInstance(instance, instance._batchId, instanceMap);
+        rootInstances.push(processed);
+      }
+    });
+  }else{
+    // 处理根实例
+    node.forEach(instance => {
+      const processed = processInstance(instance, instance._batchId, {}, 0, isFlatNode);
+      rootInstances.push(processed);
+    });
+  }
+  return rootInstances
+}
+// 生成默认node节点
+function generateNode(mesh) {
+  let nodes = [];
+  mesh.forEach(item => {
+    if (item.primitives.length) {
+      let tempNode = {
+        id: item.id,
+        _batchId: item.id,
+        name: item.id,
+        mesh: item.id,
+        matrix: {},
+        nodeType: 3,
+      };
+      nodes.push(tempNode);
+    }
+  });
+
+  return nodes;
+}
+
+export { parseData, parseNode, processMeshData, processNodeData };

package/src/utils/threejs/measure-angle.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 MeasureAngle = function (renderer, scene, camera, width, height) {
   this.renderer = renderer;
@@ -56,13 +57,29 @@ MeasureAngle.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;
   },
@@ -75,9 +92,16 @@ MeasureAngle.prototype = {
     return sphere;
   },
   createLine(p1, p2, config = { color: 0xff0000 }) {
-    const lineMaterial = new THREE.LineBasicMaterial({ color: config.color, linewidth: 10 });
+    const lineMaterial = new THREE.LineBasicMaterial({
+      color: config.color,
+      linewidth: 10,
+      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;
   },
@@ -91,8 +115,9 @@ MeasureAngle.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);
@@ -160,8 +185,13 @@ MeasureAngle.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 {
@@ -190,8 +220,8 @@ MeasureAngle.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;
@@ -240,8 +270,15 @@ MeasureAngle.prototype = {
   },
   createCurve(points) {
     const geom = new THREE.BufferGeometry().setFromPoints(points);
-    const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
+    const material = new THREE.LineBasicMaterial({
+      color: 0xff0000,
+      linewidth: 20,
+      depthTest: false,
+      depthWrite: false,
+      transparent: true,
+    });
     _this.curveLine = new THREE.Line(geom, material);
+    _this.curveLine.renderOrder = 999;
     _this.curveLine.frustumCulled = false;
     _this.curves.push(_this.curveLine);
     _this.scene.add(_this.curveLine);