fl-web-component 1.0.7 → 1.0.9

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "fl-web-component",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint \"{src,packages}/**/*.{vue,js}\" --fix",
     "prettier": "prettier --write  \"packages/**/*.{js,css,less,scss,vue,html}\"",
     "watch": "npm run lint && vue-cli-service build --watch --mode production --target lib --name fl-web-component ./src/main.js",
-    "build": "npm run lint && vue-cli-service build --target lib --name fl-web-component ./src/main.js"
+    "build": "npm run lint && vue-cli-service build --target lib --name fl-web-component ./src/main.js",
+    "publish": "npm run build && npm publish"
   },
   "files": [
     "dist",

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

@@ -1,5 +1,5 @@
 <template>
-  <div id="instructions"></div>
+  <div id="fl-model"></div>
 </template>
 <script>
   var [
@@ -49,7 +49,11 @@
   var removeSpeed = 200,
     upSpeed = 200; //控制器移动速度 , //控制跳起时的速度
   var modelGroup;
-
+var roamConfig = {
+  loop: false,
+  speed: 0, // 最大值为3
+  name: ''
+}
   //  绘制对象映射实例表
   let drawObjMapInstance = {};
   import CameraControls from 'camera-controls';
@@ -75,10 +79,7 @@
     },
     data() {
       return {
-        roamConfig: {
-          loop: false,
-          speed: 0, // 最大值为3
-        },
+        arrowImg: require('@/assets/arrow-right.png'),
       };
     },
     created() {
@@ -88,7 +89,7 @@
       mouse = new this.THREE.Vector2();
     },
     mounted() {
-      instructions = document.getElementById('instructions');
+      instructions = document.getElementById('fl-model');
       this.initRender();
       this.initScene();
       this.initCamera();
@@ -165,14 +166,15 @@
       /*
         参数：data 模型数据
           color: '' 初始化模型的颜色 在业务方 有这个需求
+           meshNameConfig: {}
       */
-      drawModel(data, color = '') {
+      drawModel(data, color = '', meshNameConfig) {
         if (Object.keys(data).length === 0) {
           return;
         }
         const { instances, drawObjs } = parseData(data);
         if (instances.length > 0) {
-          modelGroup = handleInstancedMeshModel(instances, drawObjs, '', scene, color);
+          modelGroup = handleInstancedMeshModel(instances, drawObjs, '', scene, color, meshNameConfig);
           scene.add(modelGroup);
           // this.compileShader();
           // cameraControls.fitToSphere(scene, true); // TODO 待处理，先用 setModelCenter 进行定位
@@ -355,6 +357,11 @@
                 obj.material.opacity = ele.attr[key];
                 obj.material.transparent = true;
                 break;
+              case 'position': 
+                targetObj.forEach(children => {
+                  children.position.set(ele.attr[key].x, ele.attr[key].y, ele.attr[key].z)
+                })
+                break;
             }
           }
           // obj.material.needsUpdate = true;
@@ -497,6 +504,39 @@
           }
         });
       },
+      // 删除场景中所有的实体
+      removeAll() {
+        if (scene) {
+          scene.traverse(item => {
+            item.material && item.material.dispose();
+            item.geometry && item.geometry.dispose();
+            if (item instanceof this.THREE.Mesh) {
+              item.clear();
+            }
+            scene.remove(item);
+          })
+          scene.clear()
+        }
+      },
+      // 销毁场景 释放内存
+      destroyScene() {
+        cancelAnimationFrame(animateId)
+          if (scene) {
+            scene.traverse(child => {
+              child.material && child.material.dispose()
+              child.geometry && child.geometry.dispose()
+              child = null
+            })
+            scene.clear()
+            scene = null
+          }
+          renderer.forceContextLoss()
+          renderer.dispose()
+          camera = null
+          cameraControls = null
+          renderer.domElement = null
+          renderer = null
+      },
       // 绘制曲线
       /*
         参数声明：Object
@@ -526,6 +566,13 @@
         }
       },
       // 绘制贴图曲线
+      /*
+        参数声明：Object
+        {
+          path: [{x:0, y: 0, z: 0}], 坐标点信息
+          name: '', // 线条的名字, 用来清除时使用的
+        }
+      */
       drawTextureCurve(params) {
         this.removeObjectByName(params.name);
         const route = [];
@@ -538,7 +585,7 @@
           curve = new this.THREE.CatmullRomCurve3(route, false, 'catmullrom', 0);
           const geometry = new this.THREE.TubeGeometry(curve, 5000, 0.5, 4);
           //加载纹理
-          lineTexture = new this.THREE.TextureLoader().load('/static/arrow/arrow-right.png');
+          lineTexture = new this.THREE.TextureLoader().load(this.arrowImg);
           lineTexture.wrapS = this.THREE.RepeatWrapping;
           lineTexture.wrapT = this.THREE.RepeatWrapping;
           lineTexture.repeat.set(20, 1); //水平重复20次
@@ -552,8 +599,10 @@
           let line = new this.THREE.Line(geometry, material);
           line.name = params.name;
           scene.add(line);
+          clock = new this.THREE.Clock();
         }
       },
+      // 
       // 开启漫游
       /*
         参数为Object
@@ -564,37 +613,38 @@
       */
       startRoam(params) {
         progress = 0;
-        this.roamConfig = Object.assign(
-          {},
-          {
-            loop: params.loop,
-            speed: params.speed,
-            roamName: params.name,
-          }
-        );
+        roamConfig = {
+          loop: params.loop,
+          speed: params.speed,
+         }
         this.drawTextureCurve({
           name: params.name,
           path: params.path,
         });
+        roaming = true
         clock = new this.THREE.Clock();
       },
-      // 暂停漫游
-      pauseRoaming() {
-        this.$set(this.roamConfig, 'speed', 0);
+      // 更新漫游的配置
+      /*
+        参数为Object 
+      */
+      updateRoamConfig(params) {
+        for (let key in params) {
+          roamConfig[key] = key === 'speed' ? params[key] / 300 : params[key]
+        }
       },
       // 结束/退出漫游
       endRoam() {
         roaming = false;
         progress = 0;
-        this.removeObjectByName(this.roamConfig.roamName);
-        this.roamConfig = Object.assign(
-          {},
-          {
-            loop: false,
-            speed: 0,
-            roamName: '',
-          }
-        );
+        this.removeObjectByName(this.roamConfig.name);
+        roamConfig = {
+          loop: false,
+          speed: 0,
+          name: '',
+        }
+        roaming = false
+        lineTexture = null
       },
       // 相机跟随轨道
       cameraTrack() {
@@ -611,16 +661,16 @@
             camera.lookAt(pointBox.x, pointBox.y + 5, pointBox.z);
             cameraControls.setPosition(point.x, point.y + 5, point.z, false);
             cameraControls.setTarget(pointBox.x, pointBox.y + 5, pointBox.z, false);
-            progress += this.roamConfig.speed / 300;
+            progress += roamConfig.speed / 300;
           } else {
             // 循环漫游
-            if (this.roamConfig.loop) {
+            if (roamConfig.loop) {
               progress = 0;
             }
           }
         } else {
           lineTexture = null;
-          this.roamConfig.progress = 0;
+          progress = 0;
         }
       },
       // 全局整体炸开
@@ -1065,7 +1115,7 @@
   };
 </script>
 <style lang="scss" scoped>
-  #instructions {
+  #fl-model {
     width: 100%;
     height: 100%;
     cursor: pointer;

package/src/utils/instance-parser.js

@@ -25,73 +25,70 @@ let drawObjMapInstance = {};
  * @param {Object} instance - 实例对象，包含绘制对象ID和实例ID等数据
  * @param {Array} drawObjs - 绘制对象数组，包含几何数据
  */
-function handleInstancedMeshModel(instances, drawObjs, type, scene, customColor) {
+function handleInstancedMeshModel(instances, drawObjs, type, scene, customColor, meshNameConfig) {
   // 第一阶段：构建实例映射表
   let modelGroup = new THREE.Group();
   for (let i = 0; i < instances.length; i++) {
     formatInstancedMap(instances[i], drawObjs);
   }
-  console.log('drawObjMapInstance', drawObjMapInstance)
   // 第二阶段：遍历所有实例进行处理
   for (let i = 0; i < instances.length; i++) {
     let targetGroup, instancedMeshIndex, drawObjectName;
-    // for (let drawObjectId in drawObjMapInstance) {
-    //   const drawObj = drawObjMapInstance[drawObjectId];
-    //   drawObj.MapInstance.forEach((instance, index) => {
-    //     if (instance.instanceId == instances[i].instanceId) {
-    //       instancedMeshIndex = index;
-    //       drawObjectName = drawObjectId;
-    //     }
-    //   });
-    // }
-
     const drawObjInstance = drawObjMapInstance[instances[i].drawObject];
-    drawObjInstance.MapInstance.forEach((instance, index) => {
-      if (instance.instanceId == instances[i].instanceId) {
-        instancedMeshIndex = index;
-        drawObjectName = instances[i].drawObject;
-      }
-    });
-    if (drawObjectName) {
-      targetGroup = scene.getObjectByName(drawObjectName);
-    }
-
-    if (!targetGroup) {
-      const drawObj = drawObjMapInstance[instances[i].drawObject];
-      const group = new THREE.Group();
-      group.name = instances[i].drawObject;
-      group.userData.isInstancedMeshGroup = true;
-
-      const instanceCount = drawObj.MapInstance.length;
-      drawObj.MapMesh?.forEach(mesh => {
-        const model = drawModel(mesh, group.name, instanceCount, customColor);
-        if (!model) {
-          return;
+    if (drawObjInstance.MapMesh.length > 0) {
+      drawObjInstance.MapInstance.forEach((instance, index) => {
+        if (instance.instanceId == instances[i].instanceId) {
+          instancedMeshIndex = index;
+          drawObjectName = instances[i].drawObject;
         }
-        drawObj.MapInstance.forEach((instance, index) => {
-          if (instance.instanceId == instances[i].instanceId) {
-            model.userData.instanceIndex = index;
-            model.name = instances[i].instanceId;
-            const matrixVal = instance.matrix?.val;
-            if (matrixVal) {
-              const m4 = new THREE.Matrix4();
-              // m4.setPosition(new THREE.Vector3(9999999, 9999999, 9999999)); // TODO 临时隐藏方案
-              m4.elements = instance.matrix.val;
-              model.setMatrixAt(index, m4);
-            }
-            // 需要先设置全部实例颜色，否则后续设置颜色无效
-            const { color } = mesh.prop;
-            const meshColor = customColor
-              ? new THREE.Color(customColor)
-              : new THREE.Color(`rgb(${color[0]}, ${color[1]}, ${color[2]})`);
-            model.setColorAt(index, meshColor);
+      });
+      if (drawObjectName) {
+        targetGroup = scene.getObjectByName(drawObjectName);
+      }
+  
+      if (!targetGroup) {
+        const drawObj = drawObjMapInstance[instances[i].drawObject];
+        const group = new THREE.Group();
+        group.name = instances[i].drawObject;
+        group.userData.isInstancedMeshGroup = true;
+  
+        const instanceCount = drawObj.MapInstance.length;
+        drawObj.MapMesh?.forEach(mesh => {
+          const model = drawModel(mesh, group.name, instanceCount, customColor);
+          if (!model) {
+            return;
+          }
+          let meshName = ''
+          for (const key in meshNameConfig) {
+            model.userData[key] = meshNameConfig[key]
+            meshName += ':' + meshNameConfig[key]
           }
+          drawObj.MapInstance.forEach((instance, index) => {
+            if (instance.instanceId == instances[i].instanceId) {
+              model.userData.instanceIndex = index;
+              model.name = meshName !== '' ? (instances[i].instanceId + meshName) : instances[i].instanceId;
+              const matrixVal = instance.matrix?.val;
+              if (matrixVal) {
+                const m4 = new THREE.Matrix4();
+                // m4.setPosition(new THREE.Vector3(9999999, 9999999, 9999999)); // TODO 临时隐藏方案
+                m4.elements = instance.matrix.val;
+                model.setMatrixAt(index, m4);
+              }
+              // 需要先设置全部实例颜色，否则后续设置颜色无效
+              const { color } = mesh.prop;
+              const meshColor = customColor
+                ? new THREE.Color(customColor)
+                : new THREE.Color(`rgb(${color[0]}, ${color[1]}, ${color[2]})`);
+              model.setColorAt(index, meshColor);
+            }
+          });
+          // model.instanceColor.needsUpdate = true;
+          group.add(model);
         });
-        // model.instanceColor.needsUpdate = true;
-        group.add(model);
-      });
-      modelGroup.add(group);
+        modelGroup.add(group);
+      }
     }
+
   }
   console.log('modelGroup', modelGroup)
   return modelGroup;

package/src/utils/mock.js

@@ -46,7 +46,7 @@ function mockRequest(options = {}) {
   }
 }
 
-// openMock = 1;
+openMock = 1;
 
 openMock && setTimeout(() => {
   console.log(`%c已加载本地模型数据`, "color:red;font-size:3em;");