fl-web-component 1.2.0 → 1.2.2

package/README.md

@@ -46,6 +46,12 @@ Vue.use(FlWebComponent)
 欢迎贡献代码和问题反馈。
 
 ## 更新日志
+- 2025-06-09 1.2.2
+1. 优化图形绘制效果
+2. 调整业务端交互模型时的位置偏差
+3. 图纸模型新增点击、高亮、重置高亮等api，三维图形新增、获取中心点、计算实体大小等接口
+- 2025-06-03 1.2.1
+1. 修复模型拾取问题
 - 2025-05-30 1.2.0
 1. 图纸模型新增点击、高亮、重置高亮等api
 2. 三维图形新增、获取中心点、计算实体大小等接口

package/dist/fl-web-component.common.js

@@ -202,6 +202,17 @@ module.exports =
 /************************************************************************/
 /******/ ({
 
+/***/ "0011":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_2733ad2c_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("8122");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_2733ad2c_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_2733ad2c_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
+/***/ }),
+
 /***/ "06f8":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -1170,6 +1181,17 @@ Factory_1.Factory.addGetterSetter(Layer, 'imageSmoothingEnabled', true);
 Factory_1.Factory.addGetterSetter(Layer, 'clearBeforeDraw', true);
 Factory_1.Factory.addGetterSetter(Layer, 'hitGraphEnabled', true, (0, Validators_1.getBooleanValidator)());
 
+/***/ }),
+
+/***/ "106c":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_3d926f5d_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("fdfd");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_3d926f5d_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_3d926f5d_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "122f":
@@ -3331,17 +3353,6 @@ Factory_1.Factory.addGetterSetter(Node_1.Node, 'hue', 0, (0, Validators_1.getNum
 Factory_1.Factory.addGetterSetter(Node_1.Node, 'saturation', 0, (0, Validators_1.getNumberValidator)(), Factory_1.Factory.afterSetFilter);
 Factory_1.Factory.addGetterSetter(Node_1.Node, 'value', 0, (0, Validators_1.getNumberValidator)(), Factory_1.Factory.afterSetFilter);
 
-/***/ }),
-
-/***/ "46ca":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_07e32868_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("92c4");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_07e32868_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_07e32868_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "4971":
@@ -9085,6 +9096,13 @@ module.exports = JSON.parse("{\"glyphs\":{\"0\":{\"x_min\":73,\"x_max\":715,\"ha
 
 /***/ }),
 
+/***/ "8122":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
 /***/ "85b7":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -22286,13 +22304,6 @@ exports.HSL = HSL;
 
 /***/ }),
 
-/***/ "92c4":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
 /***/ "9470":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -23529,17 +23540,6 @@ Factory_1.Factory.backCompat(Sprite, {
   setIndex: 'setFrameIndex'
 });
 
-/***/ }),
-
-/***/ "a988":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_4b99f9dc_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("cfb3");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_4b99f9dc_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_4b99f9dc_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "af55":
@@ -24961,13 +24961,6 @@ exports.Grayscale = Grayscale;
 
 /***/ }),
 
-/***/ "cfb3":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
 /***/ "d488":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -29241,8 +29234,8 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"213d84a7-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/index.vue?vue&type=template&id=07e32868&scoped=true
-var com_graphicsvue_type_template_id_07e32868_scoped_true_render = function render() {
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"7865f371-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/index.vue?vue&type=template&id=3d926f5d&scoped=true
+var com_graphicsvue_type_template_id_3d926f5d_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -29253,7 +29246,7 @@ var com_graphicsvue_type_template_id_07e32868_scoped_true_render = function rend
 };
 var staticRenderFns = [];
 
-// CONCATENATED MODULE: ./packages/components/com-graphics/index.vue?vue&type=template&id=07e32868&scoped=true
+// CONCATENATED MODULE: ./packages/components/com-graphics/index.vue?vue&type=template&id=3d926f5d&scoped=true
 
 // CONCATENATED MODULE: ./node_modules/camera-controls/dist/camera-controls.module.js
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -57090,8 +57083,7 @@ function parseData(input) {
   }
   function flattenAndComputeWorldMatrices(nodes) {
     var result = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-    var parentWorldMatrix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-    var fatherId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+    var fatherId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
     var _iterator = flgltf_parser_createForOfIteratorHelper(nodes),
       _step;
     try {
@@ -57112,7 +57104,10 @@ function parseData(input) {
         }
 
         // 计算世界矩阵
-        var worldMatrix = parentWorldMatrix ? parentWorldMatrix.clone().multiply(localMatrix) : localMatrix.clone();
+        // const worldMatrix = parentWorldMatrix
+        //   ? parentWorldMatrix.clone().multiply(localMatrix)
+        //   : localMatrix.clone();
+        var worldMatrix = localMatrix.clone();
 
         // 构造输出节点
         result.push({
@@ -57128,7 +57123,8 @@ function parseData(input) {
 
         // 递归处理子节点，传递当前世界矩阵
         if (children) {
-          flattenAndComputeWorldMatrices(children, result, worldMatrix, instanceId);
+          // flattenAndComputeWorldMatrices(children, result, worldMatrix, instanceId);
+          flattenAndComputeWorldMatrices(children, result, instanceId);
           //   flattenAndComputeWorldMatrices(children, result);
         }
       }
@@ -59649,7 +59645,7 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
   if (Array.isArray(color) && color.length) {
     colors = color;
     opacity = colors[3];
-  } else if (color) {
+  } else if (typeof color === 'string') {
     colors = color.split(',');
     opacity = colors[3];
   } else {
@@ -59658,17 +59654,20 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
   }
 
   // 使用自定义材质或创建标准材质（默认参数配置）
-  material = customMaterial || new MeshStandardMaterial({
-    roughness: 0.8,
-    envMapIntensity: 0.5,
-    // 调低环境贴图的强度
-    side: DoubleSide,
+  var materialOptions = {
     userData: {
       nColor: nColor ? new Color(nColor) : new Color("rgb(".concat(colors[0], ", ").concat(colors[1], ", ").concat(colors[2], ")")),
       nOpacity: nOpacity ? nOpacity : opacity
     },
+    side: DoubleSide,
     transparent: true // 着色器中需要设置透明度
-  });
+  };
+  customMaterial && Object.assign(customMaterial, materialOptions);
+  material = customMaterial || new MeshStandardMaterial(instance_parser_objectSpread(instance_parser_objectSpread({}, materialOptions), {}, {
+    roughness: 0.8,
+    envMapIntensity: 0.5 // 调低环境贴图的强度
+    // wireframe: true
+  }));
 
   // 为每个实例存储透明度（opacity）
   var opacities = new Float32Array(instanceCount);
@@ -59693,9 +59692,9 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
   }
   mesh = new InstancedMesh(geometry, material, instanceCount);
   mesh.userData.drawObjectId = instanceName;
+  mesh.userData.is3D = geom.type == GEOM_TYPES.geom_3d || geom.type == GEOM_TYPES.geom_3d_obj;
 
   // mesh.material = material;
-
   return mesh;
 }
 
@@ -61119,7 +61118,7 @@ var guiParams = {
       com_graphicsvue_type_script_lang_js_scene = new this.THREE.Scene();
     },
     initCamera: function initCamera() {
-      com_graphicsvue_type_script_lang_js_camera = new this.THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100000);
+      com_graphicsvue_type_script_lang_js_camera = new this.THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000000000);
       com_graphicsvue_type_script_lang_js_camera.position.set(0, 100, 150);
     },
     initControl: function initControl() {
@@ -61201,9 +61200,9 @@ var guiParams = {
             child.userData.modelWorldPs = modelWorldPs;
           }
         });
-        // this.compileShader();
         // cameraControls.fitToSphere(scene, true); // TODO 待处理，先用 setModelCenter 进行定位
         this.setModelCenter(com_graphicsvue_type_script_lang_js_modelGroup);
+        this.$emit('modelLoaded');
         // cameraControls.saveState();
       }
     },
@@ -61219,21 +61218,6 @@ var guiParams = {
         box: volume
       };
     },
-    compileShader: function compileShader() {
-      com_graphicsvue_type_script_lang_js_scene.traverse(function (child) {
-        if (child.isMesh) {
-          child.material.onBeforeCompile = function (shader) {
-            var vertexShader = "\n                precision lowp float;\n                attribute float visible;\n                varying float vVisible;\n                void main() {\n                  vVisible = visible;\n              ";
-            var fragmentShader = "\n                precision lowp float;\n                varying float vVisible;\n                void main() {\n              ";
-            var fragColor = "\n                #include <dithering_fragment>\n                if (vVisible > 0.0) {\n                  gl_FragColor = vec4(outgoingLight, diffuseColor.a);\n                } else {\n                  discard;\n                }\n              ";
-            shader.vertexShader = shader.vertexShader.replace('void main() {', vertexShader);
-            shader.fragmentShader = shader.fragmentShader.replace('void main() {', fragmentShader);
-            shader.fragmentShader = shader.fragmentShader.replace('#include <dithering_fragment>', fragColor);
-            child.material.transparent = true;
-          };
-        }
-      });
-    },
     mouseDown: function mouseDown() {
       firstTime = new Date().getTime();
     },
@@ -61242,8 +61226,15 @@ var guiParams = {
       if (!measureFlag) {
         lastTime = new Date().getTime();
         if (lastTime - firstTime < 300) {
-          com_graphicsvue_type_script_lang_js_mouse.x = event.clientX / instructions.offsetWidth * 2 - 1;
-          com_graphicsvue_type_script_lang_js_mouse.y = -(event.clientY / instructions.offsetHeight) * 2 + 1;
+          // 获取元素在页面中的偏移位置
+          var rect = com_graphicsvue_type_script_lang_js_renderer.domElement.getBoundingClientRect();
+          var x = event.clientX - rect.left;
+          var y = event.clientY - rect.top;
+
+          // mouse.x = (event.clientX / instructions.offsetWidth) * 2 - 1;
+          // mouse.y = -(event.clientY / instructions.offsetHeight) * 2 + 1;
+          com_graphicsvue_type_script_lang_js_mouse.x = x / rect.width * 2 - 1;
+          com_graphicsvue_type_script_lang_js_mouse.y = -(y / rect.height) * 2 + 1;
           com_graphicsvue_type_script_lang_js_raycaster.setFromCamera(com_graphicsvue_type_script_lang_js_mouse, com_graphicsvue_type_script_lang_js_camera);
           var intersects = com_graphicsvue_type_script_lang_js_raycaster.intersectObjects(com_graphicsvue_type_script_lang_js_scene.children, true);
           var params = {};
@@ -61457,7 +61448,10 @@ var guiParams = {
         if (obj.isGroup) {
           this.setModelCenter(obj);
         } else if (obj.isMesh) {
-          this.setModelCenter(obj.parent);
+          var box = this.getSize(obj);
+          var center = this.getCenter(obj);
+          this.locateByCenterBox(center, box);
+          // this.setModelCenter(obj.parent);
         }
       }
     },
@@ -62284,20 +62278,23 @@ var guiParams = {
     },
     // 获取中心点
     getCenter: function getCenter(obj) {
-      console.log(obj);
       var center = new this.THREE.Vector3();
       obj.boundingBox.getCenter(center);
-      var mat4 = new this.THREE.Matrix4();
-      mat4.makeRotationX(-Math.PI / 2);
-      center.applyMatrix4(mat4);
+      if (obj.userData.is3D) {
+        var mat4 = new this.THREE.Matrix4();
+        mat4.makeRotationX(-Math.PI / 2);
+        center.applyMatrix4(mat4);
+      }
       return center;
     },
     getSize: function getSize(obj) {
       var size = new this.THREE.Vector3();
       obj.boundingBox.getSize(size);
-      var mat4 = new this.THREE.Matrix4();
-      mat4.makeRotationX(-Math.PI / 2);
-      size.applyMatrix4(mat4);
+      if (obj.userData.is3D) {
+        var mat4 = new this.THREE.Matrix4();
+        mat4.makeRotationX(-Math.PI / 2);
+        size.applyMatrix4(mat4);
+      }
       return size;
     },
     animate: function animate() {
@@ -62327,8 +62324,8 @@ var guiParams = {
 });
 // CONCATENATED MODULE: ./packages/components/com-graphics/index.vue?vue&type=script&lang=js
  /* harmony default export */ var components_com_graphicsvue_type_script_lang_js = (com_graphicsvue_type_script_lang_js); 
-// EXTERNAL MODULE: ./packages/components/com-graphics/index.vue?vue&type=style&index=0&id=07e32868&prod&lang=scss&scoped=true
-var com_graphicsvue_type_style_index_0_id_07e32868_prod_lang_scss_scoped_true = __webpack_require__("46ca");
+// EXTERNAL MODULE: ./packages/components/com-graphics/index.vue?vue&type=style&index=0&id=3d926f5d&prod&lang=scss&scoped=true
+var com_graphicsvue_type_style_index_0_id_3d926f5d_prod_lang_scss_scoped_true = __webpack_require__("106c");
 
 // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -62439,18 +62436,18 @@ function normalizeComponent(
 
 var component = normalizeComponent(
   components_com_graphicsvue_type_script_lang_js,
-  com_graphicsvue_type_template_id_07e32868_scoped_true_render,
+  com_graphicsvue_type_template_id_3d926f5d_scoped_true_render,
   staticRenderFns,
   false,
   null,
-  "07e32868",
+  "3d926f5d",
   null
   
 )
 
 /* harmony default export */ var com_graphics = (component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"213d84a7-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-flcanvas/index.vue?vue&type=template&id=4b99f9dc&scoped=true
-var com_flcanvasvue_type_template_id_4b99f9dc_scoped_true_render = function render() {
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"7865f371-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-flcanvas/index.vue?vue&type=template&id=2733ad2c&scoped=true
+var com_flcanvasvue_type_template_id_2733ad2c_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -62463,9 +62460,9 @@ var com_flcanvasvue_type_template_id_4b99f9dc_scoped_true_render = function rend
     }
   });
 };
-var com_flcanvasvue_type_template_id_4b99f9dc_scoped_true_staticRenderFns = [];
+var com_flcanvasvue_type_template_id_2733ad2c_scoped_true_staticRenderFns = [];
 
-// CONCATENATED MODULE: ./packages/components/com-flcanvas/index.vue?vue&type=template&id=4b99f9dc&scoped=true
+// CONCATENATED MODULE: ./packages/components/com-flcanvas/index.vue?vue&type=template&id=2733ad2c&scoped=true
 
 // EXTERNAL MODULE: ./node_modules/konva/lib/index.js
 var lib = __webpack_require__("362d");
@@ -65296,7 +65293,6 @@ var konvaStage = null,
     var _this = this;
     //resize方法
     window.addEventListener('resize', function () {
-      console.log('resize');
       if (konvaStage) {
         var obj = document.getElementById('konva-container');
         konvaStage.setWidth(obj.clientWidth);
@@ -65305,8 +65301,6 @@ var konvaStage = null,
       }
     });
     this.$nextTick(function () {
-      console.log(document.getElementById('konva-container'));
-      console.log(_this.$refs.svgDraw);
       konvaStage = new lib_default.a.Stage({
         className: 'stage',
         container: 'konva-container',
@@ -65365,7 +65359,6 @@ var konvaStage = null,
         position = null;
         if (e.target.attrs.hasOwnProperty("className") && e.target.attrs.className === "stage") {
           var obj = _this.getIntersects(inspectionRect.getClientRect());
-          console.log(obj);
           clickObj = obj.length > 0 ? obj[obj.length - 1] : null;
         } else {
           clickObj = e.target.attrs;
@@ -65605,6 +65598,11 @@ var konvaStage = null,
         obj = null;
       }
     },
+    resize: function resize(width, height) {
+      konvaStage.setWidth(width);
+      konvaStage.setHeight(height);
+      konvaStage._resizeDOM();
+    },
     beforeDestroy: function beforeDestroy() {
       this.clearCache();
     }
@@ -65612,8 +65610,8 @@ var konvaStage = null,
 });
 // CONCATENATED MODULE: ./packages/components/com-flcanvas/index.vue?vue&type=script&lang=js
  /* harmony default export */ var components_com_flcanvasvue_type_script_lang_js = (com_flcanvasvue_type_script_lang_js); 
-// EXTERNAL MODULE: ./packages/components/com-flcanvas/index.vue?vue&type=style&index=0&id=4b99f9dc&prod&lang=scss&scoped=true
-var com_flcanvasvue_type_style_index_0_id_4b99f9dc_prod_lang_scss_scoped_true = __webpack_require__("a988");
+// EXTERNAL MODULE: ./packages/components/com-flcanvas/index.vue?vue&type=style&index=0&id=2733ad2c&prod&lang=scss&scoped=true
+var com_flcanvasvue_type_style_index_0_id_2733ad2c_prod_lang_scss_scoped_true = __webpack_require__("0011");
 
 // CONCATENATED MODULE: ./packages/components/com-flcanvas/index.vue
 
@@ -65626,17 +65624,17 @@ var com_flcanvasvue_type_style_index_0_id_4b99f9dc_prod_lang_scss_scoped_true =
 
 var com_flcanvas_component = normalizeComponent(
   components_com_flcanvasvue_type_script_lang_js,
-  com_flcanvasvue_type_template_id_4b99f9dc_scoped_true_render,
-  com_flcanvasvue_type_template_id_4b99f9dc_scoped_true_staticRenderFns,
+  com_flcanvasvue_type_template_id_2733ad2c_scoped_true_render,
+  com_flcanvasvue_type_template_id_2733ad2c_scoped_true_staticRenderFns,
   false,
   null,
-  "4b99f9dc",
+  "2733ad2c",
   null
   
 )
 
 /* harmony default export */ var com_flcanvas = (com_flcanvas_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"213d84a7-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/per-control.vue?vue&type=template&id=f547d5c6&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"7865f371-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/per-control.vue?vue&type=template&id=f547d5c6&scoped=true
 var per_controlvue_type_template_id_f547d5c6_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -65744,7 +65742,7 @@ var per_control_component = normalizeComponent(
 )
 
 /* harmony default export */ var per_control = (per_control_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"213d84a7-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/pid.vue?vue&type=template&id=09d5c9d8&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"7865f371-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/pid.vue?vue&type=template&id=09d5c9d8&scoped=true
 var pidvue_type_template_id_09d5c9d8_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -66681,6 +66679,13 @@ exports.Konva = _CoreInternals_1.Konva.Util._assign(_CoreInternals_1.Konva, {
   }
 });
 
+/***/ }),
+
+/***/ "fdfd":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
 /***/ })
 
 /******/ });

package/dist/fl-web-component.css

@@ -1 +1 @@
-@charset "UTF-8";#fl-model[data-v-07e32868],#konva-container[data-v-4b99f9dc]{width:100%;height:100%;cursor:pointer}#konva-container[data-v-4b99f9dc]{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-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%}

package/package.json

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

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

@@ -51,7 +51,6 @@ var preTarget = [];
     mounted() {
       //resize方法
       window.addEventListener('resize', () => {
-        console.log('resize');
         if (konvaStage) {
           const obj = document.getElementById('konva-container');
           konvaStage.setWidth(obj.clientWidth);
@@ -61,8 +60,6 @@ var preTarget = [];
       });
 
       this.$nextTick(() => {
-        console.log(document.getElementById('konva-container'));
-        console.log(this.$refs.svgDraw);
         konvaStage = new Konva.Stage({
           className: 'stage',
           container: 'konva-container',
@@ -121,7 +118,6 @@ var preTarget = [];
             e.target.attrs.className === "stage"
           ) {
             let obj = this.getIntersects(inspectionRect.getClientRect());
-            console.log(obj);
             clickObj = obj.length > 0 ? obj[obj.length - 1] : null;
           } else {
             clickObj = e.target.attrs;
@@ -385,6 +381,11 @@ var preTarget = [];
           obj = null;
         }
       },
+      resize(width, height) {
+        konvaStage.setWidth(width);
+        konvaStage.setHeight(height);
+        konvaStage._resizeDOM();
+      },
       beforeDestroy() {
         this.clearCache();
       },

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

@@ -173,7 +173,7 @@
           45,
           window.innerWidth / window.innerHeight,
           0.1,
-          100000
+          1000000000
         );
         camera.position.set(0, 100, 150);
       },
@@ -264,9 +264,9 @@
               child.userData.modelWorldPs = modelWorldPs;
             }
           });
-          // this.compileShader();
           // cameraControls.fitToSphere(scene, true); // TODO 待处理，先用 setModelCenter 进行定位
           this.setModelCenter(modelGroup);
+          this.$emit('modelLoaded')
           // cameraControls.saveState();
         }
       },
@@ -282,44 +282,6 @@
           box: volume,
         };
       },
-      compileShader() {
-        scene.traverse(child => {
-          if (child.isMesh) {
-            child.material.onBeforeCompile = shader => {
-              const vertexShader = `
-                precision lowp float;
-                attribute float visible;
-                varying float vVisible;
-                void main() {
-                  vVisible = visible;
-              `;
-              const fragmentShader = `
-                precision lowp float;
-                varying float vVisible;
-                void main() {
-              `;
-              const fragColor = `
-                #include <dithering_fragment>
-                if (vVisible > 0.0) {
-                  gl_FragColor = vec4(outgoingLight, diffuseColor.a);
-                } else {
-                  discard;
-                }
-              `;
-              shader.vertexShader = shader.vertexShader.replace('void main() {', vertexShader);
-              shader.fragmentShader = shader.fragmentShader.replace(
-                'void main() {',
-                fragmentShader
-              );
-              shader.fragmentShader = shader.fragmentShader.replace(
-                '#include <dithering_fragment>',
-                fragColor
-              );
-              child.material.transparent = true;
-            };
-          }
-        });
-      },
       mouseDown() {
         firstTime = new Date().getTime();
       },
@@ -328,8 +290,15 @@
         if (!measureFlag) {
           lastTime = new Date().getTime();
           if (lastTime - firstTime < 300) {
-            mouse.x = (event.clientX / instructions.offsetWidth) * 2 - 1;
-            mouse.y = -(event.clientY / instructions.offsetHeight) * 2 + 1;
+            // 获取元素在页面中的偏移位置
+            const rect = renderer.domElement.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+
+            // mouse.x = (event.clientX / instructions.offsetWidth) * 2 - 1;
+            // mouse.y = -(event.clientY / instructions.offsetHeight) * 2 + 1;
+            mouse.x = (x / rect.width) * 2 - 1;
+            mouse.y = -(y / rect.height) * 2 + 1;
             raycaster.setFromCamera(mouse, camera);
             const intersects = raycaster.intersectObjects(scene.children, true);
             let params = {};
@@ -550,7 +519,10 @@
           if (obj.isGroup) {
             this.setModelCenter(obj);
           } else if (obj.isMesh) {
-            this.setModelCenter(obj.parent);
+            let box = this.getSize(obj)
+            let center = this.getCenter(obj)
+            this.locateByCenterBox(center, box)
+            // this.setModelCenter(obj.parent);
           }
         }
       },
@@ -1451,20 +1423,23 @@
       },
       // 获取中心点
       getCenter(obj) {
-        console.log(obj)
         let center = new this.THREE.Vector3();
         obj.boundingBox.getCenter(center);
-        const mat4 = new this.THREE.Matrix4();
-        mat4.makeRotationX(-Math.PI / 2);
-        center.applyMatrix4(mat4)
+        if (obj.userData.is3D) {
+          const mat4 = new this.THREE.Matrix4();
+          mat4.makeRotationX(-Math.PI / 2);
+          center.applyMatrix4(mat4)
+        }
         return center;
       },
       getSize(obj) {
         let size = new this.THREE.Vector3();
         obj.boundingBox.getSize(size);
-        const mat4 = new this.THREE.Matrix4();
-        mat4.makeRotationX(-Math.PI / 2);
-        size.applyMatrix4(mat4)
+        if (obj.userData.is3D) {
+          const mat4 = new this.THREE.Matrix4();
+          mat4.makeRotationX(-Math.PI / 2);
+          size.applyMatrix4(mat4)
+        }
         return size;
       },
       animate() {