fl-web-component 1.2.12 → 1.2.13

package/dist/fl-web-component.css

@@ -1 +1 @@
-@charset "UTF-8";#fl-model[data-v-9d23b864],#konva-container[data-v-4458f11e]{width:100%;height:100%;cursor:pointer}#konva-container[data-v-4458f11e]{z-index:3;overflow:hidden}span[data-v-f547d5c6]{font-weight:bolder}.text[data-v-f547d5c6]{margin-top:20px}.line[data-v-f547d5c6]{border-bottom:1px solid #dcdfe6;margin:20px 0}.center[data-v-f547d5c6]{display:flex;flex-direction:column;align-items:center}.center .cen span[data-v-f547d5c6],.center .top span[data-v-f547d5c6]{color:"#53a8ff";display:inline-block;width:30px;height:30px;text-align:center;line-height:30px;border:1px solid;padding:5px;margin-bottom:10px;background-color:#e9f3ff}.center .cen span[data-v-f547d5c6]{margin:10px}.button[data-v-f547d5c6]{display:flex;justify-content:end;margin-top:20px}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff2?t=1646635700216) format("woff2"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff?t=1646635700216) format("woff"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.ttf?t=1646635700216) format("truetype")}.iconfont[data-v-f547d5c6]{font-family:iconfont!important;font-size:50px;font-style:normal;color:"#53a8ff";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-shubiao[data-v-f547d5c6]:before{content:""}#svg-tigger[data-v-0ec35ee4]{cursor:pointer;height:100%;width:100%}
+@charset "UTF-8";#fl-model[data-v-dee00b62],#konva-container[data-v-4458f11e]{width:100%;height:100%;cursor:pointer}#konva-container[data-v-4458f11e]{z-index:3;overflow:hidden}span[data-v-f547d5c6]{font-weight:bolder}.text[data-v-f547d5c6]{margin-top:20px}.line[data-v-f547d5c6]{border-bottom:1px solid #dcdfe6;margin:20px 0}.center[data-v-f547d5c6]{display:flex;flex-direction:column;align-items:center}.center .cen span[data-v-f547d5c6],.center .top span[data-v-f547d5c6]{color:"#53a8ff";display:inline-block;width:30px;height:30px;text-align:center;line-height:30px;border:1px solid;padding:5px;margin-bottom:10px;background-color:#e9f3ff}.center .cen span[data-v-f547d5c6]{margin:10px}.button[data-v-f547d5c6]{display:flex;justify-content:end;margin-top:20px}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff2?t=1646635700216) format("woff2"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff?t=1646635700216) format("woff"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.ttf?t=1646635700216) format("truetype")}.iconfont[data-v-f547d5c6]{font-family:iconfont!important;font-size:50px;font-style:normal;color:"#53a8ff";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-shubiao[data-v-f547d5c6]:before{content:""}#svg-tigger[data-v-0ec35ee4]{cursor:pointer;height:100%;width:100%}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fl-web-component",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "scripts": {
     "tip1": "仅调试本组件不涉及业务组件,请执行dev",
     "dev": "vue-cli-service serve",

package/packages/components/com-graphics/index.vue

@@ -122,6 +122,7 @@
       this.initControl();
       this.initLight();
       this.initLabelRender();
+      this.exportParmas();
       // 判断是设备是手机还是电脑
       let isMobileDevice = this.isMobileDevice();
       if (isMobileDevice) {
@@ -153,6 +154,8 @@
           antialias: true,
           alpha: true,
           logarithmicDepthBuffer: true,
+          powerPreference: 'high-performance',
+          preserveDrawingBuffer: true, //保留图形缓冲区 TODO 临时截图使用
         });
         renderer.setPixelRatio(window.devicePixelRatio * 2);
         renderer.setSize(window.innerWidth, window.innerHeight);
@@ -162,10 +165,14 @@
         renderer.outputEncoding = this.THREE.sRGBEncoding;
         instructions.appendChild(renderer.domElement);
         renderer.setClearAlpha(0);
-        renderer.autoClear = false;
-        renderer.autoClearColor = false;
-        renderer.autoClearDepth = false;
-        renderer.autoClearStencil = false;
+        
+        // 与校审截图功能冲突，暂时先注释掉
+        // -----------
+        // renderer.autoClear = false; 
+        // renderer.autoClearColor = false;
+        // renderer.autoClearDepth = false;
+        // renderer.autoClearStencil = false;
+        // -----------
       },
       initScene() {
         modelGroup = new this.THREE.Group();
@@ -285,8 +292,13 @@
           box: volume,
         };
       },
-      mouseDown() {
+      mouseDown(event) {
         firstTime = new Date().getTime();
+        let params = {
+          event,
+          firstTime,
+        };
+        this.$emit('leftMouseDown', params);
       },
       mouseClick(event) {
         // 在测量模式下，不进行事件暴露
@@ -1051,7 +1063,10 @@
           });
       },
       // 开启第一视角
-      startFirstPer() {
+      startFirstPer({moveSpeed = 200, jumpSpeed = 200}) {
+        removeSpeed = moveSpeed;
+        upSpeed = jumpSpeed;
+
         clock = new this.THREE.Clock();
         downRaycaster = new this.THREE.Raycaster(
           new this.THREE.Vector3(),
@@ -1486,6 +1501,16 @@
           outlineComposer && outlineComposer.render();
         }
       },
+      // 暴露个别参数让业务自己做特殊业务。
+      // 后续若多个业务有相同使用场景，再抽象至公共组件中。
+      exportParmas(){
+        return {
+          renderer,
+          camera,
+          cameraControls,
+          scene,
+        }
+      }
     },
   };
 </script>

package/src/utils/flgltf-parser.js

@@ -1,31 +1,12 @@
 import * as THREE from 'three';
 
-function parseData(input) {
-  // 辅助函数：递归处理实例
-  function processInstance(instance, parentInstanceId, instanceMap) {
-    const newInstance = {
-      category: instance.category || instance.name,
-      drawObject: instance.drawObject || instance.mesh,
-      fatherId: parentInstanceId || '',
-      instanceId: instance.instanceId || instance._batchId,
-      matrix: instance.matrix,
-      children: [],
-    };
-
-    // 处理子实例
-    if (instance.children && instance.children.length > 0) {
-      instance.children.forEach(childId => {
-        const childInstance = instanceMap.get(childId);
-        if (childInstance) {
-          const processedChild = processInstance(childInstance, instance.instanceId, instanceMap);
-          newInstance.children.push(processedChild);
-        }
-      });
-    }
-
-    return newInstance;
-  }
+const NODE_TYPES = {
+  pbsGrp: 1,
+  major: 2,
+  model: 3,
+};
 
+function parseData(input) {
   function flattenAndComputeWorldMatrices(
     nodes,
     result = [],
@@ -33,7 +14,7 @@ function parseData(input) {
     fatherId = ''
   ) {
     for (const node of nodes) {
-      const { category, instanceId, matrix, children, drawObject } = node;
+      const { category, instanceId, matrix, children, drawObject, groupId, nodeType } = node;
 
       // 构造本地矩阵
       let localMatrix;
@@ -59,40 +40,19 @@ function parseData(input) {
           val: Array.from(worldMatrix.toArray()),
         },
         fatherId,
+        groupId,
+        nodeType,
       });
 
       // 递归处理子节点，传递当前世界矩阵
       if (children) {
-        // flattenAndComputeWorldMatrices(children, result, worldMatrix, instanceId);
         flattenAndComputeWorldMatrices(children, result, instanceId);
-        //   flattenAndComputeWorldMatrices(children, result);
       }
     }
 
     return result;
   }
 
-  // 创建实例映射
-  const instanceMap = new Map();
-  input.node.forEach(instance => {
-    instanceMap.set(instance.id, instance);
-  });
-
-  // 处理根实例
-  const rootInstances = [];
-  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, null, instanceMap);
-      rootInstances.push(processed);
-    }
-  });
-
   // const formateArray = (str) => str?.split(",").map(Number)
   // 处理drawObjs
   const drawObjMap = new Map();
@@ -139,6 +99,7 @@ function parseData(input) {
   });
 
   const formatInstances = [];
+  const rootInstances = parseNode(input.node);
   flattenAndComputeWorldMatrices(rootInstances, formatInstances);
 
   const map = {
@@ -149,4 +110,61 @@ function parseData(input) {
   return map;
 }
 
-export { parseData };
+// 递归处理节点实例
+function parseNode(node) {
+  function processInstance(instance, parentInstanceId, instanceMap, groupId) {
+    const newInstance = {
+      category: instance.category || instance.name,
+      drawObject: instance.drawObject || instance.mesh,
+      fatherId: parentInstanceId || '',
+      instanceId: instance.instanceId || instance._batchId,
+      matrix: instance.matrix,
+      children: [],
+      nodeType: instance.nodeType,
+      groupId: instance.nodeType === NODE_TYPES.pbsGrp ? instance._batchId : groupId,
+    };
+
+    // 处理子实例
+    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 instanceMap = new Map();
+  node.forEach(instance => {
+    instanceMap.set(instance.id, instance);
+  });
+
+  // 处理根实例
+  const rootInstances = [];
+  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);
+    }
+  });
+
+  return rootInstances;
+}
+
+export { parseData, parseNode };

package/src/utils/instance-parser.js

@@ -21,7 +21,7 @@ const GEOM_TYPES = {
 
 // 文本对齐枚举
 const TextAlign = {
-  TextLeftBottom: 0,     // 左下角
+  TextLeftBottom: 0, // 左下角
   TextLeftMiddle: 1,
   TextLeftTop: 2,
   TextCenterBottom: 3,
@@ -29,13 +29,13 @@ const TextAlign = {
   TextCenterTop: 5,
   TextRightBottom: 6,
   TextRightMiddle: 7,
-  TextRightTop: 8,      // 右上角
+  TextRightTop: 8, // 右上角
   TextLeft: 9,
   TextCenter: 10,
   TextRight: 11,
   TextAligned: 12,
   TextMiddle: 13,
-  TextFit: 14
+  TextFit: 14,
 };
 
 let drawObjMapInstance = {};
@@ -85,6 +85,7 @@ function handleInstancedMeshModel(
         // grouphName !== '' ? instances[i].drawObject + grouphName: instances[i].drawObject;
         group.name = instances[i].drawObject;
         group.userData.isInstancedMeshGroup = true;
+        group.userData.category = instances[i].category;
         group.userData.instanceId = instances[i].drawObject;
         const instanceCount = drawObj.MapInstance.length;
         drawObj.MapMesh?.forEach(mesh => {
@@ -118,13 +119,13 @@ function handleInstancedMeshModel(
                 // m4.setPosition(new THREE.Vector3(9999999, 9999999, 9999999)); // TODO 临时隐藏方案
                 meshMatrix.elements = item.matrix.val;
                 geomMatrix.elements = mesh.matrix.val;
-                
+
                 // 处理文本居中对齐
                 const { points, alignType } = mesh;
-                if(isTextType(mesh.type)){
+                if (isTextType(mesh.type)) {
                   const positionMatrix = new THREE.Matrix4();
-                  
-                  const alignMatrix = createAlignedText(alignType, model.geometry)
+
+                  const alignMatrix = createAlignedText(alignType, model.geometry);
 
                   positionMatrix.identity().makeTranslation(points[0], points[1], points[2]);
                   geomMatrix.multiply(alignMatrix).multiply(positionMatrix);
@@ -239,14 +240,15 @@ function drawModel(geom, instanceName, instanceCount, nColor, nOpacity) {
  * @param {number} type - 几何类型枚举值，参考GEOM_TYPES中的定义
  * @returns {boolean} 是否为文本类型（2D/3D 单行或多行文本）
  */
-function isTextType(type){
-    return type == GEOM_TYPES.geom_2d_text ||
+function isTextType(type) {
+  return (
+    type == GEOM_TYPES.geom_2d_text ||
     type == GEOM_TYPES.geom_2d_mtext ||
     type == GEOM_TYPES.geom_3d_text ||
     type == GEOM_TYPES.geom_3d_mtext
+  );
 }
 
-
 /**
  * 绘制曲线
  *
@@ -314,7 +316,14 @@ function drawCurves(geom, instanceName, instanceCount) {
  */
 function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
   // 解构几何数据中的自定义几何体和材质
-  const { geometry: customGeometry, material: customMaterial, triangles, points, normals, prop } = geom;
+  const {
+    geometry: customGeometry,
+    material: customMaterial,
+    triangles,
+    points,
+    normals,
+    prop,
+  } = geom;
   // 使用自定义几何体或创建新的缓冲几何体
   const geometry = customGeometry || new THREE.BufferGeometry();
 
@@ -359,9 +368,10 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
     transparent: true, // 着色器中需要设置透明度
   };
 
-  customMaterial && Object.assign(customMaterial, materialOptions)
+  customMaterial && Object.assign(customMaterial, materialOptions);
 
-  material = customMaterial ||
+  material =
+    customMaterial ||
     new THREE.MeshStandardMaterial({
       ...materialOptions,
       roughness: 0.6,
@@ -522,7 +532,7 @@ function drawText(geom, instanceName, instanceCount) {
 }
 
 /**
- * 
+ *
  * @param {number} align 对齐方式
  * @param {object} geometry 几何体
  * @returns
@@ -531,13 +541,13 @@ function createAlignedText(align = TextAlign.TextLeftBottom, geometry) {
   // 计算几何体包围盒用于对齐计算
   geometry.computeBoundingBox();
   const bbox = geometry.boundingBox;
-  
+
   // 初始化水平和垂直偏移量
   let offsetX = 0;
   let offsetY = 0;
-  
+
   // 水平对齐处理（X轴方向）
-  switch(align) {
+  switch (align) {
     // 左对齐系列（文本左边界对齐原点）
     case TextAlign.TextLeft:
     case TextAlign.TextLeftBottom:
@@ -545,15 +555,15 @@ function createAlignedText(align = TextAlign.TextLeftBottom, geometry) {
     case TextAlign.TextLeftTop:
       offsetX = -bbox.min.x; // 左边界对齐
       break;
-      
-    // 居中对齐系列（文本中心对齐原点）  
+
+    // 居中对齐系列（文本中心对齐原点）
     case TextAlign.TextCenter:
     case TextAlign.TextCenterBottom:
     case TextAlign.TextCenterMiddle:
     case TextAlign.TextCenterTop:
       offsetX = -(bbox.min.x + bbox.max.x) / 2; // 水平居中
       break;
-      
+
     // 右对齐系列（文本右边界对齐原点）
     case TextAlign.TextRight:
     case TextAlign.TextRightBottom:
@@ -562,9 +572,9 @@ function createAlignedText(align = TextAlign.TextLeftBottom, geometry) {
       offsetX = -bbox.max.x; // 右边界对齐
       break;
   }
-  
+
   // 垂直对齐处理（Y轴方向）
-  switch(align) {
+  switch (align) {
     // 垂直居中系列
     case TextAlign.TextMiddle:
     case TextAlign.TextLeftMiddle:
@@ -572,15 +582,15 @@ function createAlignedText(align = TextAlign.TextLeftBottom, geometry) {
     case TextAlign.TextRightMiddle:
       offsetY = -(bbox.min.y + bbox.max.y) / 2; // 垂直居中
       break;
-      
-    // 顶部对齐系列  
+
+    // 顶部对齐系列
     case TextAlign.TextTop:
     case TextAlign.TextLeftTop:
     case TextAlign.TextCenterTop:
     case TextAlign.TextRightTop:
       offsetY = -bbox.max.y; // 顶部对齐
       break;
-      
+
     // 底部对齐系列
     case TextAlign.TextBottom:
     case TextAlign.TextLeftBottom:
@@ -589,13 +599,12 @@ function createAlignedText(align = TextAlign.TextLeftBottom, geometry) {
       offsetY = -bbox.min.y; // 底部对齐
       break;
   }
-  
+
   // 创建对齐变换矩阵
   const alignMatrix = new THREE.Matrix4();
-  alignMatrix.identity().makeTranslation(offsetX, offsetY, 0)
-  
-  return alignMatrix;
-} 
+  alignMatrix.identity().makeTranslation(offsetX, offsetY, 0);
 
+  return alignMatrix;
+}
 
 export { handleInstancedMeshModel };

package/packages/components/button/index.vue

@@ -1,26 +0,0 @@
-<template>
-  <div>
-    <button class="my-button" @click="handleClick">
-      {{ text }}
-    </button>
-  </div>
-</template>
-<script>
-export default {
-  name: 'MyButton',
-  props: {
-    text: { type: String, default: 'Click Me' },
-  },
-  methods: {
-    handleClick() {
-      this.$emit('click');
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.my-button {
-  padding: 8px 16px;
-  background: #42b983;
-}
-</style>