fl-web-component 1.3.15 → 1.3.17

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

@@ -129,11 +129,17 @@
     //销毁方法
 
     methods: {
+        //思路是计算居中包围盒，然后排除脏数据。
         loadDxf(data){
 
+          /* if(this.layer!=null){
+                      let nodes=this.layer.find(".item");
+                      for(let i=0;i<nodes.length;i++){
+                        nodes[i].destroy();
+                      }
+                    }*/
 
-
-
+          konvaLayer.destroyChildren();
           const parser = new DxfParser();
           let dxf = parser.parse(data);
           let entities = formatEntity(dxf.entities);
@@ -160,6 +166,7 @@
               for(let i = 0; i < group.length;i++) {
                 let entity = group[i];
                 if (entity.type === 'text') {
+
                   if (konvaLayer) konvaLayer.add(entity.obj);
                 }
               }
@@ -282,13 +289,14 @@
         // get data URL with default settings
 
         // open in new window
-        konvaLayer.getCanvas().setPixelRatio(1);
+        konvaLayer.getCanvas().setPixelRatio(2);
         const jpegURL = konvaStage.toDataURL({
           mimeType: 'image/jpeg',
-          quality:1.0
+          quality:1,
+          pixelRatio:2
         });
 
-        let pageData=konvaLayer.canvas.toDataURL('image/jpeg', 1.0);
+        let pageData=konvaLayer.canvas.toDataURL('image/jpeg', 2);
 
 
         let img = new Image();

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

@@ -220,7 +220,7 @@
           color: '' 初始化模型的颜色 在业务方 有这个需求
           meshNameConfig: {}
       */
-      drawModel(data, color = '', meshNameConfig = {}) {
+      drawModel(data, color = '', meshNameConfig = {}, options = {}) {
         if (Object.keys(data).length === 0) {
           return;
         }
@@ -282,6 +282,9 @@
           this.$emit('modelLoaded');
           // cameraControls.saveState();
         }
+
+        // 动态设置视角滚轮的距离
+        this.setCameraConfig();
       },
       // 获取mesh的中心点
       getMeshCenterAndVolume(mesh) {
@@ -1563,6 +1566,19 @@
         left && (cameraControls.mouseButtons.left = ACTION_ENUM[left]);
         right && (cameraControls.mouseButtons.right = ACTION_ENUM[right]);
       },
+      // 动态设置视角滚轮的距离
+      setCameraConfig() {
+        let box3 = new this.THREE.Box3().setFromObject(scene);
+        let size = new this.THREE.Vector3();
+        box3.getSize(size);
+        const maxBorder = Math.max(size.x, size.y, size.z);
+
+        cameraControls.camera.far = maxBorder * 50; // 设置相机的远裁剪面
+
+        cameraControls.minDistance = maxBorder * 0.05; // 动态设置视角滚轮的距离
+
+        camera.updateProjectionMatrix();
+      },
     },
   };
 </script>

package/src/utils/flgltf-parser.js

@@ -69,7 +69,8 @@ function parseData(input) {
           italic: material?.italic,
           linepacing: 1, // 默认值
           linewidth: material?.linewidth !== undefined ? material?.linewidth : 1, // 默认值
-          visible: material?.visible === false ? false : true
+          visible: material?.visible === false ? false : true,
+          transparent: material?.transp,
         };
 
         const identity = new THREE.Matrix4().identity();
@@ -161,7 +162,8 @@ function parseNode(node) {
       }
     });
     if (isRoot) {
-      const processed = processInstance(instance, instance._batchId, instanceMap);
+      // 根节点父ID应为空字符串
+      const processed = processInstance(instance, '', instanceMap);
       rootInstances.push(processed);
     }
   });

package/src/utils/instance-parser.js

@@ -65,14 +65,16 @@ function handleInstancedMeshModel(
     let targetGroup, instancedMeshIndex, drawObjectName;
     const drawObjInstance = drawObjMapInstance[instances[i].drawObject];
     if (drawObjInstance.MapMesh?.length > 0) {
+      // 确保始终使用当前实例的 drawObject 设置分组名
+      drawObjectName = instances[i].drawObject;
       drawObjInstance.MapInstance.forEach((instance, index) => {
         if (instance.instanceId == instances[i].instanceId) {
           instancedMeshIndex = index;
-          drawObjectName = instances[i].drawObject;
         }
       });
+      // 在 modelGroup 中查找，避免因尚未加入 scene 而重复创建
       if (drawObjectName) {
-        targetGroup = scene.getObjectByName(drawObjectName);
+        targetGroup = modelGroup.getObjectByName(drawObjectName);
       }
       if (!targetGroup) {
         const drawObj = drawObjMapInstance[instances[i].drawObject];
@@ -104,46 +106,48 @@ function handleInstancedMeshModel(
             model.userData[key] = meshNameConfig[key];
             meshName += ':' + meshNameConfig[key];
           }
+          // 一次性为该 drawObject 的所有实例设置矩阵与颜色
           drawObj.MapInstance.forEach((item, index) => {
-            if (item.instanceId == instances[i].instanceId) {
-              model.userData.instanceIndex = index;
-              model.userData.instanceId = instances[i].instanceId;
-              model.userData.primId = mesh.prmid;
-              model.name =
-                meshName !== '' ? instances[i].instanceId + meshName : instances[i].instanceId;
-              const matrixVal = item.matrix?.val;
-              if (matrixVal) {
-                const m4 = new THREE.Matrix4();
-                const meshMatrix = new THREE.Matrix4();
-                const geomMatrix = new THREE.Matrix4();
-                // 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)) {
-                  const positionMatrix = new THREE.Matrix4();
-
-                  const alignMatrix = createAlignedText(alignType, model.geometry);
-
-                  positionMatrix.identity().makeTranslation(points[0], points[1], points[2]);
-                  geomMatrix.multiply(alignMatrix).multiply(positionMatrix);
-                }
-                m4.multiplyMatrices(meshMatrix, geomMatrix);
-
-                model.setMatrixAt(index, m4);
-                const copyMatrix = new THREE.Matrix4().copy(m4);
-                model.userData.copyMatrix = copyMatrix;
+            model.userData.instanceIndex = index;
+            model.userData.instanceId = item.instanceId;
+            model.userData.primId = mesh.prmid;
+            model.name = meshName !== '' ? item.instanceId + meshName : item.instanceId;
+
+            const matrixVal = item.matrix?.val;
+            if (matrixVal) {
+              const m4 = new THREE.Matrix4();
+              const meshMatrix = new THREE.Matrix4();
+              const geomMatrix = new THREE.Matrix4();
+              // 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)) {
+                const positionMatrix = new THREE.Matrix4();
+
+                const alignMatrix = createAlignedText(alignType, model.geometry);
+
+                positionMatrix.identity().makeTranslation(points[0], points[1], points[2]);
+                geomMatrix.multiply(alignMatrix).multiply(positionMatrix);
               }
-              // 需要先设置全部实例颜色，否则后续设置颜色无效
-              const { color } = mesh.prop;
-              const meshColor = customColor
-                ? new THREE.Color(customColor)
-                : new THREE.Color(`rgb(${color[0]}, ${color[1]}, ${color[2]})`);
-              model.setColorAt(index, meshColor);
+              m4.multiplyMatrices(meshMatrix, geomMatrix);
+
+              model.setMatrixAt(index, m4);
+              const copyMatrix = new THREE.Matrix4().copy(m4);
+              model.userData.copyMatrix = copyMatrix;
             }
+            // 需要先设置全部实例颜色，否则后续设置颜色无效
+            const { color } = mesh.prop;
+            const meshColor = customColor
+              ? new THREE.Color(customColor)
+              : new THREE.Color(`rgb(${color[0]}, ${color[1]}, ${color[2]})`);
+            model.setColorAt(index, meshColor);
           });
+          // 标记实例属性更新
+          if (model.instanceMatrix) model.instanceMatrix.needsUpdate = true;
+          if (model.instanceColor) model.instanceColor.needsUpdate = true;
           // model.instanceColor.needsUpdate = true;
           group.add(model);
         });
@@ -343,7 +347,7 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
     const normal = new Float32Array(normals);
     geometry.setAttribute('normal', new THREE.BufferAttribute(normal, 3));
   }
-  const { color } = prop;
+  const { color, transparent } = prop;
   let material, mesh, colors, opacity;
   if (Array.isArray(color) && color.length) {
     colors = color;
@@ -356,6 +360,11 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
     opacity = 1;
   }
 
+  // 处理transparent透明度
+  if (transparent) {
+    opacity = 1 - transparent;
+  }
+
   // 使用自定义材质或创建标准材质（默认参数配置）
   let materialOptions = {
     userData: {
@@ -392,34 +401,34 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
   geometry.setAttribute('opacity', new THREE.InstancedBufferAttribute(opacities, 1));
 
   // 自定义着色器逻辑
-  // if (!customMaterial) {
-  //   material.onBeforeCompile = shader => {
-  //     // 添加顶点着色器输入
-  //     shader.vertexShader = `
-  //         in float opacity; // 实例透明度属性
-  //         out float vAlpha;
-  //         ${shader.vertexShader}
-  //     `.replace(
-  //       '#include <begin_vertex>',
-  //       `
-  //         #include <begin_vertex>
-  //         vAlpha = opacity; // 传递透明度到片段着色器
-  //         `
-  //     );
-
-  //     // 修改片段着色器
-  //     shader.fragmentShader = `
-  //         in float vAlpha;
-  //         ${shader.fragmentShader}
-  //     `.replace(
-  //       '#include <alphatest_fragment>',
-  //       `
-  //         #include <alphatest_fragment>
-  //         diffuseColor.a *= vAlpha; // 应用实例透明度
-  //         `
-  //     );
-  //   };
-  // }
+  if (!customMaterial) {
+    material.onBeforeCompile = shader => {
+      // 添加顶点着色器输入
+      shader.vertexShader = `
+          in float opacity; // 实例透明度属性
+          out float vAlpha;
+          ${shader.vertexShader}
+      `.replace(
+        '#include <begin_vertex>',
+        `
+          #include <begin_vertex>
+          vAlpha = opacity; // 传递透明度到片段着色器
+          `
+      );
+
+      // 修改片段着色器
+      shader.fragmentShader = `
+          in float vAlpha;
+          ${shader.fragmentShader}
+      `.replace(
+        '#include <alphatest_fragment>',
+        `
+          #include <alphatest_fragment>
+          diffuseColor.a *= vAlpha; // 应用实例透明度
+          `
+      );
+    };
+  }
   mesh = new THREE.InstancedMesh(geometry, material, instanceCount);
 
   const { visible } = prop;