fl-web-component 1.2.2 → 1.2.4

package/dist/fl-web-component.css

@@ -1 +1 @@
-@charset "UTF-8";#fl-model[data-v-3d926f5d],#konva-container[data-v-2733ad2c]{width:100%;height:100%;cursor:pointer}#konva-container[data-v-2733ad2c]{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-09d5c9d8]{cursor:pointer;height:100%;width:100%}
+@charset "UTF-8";#fl-model[data-v-581c5bb4],#konva-container[data-v-1eba8e28]{width:100%;height:100%;cursor:pointer}#konva-container[data-v-1eba8e28]{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.2",
+  "version": "1.2.4",
   "scripts": {
     "tip1": "仅调试本组件不涉及业务组件,请执行dev",
     "dev": "vue-cli-service serve",
@@ -11,7 +11,7 @@
     "build": "npm run lint && vue-cli-service build --target lib --name fl-web-component --formats commonjs ./src/main.js",
     "build:test": "vue-cli-service build --target lib --name fl-web-component --formats commonjs ./src/main.js",
     "publish:base": "npm run build && npm publish",
-    "tip3": "发版注意: 小版本执行publish:fix,中版本执行publish:feat,大版本执行publish:perf",
+    "tip3": "发版注意: 【修改bug执行publish:fix】【新增功能执行publish:feat】【新特性执行publish:perf】",
     "publish:fix": "npm version patch && npm run publish:base",
     "publish:feat": "npm version minor && npm run publish:base",
     "publish:perf": "npm version major && npm run publish:base"

package/packages/components/com-flcanvas/components/entityFormatting.js

@@ -67,6 +67,8 @@ export function centering(obj, container, konvaStage, scaleBy) {
       } else if (target[0].className === "Line") {
         const p = getAbsolutePoints(target[0].getPoints());
         computedCenter(p.x, p.y, container, konvaStage, scaleBy)
+      } else {
+        computedCenter(target[0].px, target[0].py, container, konvaStage, scaleBy)
       }
     }
   } else {
@@ -76,6 +78,8 @@ export function centering(obj, container, konvaStage, scaleBy) {
     } else if (target[0].className === "Line") {
       const p = getAbsolutePoints(target[0].getPoints());
       computedCenter(p.x, p.y, container, konvaStage, scaleBy)
+    } else {
+      computedCenter(target[0].px, target[0].py, container, konvaStage, scaleBy)
     }
   }
 }

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

@@ -212,6 +212,8 @@ var preTarget = [];
                       context.moveTo(x1, -parseFloat(y1));
                       context.lineTo(x2, -parseFloat(y2));
                     }
+                    shape.px = entity.x1
+                    shape.py = -entity.y1
                   }
                   if (entity.type === 'polyline') {
                     let flag = false;
@@ -237,6 +239,8 @@ var preTarget = [];
                         }
                       }
                     }
+                    shape.px = points[0]
+                    shape.py = points[1]
                   }
                 }
                 // context.closePath();
@@ -273,7 +277,9 @@ var preTarget = [];
         // });
         konvaStage.setX(x);
         konvaStage.setY(y); // 750
-        this.$emit('loaded')
+        setTimeout(() => {
+          this.$emit('loaded')
+        }, 100)
       },
       toPdf(name) {
         // get data URL with default settings

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

@@ -26,6 +26,7 @@
     outlineComposer,
     renderTarget,
     sceneClock,
+    mat4
   ] = (function* (v) {
     while (true) yield v;
   })(null);
@@ -100,6 +101,8 @@
     },
     created() {
       CameraControls.install({ THREE: this.THREE });
+      mat4 = new this.THREE.Matrix4();
+      mat4.makeRotationX(-Math.PI / 2);
       fpsClock = new this.THREE.Clock();
       raycaster = new this.THREE.Raycaster();
       sceneClock = new this.THREE.Clock();
@@ -228,9 +231,8 @@
             .multiplyScalar(0.5);
           scene.add(modelGroup);
           // 适配客户端的坐标系，threejs坐标需绕x轴旋转90度
-          const mat4 = new this.THREE.Matrix4();
-          mat4.makeRotationX(-Math.PI / 2);
           modelGroup.applyMatrix4(mat4);
+          modelGroup.updateMatrixWorld();
           modelGroup.traverse(child => {
             if (child.isMesh) {
               const json = this.getMeshCenterAndVolume(child);
@@ -519,10 +521,9 @@
           if (obj.isGroup) {
             this.setModelCenter(obj);
           } else if (obj.isMesh) {
-            let box = this.getSize(obj)
-            let center = this.getCenter(obj)
-            this.locateByCenterBox(center, box)
-            // this.setModelCenter(obj.parent);
+            let center = this.getCenter(obj);
+            let size = this.getSize(obj);
+            this.locateByCenterBox(center, size)
           }
         }
       },
@@ -587,9 +588,17 @@
         center: {x: 0, y: 0, z: 0},
         box: {x: 0, y: 0, z: 0}
       */
-      locateByCenterBox(center, box) {
-        let cameraCenter = new this.THREE.Vector3(center.x, center.y, center.z).addScalar(
-          Math.max(box.x, box.y, box.z)
+      locateByCenterBox(center, size) {
+        let maxDim = Math.max(size.x, size.y, size.z);
+        let fov = camera.fov * (Math.PI / 180);
+        let distance = Math.min(
+          maxDim * 100, // 最大距离限制
+          Math.abs((maxDim * 1.0) / Math.sin(fov / 2))
+        );
+        let direction = new this.THREE.Vector3(1, 1, 1).normalize();
+        let p = (new this.THREE.Vector3().copy(center)).add(direction.multiplyScalar(distance));
+        let cameraCenter = new this.THREE.Vector3(p.x, p.y, p.z).addScalar(
+          Math.max(size.x, size.y, size.z)
         );
         cameraControls.setLookAt(
           cameraCenter.x,
@@ -614,10 +623,6 @@
         const divLabel = new CSS2DObject(data.billboard);
         divLabel.name = data.labelClass; // 这个是用来清除广告牌用的
         divLabel.position.set(data.x, data.y, data.z);
-        // 由于场景做了翻转 所以要把它翻转回来
-        // const mat4 = new this.THREE.Matrix4();
-        // mat4.makeRotationX(Math.PI / 2);
-        // divLabel.applyMatrix4(mat4);
         scene.add(divLabel);
         return divLabel;
       },
@@ -1426,8 +1431,6 @@
         let center = new this.THREE.Vector3();
         obj.boundingBox.getCenter(center);
         if (obj.userData.is3D) {
-          const mat4 = new this.THREE.Matrix4();
-          mat4.makeRotationX(-Math.PI / 2);
           center.applyMatrix4(mat4)
         }
         return center;
@@ -1436,8 +1439,6 @@
         let size = new this.THREE.Vector3();
         obj.boundingBox.getSize(size);
         if (obj.userData.is3D) {
-          const mat4 = new this.THREE.Matrix4();
-          mat4.makeRotationX(-Math.PI / 2);
           size.applyMatrix4(mat4)
         }
         return size;

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

@@ -111,7 +111,6 @@
       参数：svgIds: [], 需要高亮的id的集合， flag: true / false, 是否要定位目标元素, color: '', 高亮的颜色
     */
       highLight(svgIds, flag = false, color) {
-        console.log(svgIds)
         if (svgIds === null || svgIds === undefined) {
           throw new Error('svgIds should be an array');
         } else {

package/src/utils/flgltf-parser.js

@@ -112,6 +112,10 @@ function parseData(input) {
         };
 
         geomList.push({
+          matrix: {
+            val: primitive.matrix,
+          },
+          prmid: primitive.prmid,
           geomId: primitiveData.id,
           type: primitiveData.geomType,
           text: primitiveData.geomText,
@@ -138,7 +142,7 @@ function parseData(input) {
     drawObjs: Array.from(drawObjMap.values()),
     instances: formatInstances,
   };
-  // console.log('parseData', map);
+  console.log('parseData', map);
   return map;
 }
 

package/src/utils/instance-parser.js

@@ -86,13 +86,18 @@ function handleInstancedMeshModel(
             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 临时隐藏方案
-                m4.elements = item.matrix.val;
+                meshMatrix.elements = item.matrix.val;
+                geomMatrix.elements = mesh.matrix.val;
+                m4.multiplyMatrices(meshMatrix, geomMatrix);
                 model.setMatrixAt(index, m4);
                 const copyMatrix = new THREE.Matrix4().copy(m4);
                 model.userData.copyMatrix = copyMatrix;
@@ -112,8 +117,8 @@ function handleInstancedMeshModel(
       }
     }
   }
-  // console.log('modelGroup', modelGroup);
-  // console.log('drawObjMapInstance', drawObjMapInstance);
+  console.log('modelGroup', modelGroup);
+  console.log('drawObjMapInstance', drawObjMapInstance);
   return modelGroup;
   // timeRender();
   // console.log('scene', scene)
@@ -318,8 +323,9 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
   material = customMaterial ||
     new THREE.MeshStandardMaterial({
       ...materialOptions,
-      roughness: 0.8,
-      envMapIntensity: 0.5, // 调低环境贴图的强度
+      roughness: 0.6,
+      metalness: 0.5,
+      envMapIntensity: 1, // 调低环境贴图的强度
       // wireframe: true
     });