fl-web-component 1.0.7 → 1.0.8

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

@@ -16109,7 +16109,7 @@ 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":"fc389ef8-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=5b13dc9d&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"537c0758-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=5b13dc9d&scoped=true
 var com_graphicsvue_type_template_id_5b13dc9d_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -42745,7 +42745,7 @@ var component = normalizeComponent(
 )
 
 /* harmony default export */ var com_graphics = (component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"fc389ef8-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=83d38700&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"537c0758-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=83d38700&scoped=true
 var com_flcanvasvue_type_template_id_83d38700_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;

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

@@ -16118,7 +16118,7 @@ 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":"fc389ef8-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=5b13dc9d&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"537c0758-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=5b13dc9d&scoped=true
 var com_graphicsvue_type_template_id_5b13dc9d_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -42754,7 +42754,7 @@ var component = normalizeComponent(
 )
 
 /* harmony default export */ var com_graphics = (component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"fc389ef8-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=83d38700&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"537c0758-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=83d38700&scoped=true
 var com_flcanvasvue_type_template_id_83d38700_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fl-web-component",
-  "version": "1.0.7",
+  "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,14 +165,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 +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;
@@ -497,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
@@ -526,6 +565,13 @@
         }
       },
       // 绘制贴图曲线
+      /*
+        参数声明：Object
+        {
+          path: [{x:0, y: 0, z: 0}], 坐标点信息
+          name: '', // 线条的名字, 用来清除时使用的
+        }
+      */
       drawTextureCurve(params) {
         this.removeObjectByName(params.name);
         const route = [];
@@ -552,8 +598,10 @@
           let line = new this.THREE.Line(geometry, material);
           line.name = params.name;
           scene.add(line);
+          clock = new this.THREE.Clock();
         }
       },
+      // 
       // 开启漫游
       /*
         参数为Object
@@ -564,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() {
@@ -611,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;
         }
       },
       // 全局整体炸开
@@ -1065,7 +1114,7 @@
   };
 </script>
 <style lang="scss" scoped>
-  #instructions {
+  #fl-model {
     width: 100%;
     height: 100%;
     cursor: pointer;

package/src/utils/instance-parser.js

@@ -25,7 +25,7 @@ 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++) {
@@ -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();

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