fl-web-component 1.2.3 → 1.2.5

package/README.md

@@ -46,35 +46,39 @@ Vue.use(FlWebComponent)
 欢迎贡献代码和问题反馈。
 
 ## 更新日志
-- 2025-06-11 1.2.3
+- 1.2.5 2025-06-17
+1. 修改remoAll方法不生效问题
+- 1.2.4 2025-06-12
+1. 优化图形绘制效果
+- 1.2.3 2025-06-11 
 1. 修改相机定位
-- 2025-06-09 1.2.2
+- 1.2.2 2025-06-09 
 1. 优化图形绘制效果
 2. 调整业务端交互模型时的位置偏差
 3. 图纸模型新增点击、高亮、重置高亮等api，三维图形新增、获取中心点、计算实体大小等接口
-- 2025-06-03 1.2.1
+- 1.2.1 2025-06-03 
 1. 修复模型拾取问题
-- 2025-05-30 1.2.0
+- 1.2.0 2025-05-30
 1. 图纸模型新增点击、高亮、重置高亮等api
 2. 三维图形新增、获取中心点、计算实体大小等接口
-- 2025-05-28 1.1.11
+- 1.1.11 2025-05-28
 1. 调整视椎体可视范围
-- 2025-05-27 1.1.10
+- 1.1.10 2025-05-27
 1. 支持更改模型透明度
-- 2025-05-26 1.1.9
+- 1.1.9 2025-05-26 
 1. 修复pid组件问题
 2. 修复instance-parser解析问题
-- 2025-05-22 1.1.7
+- 1.1.7 2025-05-22 
 1. 修复发版时递归发版的报错
-- 2025-05-22 1.1.0
+- 1.1.0 2025-05-22 
 1. 新增FLPerControl,FlSvg组件
 2. 新增功能方法，详细参考文档
-- 2025-05-16 1.0.12
+- 1.0.12 2025-05-16 
 1. flcanvas组件更新
-- 2025-05-15 1.0.11
+- 1.0.11 2025-05-15 
 1. 去除依赖方解析包，现在业务使用方无需配置解析器
 2. 去除umd产物，提高打包速度
 3. 优化打包产物，大幅减少产物体积
 4. 优化打包产物为兼容语法
-- 2025-05-12 1.0.0 
+- 1.0.0 2025-05-12 
 1. 初始版本发布

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

@@ -762,6 +762,17 @@ exports.Easings = {
   }
 };
 
+/***/ }),
+
+/***/ "0ccb":
+/***/ (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_0134be08_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("cdf6");
+/* 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_0134be08_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_0134be08_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "0ff5":
@@ -8984,13 +8995,6 @@ exports.Sepia = Sepia;
 
 /***/ }),
 
-/***/ "7c10":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
 /***/ "7cc1":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -24933,6 +24937,13 @@ module.exports = g;
 
 /***/ }),
 
+/***/ "cdf6":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
 /***/ "cf29":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -28216,17 +28227,6 @@ Animation.animations = [];
 Animation.animIdCounter = 0;
 Animation.animRunning = false;
 
-/***/ }),
-
-/***/ "effe":
-/***/ (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_581c5bb4_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("7c10");
-/* 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_581c5bb4_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_581c5bb4_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "f0b4":
@@ -29241,8 +29241,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":"1b0b8642-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=581c5bb4&scoped=true
-var com_graphicsvue_type_template_id_581c5bb4_scoped_true_render = function render() {
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0cfbbe05-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=0134be08&scoped=true
+var com_graphicsvue_type_template_id_0134be08_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -29253,7 +29253,7 @@ var com_graphicsvue_type_template_id_581c5bb4_scoped_true_render = function rend
 };
 var staticRenderFns = [];
 
-// CONCATENATED MODULE: ./packages/components/com-graphics/index.vue?vue&type=template&id=581c5bb4&scoped=true
+// CONCATENATED MODULE: ./packages/components/com-graphics/index.vue?vue&type=template&id=0134be08&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)); }
@@ -57188,6 +57188,10 @@ function parseData(input) {
           linewidth: (material === null || material === void 0 ? void 0 : material.linewidth) !== undefined ? material === null || material === void 0 ? void 0 : material.linewidth : 1 // 默认值
         };
         geomList.push({
+          matrix: {
+            val: primitive.matrix
+          },
+          prmid: primitive.prmid,
           geomId: primitiveData.id,
           type: primitiveData.geomType,
           text: primitiveData.geomText,
@@ -57211,7 +57215,7 @@ function parseData(input) {
     drawObjs: Array.from(drawObjMap.values()),
     instances: formatInstances
   };
-  // console.log('parseData', map);
+  console.log('parseData', map);
   return map;
 }
 
@@ -59463,12 +59467,17 @@ function handleInstancedMeshModel(instances, drawObjs, type, scene, customColor,
               var _item$matrix;
               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;
               var matrixVal = (_item$matrix = item.matrix) === null || _item$matrix === void 0 ? void 0 : _item$matrix.val;
               if (matrixVal) {
                 var m4 = new Matrix4();
+                var meshMatrix = new Matrix4();
+                var geomMatrix = new 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);
                 var copyMatrix = new Matrix4().copy(m4);
                 model.userData.copyMatrix = copyMatrix;
@@ -59489,8 +59498,8 @@ function handleInstancedMeshModel(instances, drawObjs, type, scene, customColor,
   for (var _i = 0; _i < instances.length; _i++) {
     _loop(_i);
   }
-  // console.log('modelGroup', modelGroup);
-  // console.log('drawObjMapInstance', drawObjMapInstance);
+  console.log('modelGroup', modelGroup);
+  console.log('drawObjMapInstance', drawObjMapInstance);
   return modelGroup;
   // timeRender();
   // console.log('scene', scene)
@@ -59671,8 +59680,9 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
   };
   customMaterial && Object.assign(customMaterial, materialOptions);
   material = customMaterial || new MeshStandardMaterial(instance_parser_objectSpread(instance_parser_objectSpread({}, materialOptions), {}, {
-    roughness: 0.8,
-    envMapIntensity: 0.5 // 调低环境贴图的强度
+    roughness: 0.6,
+    metalness: 0.5,
+    envMapIntensity: 1 // 调低环境贴图的强度
     // wireframe: true
   }));
 
@@ -61124,7 +61134,7 @@ var guiParams = {
       com_graphicsvue_type_script_lang_js_renderer.autoClearStencil = false;
     },
     initScene: function initScene() {
-      com_graphicsvue_type_script_lang_js_modelGroup = new this.THREE.Group();
+      // modelGroup = new this.THREE.Group();
       com_graphicsvue_type_script_lang_js_scene = new this.THREE.Scene();
     },
     initCamera: function initCamera() {
@@ -61172,6 +61182,7 @@ var guiParams = {
         instances = _parseData.instances,
         drawObjs = _parseData.drawObjs;
       if (instances.length > 0) {
+        com_graphicsvue_type_script_lang_js_modelGroup = new this.THREE.Group();
         com_graphicsvue_type_script_lang_js_modelGroup = handleInstancedMeshModel(instances, drawObjs, '', com_graphicsvue_type_script_lang_js_scene, color, meshNameConfig);
         var modelBox3 = new this.THREE.Box3();
         modelBox3.expandByObject(com_graphicsvue_type_script_lang_js_modelGroup);
@@ -61583,28 +61594,39 @@ var guiParams = {
     },
     // 删除场景中所有的实体
     removeAll: function removeAll() {
-      var _this5 = this;
       if (com_graphicsvue_type_script_lang_js_scene) {
-        com_graphicsvue_type_script_lang_js_scene.traverse(function (item) {
-          item.material && item.material.dispose();
-          item.geometry && item.geometry.dispose();
-          if (item instanceof _this5.THREE.Mesh) {
+        this.removeTraverse();
+      }
+    },
+    removeTraverse: function removeTraverse() {
+      var length = com_graphicsvue_type_script_lang_js_modelGroup.children.length;
+      if (length > 0) {
+        var list = com_graphicsvue_type_script_lang_js_modelGroup.children[0];
+        list.traverse(function (item) {
+          if (item.isMesh) {
+            item.material.dispose();
+            item.geometry.dispose();
             item.clear();
+            com_graphicsvue_type_script_lang_js_modelGroup.remove(item);
           }
+        });
+        com_graphicsvue_type_script_lang_js_modelGroup.remove(list);
+        this.removeTraverse();
+      } else {
+        // 在这里清除一些标记之类的
+        com_graphicsvue_type_script_lang_js_scene.traverse(function (item) {
           com_graphicsvue_type_script_lang_js_scene.remove(item);
         });
-        com_graphicsvue_type_script_lang_js_scene.clear();
+        com_graphicsvue_type_script_lang_js_scene.remove(com_graphicsvue_type_script_lang_js_modelGroup);
+        com_graphicsvue_type_script_lang_js_renderer.clear();
+        com_graphicsvue_type_script_lang_js_modelGroup = null;
       }
     },
     // 销毁场景 释放内存
     destroyScene: function destroyScene() {
       cancelAnimationFrame(animateId);
       if (com_graphicsvue_type_script_lang_js_scene) {
-        com_graphicsvue_type_script_lang_js_scene.traverse(function (child) {
-          child.material && child.material.dispose();
-          child.geometry && child.geometry.dispose();
-          child = null;
-        });
+        this.removeTraverse();
         com_graphicsvue_type_script_lang_js_scene.clear();
         com_graphicsvue_type_script_lang_js_scene = null;
       }
@@ -61625,11 +61647,11 @@ var guiParams = {
       }
     */
     drawCurve: function drawCurve(params) {
-      var _this6 = this;
+      var _this5 = this;
       this.removeObjectByName(params.name);
       var route = [];
       params.path.forEach(function (element) {
-        route.push(new _this6.THREE.Vector3(element.x, element.y, element.z));
+        route.push(new _this5.THREE.Vector3(element.x, element.y, element.z));
       });
       if (route.length > 1) {
         com_graphicsvue_type_script_lang_js_curve = new this.THREE.CatmullRomCurve3(route);
@@ -61653,11 +61675,11 @@ var guiParams = {
       }
     */
     drawTextureCurve: function drawTextureCurve(params) {
-      var _this7 = this;
+      var _this6 = this;
       this.removeObjectByName(params.name);
       var route = [];
       params.path.forEach(function (element) {
-        route.push(new _this7.THREE.Vector3(element.x, element.y, element.z));
+        route.push(new _this6.THREE.Vector3(element.x, element.y, element.z));
       });
       // 画曲线
       if (route.length > 1) {
@@ -61759,13 +61781,13 @@ var guiParams = {
      * 参数val: 爆炸的值
      */
     globalBomb: function globalBomb(val) {
-      var _this8 = this;
+      var _this7 = this;
       if (com_graphicsvue_type_script_lang_js_scene.children.length === 0) return;
       for (var i = 0; i < com_graphicsvue_type_script_lang_js_scene.children.length; i++) {
         com_graphicsvue_type_script_lang_js_scene.children[i].traverse(function (item) {
           if (!item.isMesh || !item.worldDir) return;
           // 爆炸公式
-          _this8.computedBomb(item, val);
+          _this7.computedBomb(item, val);
         });
       }
       // this.timeRender();
@@ -61932,7 +61954,7 @@ var guiParams = {
     },
     // 页面是否锁定
     initPointerLock: function initPointerLock() {
-      var _this9 = this;
+      var _this8 = this;
       this.home();
       setTimeout(function () {
         pointControls = new PointerLockControls(com_graphicsvue_type_script_lang_js_camera, com_graphicsvue_type_script_lang_js_renderer.domElement);
@@ -61940,10 +61962,10 @@ var guiParams = {
         // 锁定
         pointControls.addEventListener('lock', function () {
           cameraControls.enabled = false;
-          window.addEventListener('keydown', _this9.onKeyDown, false);
-          window.addEventListener('keyup', _this9.onKeyUp, false);
-          com_graphicsvue_type_script_lang_js_renderer.domElement.removeEventListener('mouseup', _this9.mouseClick, false);
-          com_graphicsvue_type_script_lang_js_renderer.domElement.removeEventListener('mousedown', _this9.mouseDown, false);
+          window.addEventListener('keydown', _this8.onKeyDown, false);
+          window.addEventListener('keyup', _this8.onKeyUp, false);
+          com_graphicsvue_type_script_lang_js_renderer.domElement.removeEventListener('mouseup', _this8.mouseClick, false);
+          com_graphicsvue_type_script_lang_js_renderer.domElement.removeEventListener('mousedown', _this8.mouseDown, false);
         });
         // 解锁
         pointControls.addEventListener('unlock', function () {
@@ -61953,10 +61975,10 @@ var guiParams = {
           cameraControls.reset(true);
           cameraControls.update(0);
           setTimeout(function () {
-            window.removeEventListener('keydown', _this9.onKeyDown);
-            window.removeEventListener('keyup', _this9.onKeyUp);
-            com_graphicsvue_type_script_lang_js_renderer.domElement.addEventListener('mouseup', _this9.mouseClick, false);
-            com_graphicsvue_type_script_lang_js_renderer.domElement.addEventListener('mousedown', _this9.mouseDown, false);
+            window.removeEventListener('keydown', _this8.onKeyDown);
+            window.removeEventListener('keyup', _this8.onKeyUp);
+            com_graphicsvue_type_script_lang_js_renderer.domElement.addEventListener('mouseup', _this8.mouseClick, false);
+            com_graphicsvue_type_script_lang_js_renderer.domElement.addEventListener('mousedown', _this8.mouseDown, false);
             // this.timeRender()
           }, 0);
         });
@@ -62159,11 +62181,11 @@ var guiParams = {
       参数: object, 目标实体,
     */
     isolate: function isolate(object) {
-      var _this0 = this;
+      var _this9 = this;
       // 隔离 将目标实体以外的实体隐藏掉
       com_graphicsvue_type_script_lang_js_scene.traverse(function (item) {
         if (item.isMesh && item.name !== object.name) {
-          var offsetMatrix = new _this0.THREE.Matrix4().copy(item.userData.copyMatrix).makeTranslation(9999999, 9999999, 9999999);
+          var offsetMatrix = new _this9.THREE.Matrix4().copy(item.userData.copyMatrix).makeTranslation(9999999, 9999999, 9999999);
           item.setMatrixAt(item.userData.instanceIndex, offsetMatrix);
           item.instanceMatrix.needsUpdate = true;
         }
@@ -62171,7 +62193,7 @@ var guiParams = {
     },
     // 还原操作 将修改过的实体进行恢复
     restore: function restore() {
-      var _this1 = this;
+      var _this0 = this;
       com_graphicsvue_type_script_lang_js_scene.traverse(function (item) {
         if (item.isMesh) {
           item.setColorAt(item.userData.instanceIndex, item.material.userData.nColor);
@@ -62191,14 +62213,14 @@ var guiParams = {
             item.userData.translateMatrixInvert = null;
           }
           if (item.userData.combineMatrixInvert) {
-            _this1.rotateMesh(item, {
+            _this0.rotateMesh(item, {
               x: 0,
               y: 0,
               z: 0
             });
             item.userData.combineMatrixInvert = null;
           }
-          var offsetMatrix = new _this1.THREE.Matrix4().copy(item.userData.copyMatrix);
+          var offsetMatrix = new _this0.THREE.Matrix4().copy(item.userData.copyMatrix);
           item.setMatrixAt(item.userData.instanceIndex, offsetMatrix);
           item.instanceMatrix.needsUpdate = true;
         }
@@ -62206,7 +62228,7 @@ var guiParams = {
     },
     //  添加自定义模型, 暂时只支持glb、gltf格式
     addCustomModel: function addCustomModel(name, position, url) {
-      var _this10 = this;
+      var _this1 = this;
       var scale = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
       var immediately = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
       var callback = arguments.length > 5 ? arguments[5] : undefined;
@@ -62224,9 +62246,9 @@ var guiParams = {
         locationModel.userData.cull = false;
         locationModel.name = name;
         com_graphicsvue_type_script_lang_js_scene.add(locationModel);
-        locationModel.position.copy(new _this10.THREE.Vector3(position.x, position.y, position.z));
+        locationModel.position.copy(new _this1.THREE.Vector3(position.x, position.y, position.z));
         if (gltf.animations.length > 0) {
-          var actionMixer = new _this10.THREE.AnimationMixer(gltf.scene);
+          var actionMixer = new _this1.THREE.AnimationMixer(gltf.scene);
           var walkActive = actionMixer.clipAction(gltf.animations[0]);
           walkActive.play();
           modelActive.push(walkActive);
@@ -62237,7 +62259,7 @@ var guiParams = {
     },
     // 删除添加的自定义模型
     removeCustomModel: function removeCustomModel(name) {
-      var _this11 = this;
+      var _this10 = this;
       var obj = this.getObjectByName(name);
       obj.forEach(function (item, index) {
         if (item.animations > 0) {
@@ -62246,7 +62268,7 @@ var guiParams = {
           modelActions[index].uncacheRoot(modelActive[index]);
         }
         item.traverse(function (child) {
-          if (child instanceof _this11.THREE.Mesh) {
+          if (child instanceof _this10.THREE.Mesh) {
             child.geometry.dispose();
             child.material.dispose();
           }
@@ -62331,8 +62353,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=581c5bb4&prod&lang=scss&scoped=true
-var com_graphicsvue_type_style_index_0_id_581c5bb4_prod_lang_scss_scoped_true = __webpack_require__("effe");
+// EXTERNAL MODULE: ./packages/components/com-graphics/index.vue?vue&type=style&index=0&id=0134be08&prod&lang=scss&scoped=true
+var com_graphicsvue_type_style_index_0_id_0134be08_prod_lang_scss_scoped_true = __webpack_require__("0ccb");
 
 // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -62443,17 +62465,17 @@ function normalizeComponent(
 
 var component = normalizeComponent(
   components_com_graphicsvue_type_script_lang_js,
-  com_graphicsvue_type_template_id_581c5bb4_scoped_true_render,
+  com_graphicsvue_type_template_id_0134be08_scoped_true_render,
   staticRenderFns,
   false,
   null,
-  "581c5bb4",
+  "0134be08",
   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":"1b0b8642-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=1eba8e28&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0cfbbe05-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=1eba8e28&scoped=true
 var com_flcanvasvue_type_template_id_1eba8e28_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -65652,7 +65674,7 @@ var com_flcanvas_component = normalizeComponent(
 )
 
 /* 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":"1b0b8642-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":"0cfbbe05-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;
@@ -65760,7 +65782,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":"1b0b8642-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=0ec35ee4&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0cfbbe05-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=0ec35ee4&scoped=true
 var pidvue_type_template_id_0ec35ee4_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;

package/dist/fl-web-component.css

@@ -1 +1 @@
-@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%}
+@charset "UTF-8";#fl-model[data-v-0134be08],#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.3",
+  "version": "1.2.5",
   "scripts": {
     "tip1": "仅调试本组件不涉及业务组件,请执行dev",
     "dev": "vue-cli-service serve",

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

@@ -168,7 +168,7 @@
         renderer.autoClearStencil = false;
       },
       initScene() {
-        modelGroup = new this.THREE.Group();
+        // modelGroup = new this.THREE.Group();
         scene = new this.THREE.Scene();
       },
       initCamera() {
@@ -216,6 +216,7 @@
         }
         const { instances, drawObjs } = parseData(data);
         if (instances.length > 0) {
+          modelGroup = new this.THREE.Group();
           modelGroup = handleInstancedMeshModel(
             instances,
             drawObjs,
@@ -669,26 +670,39 @@
       // 删除场景中所有的实体
       removeAll() {
         if (scene) {
-          scene.traverse(item => {
-            item.material && item.material.dispose();
-            item.geometry && item.geometry.dispose();
-            if (item instanceof this.THREE.Mesh) {
+          this.removeTraverse()
+        }
+      },
+      removeTraverse() {
+        let length = modelGroup.children.length
+        if (length > 0) {
+          let list = modelGroup.children[0]
+          list.traverse(item => {
+            if (item.isMesh) {
+              item.material.dispose();
+              item.geometry.dispose();
               item.clear();
+              modelGroup.remove(item);
             }
-            scene.remove(item);
           });
-          scene.clear();
+          modelGroup.remove(list);
+          this.removeTraverse();
+        } else {
+          // 在这里清除一些标记之类的
+          scene.traverse(item => {
+            scene.remove(item)
+          })
+          scene.remove(modelGroup);
+          renderer.clear();
+          modelGroup = null
         }
+
       },
       // 销毁场景 释放内存
       destroyScene() {
         cancelAnimationFrame(animateId);
         if (scene) {
-          scene.traverse(child => {
-            child.material && child.material.dispose();
-            child.geometry && child.geometry.dispose();
-            child = null;
-          });
+          this.removeTraverse();
           scene.clear();
           scene = null;
         }

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
     });