fl-web-component 1.0.12 → 1.1.2

package/dist/fl-web-component.css

@@ -1 +1 @@
-@charset "UTF-8";#fl-model[data-v-6e37e043],#konva-container[data-v-300b3063]{width:100%;height:100%;cursor:pointer}#konva-container[data-v-300b3063]{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:""}
+@charset "UTF-8";#fl-model[data-v-574500c1],#konva-container[data-v-300b3063]{width:100%;height:100%;cursor:pointer}#konva-container[data-v-300b3063]{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-51e374ea]{cursor:pointer;height:100%;width:100%}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fl-web-component",
-  "version": "1.0.12",
+  "version": "1.1.2",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint \"{src,packages}/**/*.{vue,js}\" --fix",
@@ -8,7 +8,8 @@
     "watch": "vue-cli-service build --watch --mode production --target lib --name fl-web-component --formats commonjs ./src/main.js",
     "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": "npm run build && npm publish"
+    "publish": "npm version patch && npm run build && npm publish",
+    "publish1": "npm version patch && npm run build"
   },
   "files": [
     "dist",
@@ -28,6 +29,7 @@
     "lodash": "^4.17.21",
     "meshline": "^3.3.1",
     "regenerator-runtime": "^0.14.1",
+    "svg-pan-zoom": "^3.6.2",
     "three": "^0.176.0",
     "three.path": "^1.0.1",
     "vue": "^2.6.11"

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

@@ -21,7 +21,7 @@
     threeMeasure,
     modelGroup,
     gui,
-    animateId 
+    animateId, scenePass, outlineComposer, renderTarget, sceneClock
   ] = (function* (v) {
     while (true) yield v;
   })(null);
@@ -29,6 +29,7 @@
   var [lastTime, firstTime, fpsClock, timeStamp, progress] = (function* (v) {
     while (true) yield v;
   })(0);
+  var singleFrameTime = 1 / 30;
 
   var [
     roaming,
@@ -47,7 +48,7 @@
     while (true) yield v;
   })(true);
 
-  var clippingMesh = [];
+  var clippingMesh = [], modelActive = [], modelActions = []
   var removeSpeed = 200,
     upSpeed = 200; //控制器移动速度 , //控制跳起时的速度
   var roamConfig = {
@@ -66,13 +67,18 @@
   import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
   import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer';
   import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js';
+  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
   import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
   import MeasureDistance from '@/utils/threejs/measure-distance.js';
   import MeasureArea from '@/utils/threejs/measure-area.js';
   import MeasureAngle from '@/utils/threejs/measure-angle.js';
   import { parseData } from '@/utils/flgltf-parser';
   import { handleInstancedMeshModel } from '@/utils/instance-parser';
-
+  import { RainShader } from '@/utils/threejs/rain-shader.js';
+  import { SnowShader } from '@/utils/threejs/snow-shader.js';
+  import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
+  import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
+  import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
   export default {
     name: 'FlModel',
     props: {
@@ -91,7 +97,14 @@
       CameraControls.install({ THREE: this.THREE });
       fpsClock = new this.THREE.Clock();
       raycaster = new this.THREE.Raycaster();
+      sceneClock = new this.THREE.Clock();
       mouse = new this.THREE.Vector2();
+      renderTarget = new this.THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {
+        minFilter: this.THREE.LinearFilter,
+        magFilter: this.THREE.LinearFilter,
+        format: this.THREE.RGBAFormat,
+        stencilBuffer: true
+      })
     },
     mounted() {
       instructions = document.getElementById('fl-model');
@@ -119,6 +132,7 @@
         // 暂时注释这句 还有worker里面的 这跟渲染出的模型浅或暗有关系
         renderer.outputEncoding = this.THREE.sRGBEncoding;
         instructions.appendChild(renderer.domElement);
+        renderer.setClearAlpha(0);
         renderer.autoClear = false;
         renderer.autoClearColor = false;
         renderer.autoClearDepth = false;
@@ -127,12 +141,6 @@
       initScene() {
         modelGroup = new this.THREE.Group();
         scene = new this.THREE.Scene();
-        // scene.userData.recordEntity = []
-
-        // 适配客户端的坐标系，threejs坐标需绕x轴旋转90度
-        const mat4 = new this.THREE.Matrix4();
-        mat4.makeRotationX(-Math.PI / 2);
-        scene.applyMatrix4(mat4);
       },
       initCamera() {
         camera = new this.THREE.PerspectiveCamera(
@@ -161,7 +169,7 @@
       // 初始化文字画布
       initLabelRender() {
         labelRenderer = new CSS2DRenderer();
-        labelRenderer.setSize(instructions.offsetWidth, instructions.offsetHeight);
+        labelRenderer.setSize(window.innerWidth, window.innerHeight);
         labelRenderer.domElement.style.position = 'absolute';
         labelRenderer.domElement.style.top = '0px';
         labelRenderer.domElement.style.pointerEvents = 'none';
@@ -184,6 +192,10 @@
           modelBox3.expandByObject(modelGroup);
           let modelWorldPs = new this.THREE.Vector3().addVectors(modelBox3.max, modelBox3.min).multiplyScalar(0.5)
           scene.add(modelGroup);
+          // 适配客户端的坐标系，threejs坐标需绕x轴旋转90度
+          const mat4 = new this.THREE.Matrix4();
+          mat4.makeRotationX(-Math.PI / 2);
+          modelGroup.applyMatrix4(mat4);
           modelGroup.traverse(child => {
             if (child.isMesh) {
               const json = this.getMeshCenterAndVolume(child)
@@ -422,31 +434,18 @@
           // obj.material.needsUpdate = true;
         }
       },
-      // 修改整个场景中模型实体的属性
-      /*
-        {
-          attr: '', 需要修改属性名（color、visible(true / false)、opacity(0-1),
-          value: , 需要修改成的值
-        }
-      */
-      updateWholeProperty(params) {
+      // 恢复模型原来的状态
+      updateWholeProperty() {
         if (scene) {
           scene.traverse(obj => {
             if (obj instanceof this.THREE.Mesh) {
-              switch (params.attr) {
-                case 'color':
-                  obj.setColorAt(obj.userData.instanceIndex, new this.THREE.Color(params.value));
-                  obj.instanceColor.needsUpdate = true;
-                  break;
-                case 'visible':
-                  obj.material.visible = params.value;
-                  break;
-                case 'opacity':
-                  obj.material.opacity = params.value;
-                  obj.material.transparent = true;
-                  break;
-              }
-              obj.material.needsUpdate = true;
+              // 恢复颜色
+              obj.setColorAt(obj.userData.instanceIndex, obj.material.userData.nColor)
+              obj.instanceColor.needsUpdate = true
+              // 修改可见性
+              const restoreMatrix = new this.THREE.Matrix4().copy(obj.userData.copyMatrix);
+              obj.setMatrixAt(index, restoreMatrix);
+              obj.instanceMatrix.needsUpdate = true;
             }
           });
         }
@@ -488,7 +487,11 @@
         let obj = scene.getObjectByName(name);
         if (obj) {
           // cameraControls.fitToSphere(obj.parent, true); // TODO 待处理，先用 setModelCenter 进行定位
-          this.setModelCenter(obj.parent);
+          if (obj.isGroup) {
+            this.setModelCenter(obj);
+          } else if (obj.isMesh) {
+            this.setModelCenter(obj.parent);
+          }
           // cameraControls.fitToBox( obj, true);
         }
       },
@@ -545,6 +548,23 @@
         );
         cameraControls.update(0);
       },
+      // 使用中心点和实体的长宽高进行定位
+      /*
+        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)));
+        cameraControls.setLookAt(
+          cameraCenter.x,
+          cameraCenter.y,
+          cameraCenter.z,
+          center.x,
+          center.y,
+          center.z,
+          true
+        )
+      },
       // 添加广告牌
       /*
         参数：
@@ -558,6 +578,10 @@
         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;
       },
@@ -593,14 +617,12 @@
       removeObjectByName(name) {
         let array = this.getObjectByName(name);
         array.forEach(item => {
-          if (item.name === name) {
-            item.material && item.material.dispose();
-            item.geometry && item.geometry.dispose();
-            if (item.isMesh) {
-              item.clear();
-            }
-            scene.remove(item);
+          item.material && item.material.dispose();
+          item.geometry && item.geometry.dispose();
+          if (item.isMesh) {
+            item.clear();
           }
+          scene.remove(item);
         });
       },
       // 删除场景中所有的实体
@@ -721,7 +743,6 @@
           path: params.path,
         });
         roaming = true
-        // clock = new this.THREE.Clock();
       },
       // 更新漫游的配置
       /*
@@ -752,6 +773,7 @@
           lineTexture.offset.x -= 0.05;
           // 相机和控制器的偏移
           let offset = 10 / curve.getLength();
+          // progress 取值范围为0~1。getPoint(0)表示曲线起点，getPoint(1)表示曲线终点
           if (progress <= 1 - offset) {
             // this.timeRender()
             const point = curve.getPointAt(progress);
@@ -790,11 +812,11 @@
       // 单个实体模型炸开
       /*
         参数:
-          id: '',当前选中的实体对象的id
+          name: '',当前选中的实体对象的id
           value: 0 - 100 整数
       */
-      localBomb(id, value) {
-        let target = scene.getObjectById(id);
+      localBomb(name, value) {
+        let target = scene.getObjectByName(name);
         if (target) {
           this.computedBomb(target, value);
         }
@@ -1033,13 +1055,11 @@
             control.position.y = 3 - 0 / 10;
             canJump = true;
           }
-          // this.timeRender()
         }
       },
       // 键盘监听事件
       onKeyDown(event) {
         if (!event.keyCode) return;
-        // this.timeRender()
         switch (event.keyCode) {
           // 前进
           case 38:
@@ -1213,22 +1233,15 @@
       },
       // 隔离
       /*
-        参数: object, 目标实体, params: {attr: 'visible/opacity', value: '(true/false)/(0-1)' 需要修改成的值},
+        参数: object, 目标实体,
       */
-      isolate(object, params) {
-        // 隔离 将目标实体以外的实体半透明掉或者隐藏掉
+      isolate(object) {
+        // 隔离 将目标实体以外的实体隐藏掉
         scene.traverse(item => {
           if (item.isMesh && item.name !== object.name) {
-            switch (params.attr) {
-              case 'visible':
-                object.material.visible = params.value;
-                break;
-              case 'opacity':
-                object.material.opacity = params.value;
-                object.material.transparent = true;
-                break;
-            }
-            item.material.needsUpdate = true;
+            const offsetMatrix = new this.THREE.Matrix4().copy(item.userData.copyMatrix).makeTranslation(9999999, 9999999, 9999999);
+            item.setMatrixAt(item.userData.instanceIndex, offsetMatrix);
+            item.instanceMatrix.needsUpdate = true;
           }
         });
       },
@@ -1236,11 +1249,8 @@
       restore() {
         scene.traverse(item => {
           if (item.isMesh) {
-            item.material.opacity = 1.0;
-            item.material.visible = true;
-            item.material.transparent = true;
-            item.material.color = item.material.userData.nColor;
-            item.material.needsUpdate = true;
+            item.setColorAt(item.userData.instanceIndex, item.material.userData.nColor);
+            item.instanceColor.needsUpdate = true;
             item.userData.translate = {
               x: 0,
               y: 0,
@@ -1263,18 +1273,112 @@
               });
               item.userData.combineMatrixInvert = null;
             }
+            const offsetMatrix = new this.THREE.Matrix4().copy(item.userData.copyMatrix);
+            item.setMatrixAt(item.userData.instanceIndex, offsetMatrix);
+            item.instanceMatrix.needsUpdate = true;
           }
         });
       },
+      //  添加自定义模型, 暂时只支持glb、gltf格式
+      addCustomModel(name, position, url, scale, immediately = false, callback) {
+        const loader = new GLTFLoader()
+        let locationModel = null;
+        loader.load(url, (gltf) => {
+          locationModel = gltf.scene
+          locationModel.scale.set(scale, scale, scale)
+          locationModel.updateMatrixWorld()
+          if (immediately) {
+            cameraControls.fitToSphere(gltf.scene, true)
+          }
+          // 动画混合器
+          // 不参与裁剪
+          locationModel.userData.cull = false;
+          locationModel.name = name;
+          scene.add(locationModel)
+          locationModel.position.copy(new this.THREE.Vector3(position.x, position.y, position.z))
+          if (gltf.animations.length > 0) {
+            let actionMixer = new this.THREE.AnimationMixer(gltf.scene);
+            const walkActive = actionMixer.clipAction(gltf.animations[0])
+            walkActive.play()
+            modelActive.push(walkActive);
+            modelActions.push(actionMixer);
+          }
+          callback && callback()
+        })
+      },
+      // 删除添加的自定义模型
+      removeCustomModel(name) {
+        let obj = this.getObjectByName(name);
+        obj.forEach((item, index) => {
+          if (item.animations > 0) {
+            item.removeFromParent();
+            modelActions[index].uncacheRoot(item);
+            modelActions[index].uncacheRoot(modelActive[index]);
+          }
+          item.traverse((child) => {
+            if (child instanceof this.THREE.Mesh) {
+              child.geometry.dispose()
+              child.material.dispose()
+            }
+          })
+          scene.remove(item);
+        })
+        modelActions.splice(0);
+        modelActive.splice(0);
+      },
+      // 修改天空背景
+      skyBoxScene(url) {
+        const textureCube = new this.THREE.CubeTextureLoader().load(url)
+        scene.background = textureCube
+      },
+      // 清除天空背景
+      clearSkyBoxScene() {
+        scene.background = null
+      },
+      // 下雨模拟
+      sceneSimu(type) {
+        if (!outlineComposer) {
+          outlineComposer = new EffectComposer(renderer, renderTarget);
+          outlineComposer.addPass(new RenderPass(scene, camera));
+        }
+        if(type === 'rain') {
+          scenePass = new ShaderPass(RainShader);
+          scenePass.uniforms['iResolution'].value = new this.THREE.Vector2(window.innerWidth, window.innerHeight);
+          outlineComposer.addPass(scenePass);
+        } else if (type === 'snow') {
+          scenePass = new ShaderPass(SnowShader);
+          scenePass.uniforms['iResolution'].value = new this.THREE.Vector2(window.innerWidth, window.innerHeight);
+          outlineComposer.addPass(scenePass);
+        }
+      },
+      clearSceneSim() {
+        if (scenePass && outlineComposer) {
+          outlineComposer.removePass(scenePass);
+        }
+        scenePass = null;
+      },
       animate() {
         const delta = fpsClock.getDelta();
         timeStamp += delta;
         animateId = requestAnimationFrame(this.animate);
-        cameraControls.enabled && cameraControls.update(timeStamp);
-        this.cameraTrack();
-        this.firstPerspective();
-        labelRenderer.render(scene, camera);
-        renderer.render(scene, camera);
+        if (timeStamp > singleFrameTime) {
+          if (modelActions.length > 0) {
+            modelActions.forEach(item => {
+              item.update(timeStamp);
+            })
+          }
+          cameraControls.enabled && cameraControls.update(timeStamp);
+          this.cameraTrack();
+          this.firstPerspective();
+          if (scenePass) {
+            let d = sceneClock.getDelta()
+            scenePass.uniforms['iTime'].value += d;
+          }
+          labelRenderer.render(scene, camera);
+          renderer.render(scene, camera);
+          timeStamp = timeStamp % singleFrameTime;
+          outlineComposer && outlineComposer.render();
+        }
       },
     },
   };

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

@@ -1,10 +1,8 @@
 <template>
-  <div id="pid-svg">
-    <embed type="image/svg+xml" id="svg-tigger" :src="currentSvg" />
-  </div>
+  <embed type="image/svg+xml" id="svg-tigger" :src="currentSvg" />
 </template>
 <script>
-  import * as svgPanZoom from 'static/svg-pan-zoom.min.js';
+ import svgPanZoom from 'svg-pan-zoom';
   var svgCon = {},
     svgTigger = {},
     svgEmbed = {};
@@ -15,20 +13,37 @@
   var inspectionRect = null,
     pointerRect = null;
   export default {
-    name: 'PidSvg',
+    name: 'FlSvg',
+    props: {
+      src: {
+        typeof: String,
+        default: ''
+      }
+    },
+    watch: {
+      src(newVal) {
+        this.currentSvg = newVal
+      }
+    },
     data() {
       return {
-        currentSvg: null,
+        currentSvg: '',
       };
     },
+    created() {
+      this.currentSvg = this.src
+    },
     mounted() {
       svgEmbed = document.getElementById('svg-tigger');
       svgEmbed.addEventListener('resize', () => {
         this.onWindowResize;
       });
       svgEmbed.addEventListener('load', () => {
+        console.log(svgPanZoom)
         svgTigger = svgPanZoom('#svg-tigger', {
           viewportSelector: '.svg-pan-zoom_viewport',
+          panEnabled: true,
+          zoomEnabled: true,
           preventMouseEventsDefault: false,
         });
         svgCon = svgEmbed.getSVGDocument().querySelector('svg');
@@ -51,6 +66,11 @@
       });
     },
     methods: {
+      changeSvg(url) {
+        this.$set(this, 'currentSvg', url)
+        preTargetCon.splice(0)
+        preTargetStyle.splice(0)
+      },
       // 改变窗口大小
       onWindowResize() {
         svgCon.removeAttribute('width');
@@ -80,7 +100,7 @@
           }
           if (evt.button === 0) {
             this.$emit('leftClick', targetElement);
-          } else if (event.button === 2) {
+          } else if (evt.button === 2) {
             this.$emit('rightClick', targetElement);
           }
         }
@@ -90,20 +110,21 @@
       参数：svgIds: [], 需要高亮的id的集合， flag: true / false, 是否要定位目标元素, color: '', 高亮的颜色
     */
       highLight(svgIds, flag, color) {
+        console.log(svgIds)
         if (svgIds === null || svgIds === undefined) {
           throw new Error('svgIds should be an array');
         } else {
           for (let index = 0; index < svgIds.length; index++) {
             let element = svgIds[index];
-            let targetCon = svgCon.getElementById(element);
+            let targetCon = svgCon.getElementById(element.svgId);
             if (!targetCon) return;
             this.depthTraversal(targetCon.children, color);
           }
           if (flag) {
             svgTigger.reset();
-            let firstCon = svgCon.getElementById(svgIds[0]);
+            let firstCon = svgCon.getElementById(svgIds[0].svgId);
             setTimeout(() => {
-              svgTigger.zoomAtPoint(1.5, {
+              svgTigger.zoomAtPoint(2, {
                 x: firstCon.getBoundingClientRect().x,
                 y: firstCon.getBoundingClientRect().y,
               });
@@ -154,12 +175,6 @@
   };
 </script>
 <style lang="scss" scoped>
-  #pid-svg {
-    cursor: pointer;
-    height: 100%;
-    width: 100%;
-  }
-
   #svg-tigger {
     cursor: pointer;
     height: 100%;

package/src/main.js

@@ -1,16 +1,18 @@
 import FlModel from '../packages/components/com-graphics/index.vue';
 import Fl2dcanvas from '../packages/components/com-flcanvas/index.vue';
 import FLPerControl from '../packages/components/com-graphics/per-control.vue';
+import FlSvg from '../packages/components/com-graphics/pid.vue';
 import * as THREE from 'three';
 
 const components = [
     FlModel,
     Fl2dcanvas,
-    FLPerControl
+    FLPerControl,
+    FlSvg
 ];
 
 const install = (Vue) => {
-    Vue.prototype.THREE = THREE
+    Vue.prototype.THREE = THREE;
     components.forEach(component => {
         Vue.component(component.name, component);
     });
@@ -24,6 +26,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 export default {
     install,
     FlModel,
+    FlSvg,
     Fl2dcanvas,
     FLPerControl
 };

package/src/utils/instance-parser.js

@@ -48,12 +48,18 @@ function handleInstancedMeshModel(instances, drawObjs, type, scene, customColor,
       if (!targetGroup) {
         const drawObj = drawObjMapInstance[instances[i].drawObject];
         const group = new THREE.Group();
+        // let grouphName = ''
+        for (const key in meshNameConfig) {
+          group.userData[key] = meshNameConfig[key]
+          // grouphName += ':' + meshNameConfig[key]
+        }
+        // grouphName !== '' ? instances[i].drawObject + grouphName: instances[i].drawObject;
         group.name = instances[i].drawObject;
         group.userData.isInstancedMeshGroup = true;
-  
+        group.userData.instanceId = instances[i].drawObject;
         const instanceCount = drawObj.MapInstance.length;
         drawObj.MapMesh?.forEach(mesh => {
-          const model = drawModel(mesh, group.name, instanceCount, customColor);
+          const model = drawModel(mesh, instances[i].drawObject, instanceCount, customColor);
           if (!model) {
             return;
           }