fl-web-component 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fl-web-component",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint \"{src,packages}/**/*.{vue,js}\" --fix",

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,6 @@
     },
     data() {
       return {
-        roamConfig: {
-          loop: false,
-          speed: 0, // 最大值为3
-        },
       };
     },
     created() {
@@ -88,7 +88,7 @@
       mouse = new this.THREE.Vector2();
     },
     mounted() {
-      instructions = document.getElementById('instructions');
+      instructions = document.getElementById('fl-model');
       this.initRender();
       this.initScene();
       this.initCamera();
@@ -165,18 +165,20 @@
       /*
         参数：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(modelGroup, true);
-          cameraControls.saveState();
+          // cameraControls.fitToSphere(scene, true); // TODO 待处理，先用 setModelCenter 进行定位
+          this.setModelCenter(modelGroup);
+          // cameraControls.saveState();
         }
       },
       compileShader() {
@@ -229,7 +231,7 @@
             mouse.y = -(event.clientY / instructions.offsetHeight) * 2 + 1;
             raycaster.setFromCamera(mouse, camera);
             const intersects = raycaster.intersectObjects(scene.children, true);
-            let params = {}
+            let params = {};
             let cameraData = {
               position: {
                 x: cameraControls.camera.position.x,
@@ -251,8 +253,8 @@
                   x: intersects[0].point.x,
                   y: intersects[0].point.y,
                   z: intersects[0].point.z,
-                }
-              }
+                },
+              };
             } else {
               params = {
                 objects: [],
@@ -262,8 +264,8 @@
                   x: -1,
                   y: -1,
                   z: -1,
-                }
-              }
+                },
+              };
             }
             if (event.button === 0) {
               this.$emit('leftClick', params);
@@ -287,26 +289,26 @@
           }
         }
       },
-      setModelCenter() {
-        // const box3 = new this.THREE.Box3();
-        // box3.setFromObject(modelGroup);
-        // const center = new this.THREE.Vector3();
-        // box3.getCenter(center);
-        // const size = box3.getSize(new this.THREE.Vector3());
-        // camera.position.set(center.x, center.y + size.y, center.z + size.z / 2);
-        // camera.lookAt(new this.THREE.Vector3(center.x, center.y, center.z));
-        // cameraControls.setLookAt(
-        //   center.x,
-        //   center.y + size.y,
-        //   center.z + size.z / 2,
-        //   center.x,
-        //   center.y,
-        //   center.z,
-        //   true
-        // );
-        // cameraControls.update();
-        // camera.updateProjectionMatrix();
-        // cameraControls.saveState();
+      setModelCenter(mesh) {
+        const box3 = new this.THREE.Box3();
+        box3.setFromObject(mesh);
+        const center = new this.THREE.Vector3();
+        box3.getCenter(center);
+        const size = box3.getSize(new this.THREE.Vector3());
+        camera.position.set(center.x, center.y + size.y, center.z + size.z / 2);
+        camera.lookAt(new this.THREE.Vector3(center.x, center.y, center.z));
+        cameraControls.setLookAt(
+          center.x,
+          center.y + size.y,
+          center.z + size.z / 2,
+          center.x,
+          center.y,
+          center.z,
+          true
+        );
+        cameraControls.update(0);
+        camera.updateProjectionMatrix();
+        cameraControls.saveState();
       },
       // 修改指定模型实体属性
       /**
@@ -354,6 +356,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;
@@ -415,7 +422,8 @@
       locateModel(id) {
         let obj = scene.getObjectByName(id);
         if (obj) {
-          cameraControls.fitToSphere(obj.parent, true);
+          // cameraControls.fitToSphere(obj.parent, true); // TODO 待处理，先用 setModelCenter 进行定位
+          this.setModelCenter(obj.parent);
           // cameraControls.fitToBox( obj, true);
         }
       },
@@ -495,6 +503,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
@@ -524,6 +565,13 @@
         }
       },
       // 绘制贴图曲线
+      /*
+        参数声明：Object
+        {
+          path: [{x:0, y: 0, z: 0}], 坐标点信息
+          name: '', // 线条的名字, 用来清除时使用的
+        }
+      */
       drawTextureCurve(params) {
         this.removeObjectByName(params.name);
         const route = [];
@@ -550,8 +598,10 @@
           let line = new this.THREE.Line(geometry, material);
           line.name = params.name;
           scene.add(line);
+          clock = new this.THREE.Clock();
         }
       },
+      // 
       // 开启漫游
       /*
         参数为Object
@@ -562,37 +612,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() {
@@ -609,16 +660,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;
         }
       },
       // 全局整体炸开
@@ -1063,7 +1114,7 @@
   };
 </script>
 <style lang="scss" scoped>
-  #instructions {
+  #fl-model {
     width: 100%;
     height: 100%;
     cursor: pointer;

package/src/utils/flgltf-parser.js

@@ -132,10 +132,12 @@ function parseData(input) {
   const formatInstances = [];
   flattenAndComputeWorldMatrices(rootInstances, formatInstances);
 
-  return {
+  const map = {
     drawObjs: Array.from(drawObjMap.values()),
     instances: formatInstances,
-  };
+  }
+  console.log('parseData', map)
+  return map;
 }
 
 export { parseData };

package/src/utils/instance-parser.js

@@ -25,13 +25,13 @@ 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;
@@ -68,10 +68,15 @@ function handleInstancedMeshModel(instances, drawObjs, type, scene, 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 = instances[i].instanceId;
+            model.name = meshName !== '' ? (instances[i].instanceId + meshName) : instances[i].instanceId;
             const matrixVal = instance.matrix?.val;
             if (matrixVal) {
               const m4 = new THREE.Matrix4();
@@ -93,6 +98,7 @@ function handleInstancedMeshModel(instances, drawObjs, type, scene, customColor)
       modelGroup.add(group);
     }
   }
+  console.log('modelGroup', modelGroup)
   return modelGroup;
   // timeRender();
   // console.log('scene', scene)