fl-web-component 1.0.9 → 1.0.10

package/package.json

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

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

@@ -20,6 +20,8 @@
     pointControls,
     threeMeasure,
     modelGroup,
+    gui,
+    animateId 
   ] = (function* (v) {
     while (true) yield v;
   })(null);
@@ -45,22 +47,26 @@
     while (true) yield v;
   })(true);
 
-  var clippingPlanes = [];
+  var clippingMesh = [];
   var removeSpeed = 200,
     upSpeed = 200; //控制器移动速度 , //控制跳起时的速度
-  var modelGroup;
-var roamConfig = {
-  loop: false,
-  speed: 0, // 最大值为3
-  name: ''
-}
+  var roamConfig = {
+    loop: false,
+    speed: 0, // 最大值为3
+    name: ''
+  }
+  var guiParams = {
+    'x轴': 0,
+    'y轴': 0,
+    'z轴': 0,
+  }
   //  绘制对象映射实例表
-  let drawObjMapInstance = {};
   import CameraControls from 'camera-controls';
   import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
   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 { 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';
@@ -79,7 +85,6 @@ var roamConfig = {
     },
     data() {
       return {
-        arrowImg: require('@/assets/arrow-right.png'),
       };
     },
     created() {
@@ -166,22 +171,66 @@ var roamConfig = {
       /*
         参数：data 模型数据
           color: '' 初始化模型的颜色 在业务方 有这个需求
-           meshNameConfig: {}
+          meshNameConfig: {}
       */
-      drawModel(data, color = '', meshNameConfig) {
+      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, meshNameConfig);
+          let modelBox3 = new this.THREE.Box3();
+          modelBox3.expandByObject(modelGroup);
+          let modelWorldPs = new this.THREE.Vector3().addVectors(modelBox3.max, modelBox3.min).multiplyScalar(0.5)
           scene.add(modelGroup);
+          modelGroup.traverse(child => {
+            if (child.isMesh) {
+              const json = this.getMeshCenterAndVolume(child)
+              let meshBox3 = new this.THREE.Box3();
+              meshBox3.setFromObject(child);
+              // 获取每个mesh的中心点，爆炸方向为爆炸中心点指向mesh中心点
+              let worldPs = new this.THREE.Vector3().addVectors(meshBox3.max, meshBox3.min).multiplyScalar(0.5)
+              if (isNaN(worldPs.x)) return
+              // 计算爆炸方向
+              child.worldDir = new this.THREE.Vector3().subVectors(worldPs, modelWorldPs).normalize()
+              // 保存初始坐标
+              child.userData.center = json.center
+              child.userData.worldPs = worldPs
+              child.userData.oldPs = child.getWorldPosition(new this.THREE.Vector3())
+              child.userData.box = json.box
+              child.userData.position = new this.THREE.Vector3().copy(child.position)
+              child.userData.translate = {
+                x: 0,
+                y: 0,
+                z: 0
+              }
+              child.userData.rotate = {
+                x: 0,
+                y: 0,
+                z: 0
+              }
+              child.userData.modelWorldPs = modelWorldPs
+            }
+          })
           // this.compileShader();
           // cameraControls.fitToSphere(scene, true); // TODO 待处理，先用 setModelCenter 进行定位
           this.setModelCenter(modelGroup);
           // cameraControls.saveState();
         }
       },
+      // 获取mesh的中心点
+      getMeshCenterAndVolume(mesh) {
+        const box = new this.THREE.Box3().setFromObject(mesh)
+        const volume = box.getSize(new this.THREE.Vector3())
+        const geometry = mesh.geometry
+        geometry.computeBoundingBox()
+        const center = geometry.boundingBox.getCenter(new this.THREE.Vector3())
+        return {
+          'center': center,
+          'box': volume
+        }
+      },
       compileShader() {
         scene.traverse(child => {
           if (child.isMesh) {
@@ -349,8 +398,14 @@ var roamConfig = {
               case 'visible':
                 targetObj.forEach(children => {
                   const index = children.userData.instanceIndex;
-                  children.geometry.attributes.visible.array[index] = ele.attr[key] ? 1.0 : 0.0;
-                  children.geometry.attributes.visible.needsUpdate = true;
+                  if (ele.attr[key]) {
+                    const restoreMatrix = new this.THREE.Matrix4().copy(children.userData.copyMatrix);
+                    children.setMatrixAt(index, restoreMatrix);
+                  } else {
+                    const offsetMatrix = new this.THREE.Matrix4().copy(children.userData.copyMatrix).makeTranslation(9999999, 9999999, 9999999);
+                    children.setMatrixAt(index, offsetMatrix);
+                  }
+                  children.instanceMatrix.needsUpdate = true;
                 });
                 break;
               case 'opacity':
@@ -367,7 +422,7 @@ var roamConfig = {
           // obj.material.needsUpdate = true;
         }
       },
-      // 修改整体模型实体的属性
+      // 修改整个场景中模型实体的属性
       /*
         {
           attr: '', 需要修改属性名（color、visible(true / false)、opacity(0-1),
@@ -380,7 +435,8 @@ var roamConfig = {
             if (obj instanceof this.THREE.Mesh) {
               switch (params.attr) {
                 case 'color':
-                  obj.material.color = new this.THREE.Color(params.value);
+                  obj.setColorAt(obj.userData.instanceIndex, new this.THREE.Color(params.value));
+                  obj.instanceColor.needsUpdate = true;
                   break;
                 case 'visible':
                   obj.material.visible = params.value;
@@ -414,20 +470,63 @@ var roamConfig = {
                     }
                   });
                   break;
+                case 'visible': 
+                  obj.forEach(children => {
+                    const index = children.userData.instanceIndex;
+                    const restoreMatrix = new this.THREE.Matrix4().copy(children.userData.copyMatrix);
+                    children.setMatrixAt(index, restoreMatrix);
+                    children.instanceMatrix.needsUpdate = true
+                  });
+                  break;
               }
             }
           }
         }
       },
       // 定位到模型
-      locateModel(id) {
-        let obj = scene.getObjectByName(id);
+      locateModel(name) {
+        let obj = scene.getObjectByName(name);
         if (obj) {
           // cameraControls.fitToSphere(obj.parent, true); // TODO 待处理，先用 setModelCenter 进行定位
           this.setModelCenter(obj.parent);
           // cameraControls.fitToBox( obj, true);
         }
       },
+      // 根据自定义参数修改模型
+      /*
+        自定义参数指的是在调用drawModel时配置的meshNameConfig里面的字段来修改某一类模型实体的属性
+        {
+          customName: '', 自定义字段名称
+          customValue: '' 自定义字段的值
+          attr: {
+            color: '',
+            opacity: 0 -1,
+            visiable: true/false
+          }
+        }
+      */
+      updatePropertyByCustom(params) {
+        scene.traverse(child => {
+          if (child.isMesh && child.userData[params.customName] === params.customValue) {
+            for (const key in params.attr) {
+              switch (key) {
+                case 'color':
+                  child.setColorAt(obj.userData.instanceIndex, new this.THREE.Color(params.attr[key]));
+                  child.instanceColor.needsUpdate = true;
+                  break;
+                case 'visible':
+                  child.material.visible = params.attr[key];
+                  break;
+                case 'opacity':
+                  child.material.opacity = params.attr[key];
+                  child.material.transparent = true;
+                  break;
+              }
+              child.material.needsUpdate = true;
+            }
+          }
+        })
+      },
       // 相机定位
       /*
         定位参数：x: 相机的x位置, y: 相机的y位置, z: 相机的z位置
@@ -585,7 +684,7 @@ var roamConfig = {
           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(this.arrowImg);
+          lineTexture = new this.THREE.TextureLoader().load('/static/arrow/arrow-right.png');
           lineTexture.wrapS = this.THREE.RepeatWrapping;
           lineTexture.wrapT = this.THREE.RepeatWrapping;
           lineTexture.repeat.set(20, 1); //水平重复20次
@@ -622,7 +721,7 @@ var roamConfig = {
           path: params.path,
         });
         roaming = true
-        clock = new this.THREE.Clock();
+        // clock = new this.THREE.Clock();
       },
       // 更新漫游的配置
       /*
@@ -630,14 +729,14 @@ var roamConfig = {
       */
       updateRoamConfig(params) {
         for (let key in params) {
-          roamConfig[key] = key === 'speed' ? params[key] / 300 : params[key]
+          roamConfig[key] = params[key]
         }
       },
       // 结束/退出漫游
       endRoam() {
         roaming = false;
         progress = 0;
-        this.removeObjectByName(this.roamConfig.name);
+        this.removeObjectByName(roamConfig.name);
         roamConfig = {
           loop: false,
           speed: 0,
@@ -686,7 +785,7 @@ var roamConfig = {
             this.computedBomb(item, val);
           });
         }
-        this.timeRender();
+        // this.timeRender();
       },
       // 单个实体模型炸开
       /*
@@ -712,7 +811,7 @@ var roamConfig = {
         先开启模型全局剖切模式, 会返回剖切值的最大最小值
         剖切值变换时, 使用
       */
-      setGlobalClipping() {
+      setGlobalClipping(flag = true) {
         const box3 = new this.THREE.Box3().setFromObject(scene.children[0]);
         let max = box3.max;
         let min = box3.min;
@@ -722,6 +821,18 @@ var roamConfig = {
           new this.THREE.Plane(new this.THREE.Vector3(0, 0, -1), max.z),
         ];
         renderer.clippingPlanes = clippingPlanes;
+        if (flag) {
+          guiParams = {
+            'x轴': clippingPlanes[0].constant,
+            'y轴': clippingPlanes[2].constant,
+            'z轴': clippingPlanes[1].constant
+          }
+          this.addClippingGui('全局剖切', {
+            x: min.x,
+            y: min.z,
+            z: min.y
+          }, clippingPlanes)
+        }
         return {
           min: min,
           max: max,
@@ -745,15 +856,23 @@ var roamConfig = {
       },
       // 取消全局剖切
       cancelGlobalClipping() {
+        guiParams = {
+          'x轴': 0,
+          'y轴': 0,
+          'z轴': 0
+        };
         renderer.clippingPlanes = Object.freeze([]);
+        gui && gui.destroy();
       },
-      // 单个实体的剖切/ 局部剖切 obj 实体对象
-      setLocalClipping(obj) {
+      // 单个实体的剖切/ 局部剖切 obj 实体对象 flag 代表是否使用图形组件自带的剖切面板 默认为true
+      setLocalClipping(obj, flag = true) {
+        clippingMesh.splice(0)
+        clippingMesh.push(obj)
         renderer.localClippingEnabled = true;
         // mesh的boundingBox 可以获取到该对象位置的最大最小值 但是在这里我们需要把y、z轴互换
-        const boundingBox = new this.THREE.Box3().copy(obj.geometry.boundingBox);
+        const boundingBox = new this.THREE.Box3().copy(obj.boundingBox);
         boundingBox.applyMatrix4(obj.matrixWorld);
-        clippingPlanes = [
+        let clippingPlanes = [
           new this.THREE.Plane(new this.THREE.Vector3(-1, 0, 0), Math.ceil(boundingBox.max.x)),
           new this.THREE.Plane(new this.THREE.Vector3(0, -1, 0), Math.ceil(boundingBox.max.y)),
           new this.THREE.Plane(new this.THREE.Vector3(0, 0, -1), Math.ceil(boundingBox.max.z)),
@@ -761,6 +880,23 @@ var roamConfig = {
         obj.material.clippingPlanes = clippingPlanes;
         obj.material.needsUpdate = true;
         // 将局部剖切的对象记录下来
+        if (flag) {
+          guiParams = {
+            'x轴': clippingPlanes[0].constant,
+            'y轴': clippingPlanes[2].constant,
+            'z轴': clippingPlanes[1].constant
+          }
+          this.addClippingGui('局部剖切', {
+            x: Math.floor(boundingBox.min.x),
+            y: Math.floor(boundingBox.min.z),
+            z: Math.floor(boundingBox.min.y)
+          }, obj.material.clippingPlanes)
+          // cube.material.clippingPlanes
+        };
+        return {
+          min: boundingBox.min,
+          max: boundingBox.max,
+        }
       },
       // 更新局部剖切的值
       /*
@@ -773,14 +909,43 @@ var roamConfig = {
           y: 1,
           z: 2,
         };
+        let obj = clippingMesh[clippingMesh.length - 1]
         for (const key in params) {
-          clippingPlanes[axis[key]].constant = params[key];
+          obj.material.clippingPlanes[axis[key]].constant = params[key];
+          obj.material.needsUpdate = true;
         }
         // this.timeRender()
       },
       // 取消局部/单个实体的剖切
       cancelLocalClipping() {
-        clippingPlanes = Object.freeze([]);
+        guiParams = {
+          'x轴': 0,
+          'y轴': 0,
+          'z轴': 0
+        };
+        gui && gui.destroy();
+        clippingMesh.forEach(item => {
+          item.material.clippingPlanes = Object.freeze([])
+          item.material.needsUpdate = true
+        })
+        clippingMesh.splice(0)
+      },
+      // 添加剖切轴工具
+      addClippingGui(title, minValue, objClipp1, objClipp2) {
+        gui = new GUI({
+          title: title
+        })
+        gui.add(guiParams, 'x轴').min(minValue.x).max(Math.abs(guiParams['x轴'])).onChange(d => {
+          objClipp1[0].constant = d
+          objClipp2 && (objClipp2[0].constant = d)
+        })
+        gui.add(guiParams, 'y轴').min(minValue.y).max(Math.abs(guiParams['y轴'])).onChange(d => {
+          objClipp1[2].constant = d
+          objClipp2 && (objClipp2[2].constant = d)
+        })
+        gui.add(guiParams, 'z轴').min(minValue.z).max(Math.abs(guiParams['z轴'])).onChange(d => {
+          objClipp1[1].constant = d
+        })
       },
       // 开启第一视角
       startFirstPer() {
@@ -936,9 +1101,9 @@ var roamConfig = {
       },
       // 返回主视角/恢复相机初始状态
       home() {
-        // if (roaming) {
-        //   this.disposeRoaming()
-        // }
+        if (roaming) {
+          this.endRoam()
+        }
         cameraControls.reset(true);
         cameraControls.update(0);
         // this.timeRender()
@@ -1104,7 +1269,7 @@ var roamConfig = {
       animate() {
         const delta = fpsClock.getDelta();
         timeStamp += delta;
-        requestAnimationFrame(this.animate);
+        animateId = requestAnimationFrame(this.animate);
         cameraControls.enabled && cameraControls.update(timeStamp);
         this.cameraTrack();
         this.firstPerspective();

package/packages/components/com-graphics/per-control.vue

@@ -36,7 +36,7 @@
 </template>
 <script>
 export default {
-  name: 'PerControl',
+  name: 'FLPerControl',
   data() {
     return {};
   },

package/src/main.js

@@ -1,9 +1,11 @@
 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 * as THREE from 'three';
 const components = [
     FlModel,
-    Fl2dcanvas
+    Fl2dcanvas,
+    FLPerControl
 ];
 
 const install = (Vue) => {
@@ -21,5 +23,6 @@ if (typeof window !== 'undefined' && window.Vue) {
 export default {
     install,
     FlModel,
-    Fl2dcanvas
+    Fl2dcanvas,
+    FLPerControl
 };

package/src/utils/instance-parser.js

@@ -45,7 +45,6 @@ function handleInstancedMeshModel(instances, drawObjs, type, scene, customColor,
       if (drawObjectName) {
         targetGroup = scene.getObjectByName(drawObjectName);
       }
-  
       if (!targetGroup) {
         const drawObj = drawObjMapInstance[instances[i].drawObject];
         const group = new THREE.Group();
@@ -63,16 +62,19 @@ function handleInstancedMeshModel(instances, drawObjs, type, scene, customColor,
             model.userData[key] = meshNameConfig[key]
             meshName += ':' + meshNameConfig[key]
           }
-          drawObj.MapInstance.forEach((instance, index) => {
-            if (instance.instanceId == instances[i].instanceId) {
+          drawObj.MapInstance.forEach((item, index) => {
+            if (item.instanceId == instances[i].instanceId) {
               model.userData.instanceIndex = index;
+              model.userData.instanceId = instances[i].instanceId
               model.name = meshName !== '' ? (instances[i].instanceId + meshName) : instances[i].instanceId;
-              const matrixVal = instance.matrix?.val;
+              const matrixVal = item.matrix?.val;
               if (matrixVal) {
                 const m4 = new THREE.Matrix4();
                 // m4.setPosition(new THREE.Vector3(9999999, 9999999, 9999999)); // TODO 临时隐藏方案
-                m4.elements = instance.matrix.val;
+                m4.elements = item.matrix.val;
                 model.setMatrixAt(index, m4);
+                const copyMatrix = new THREE.Matrix4().copy(m4);
+                model.userData.copyMatrix = copyMatrix;
               }
               // 需要先设置全部实例颜色，否则后续设置颜色无效
               const { color } = mesh.prop;
@@ -393,7 +395,6 @@ function drawText(geom, instanceName, instanceCount) {
   mesh.translateY(-(fontsize / 2.5));
 
   mesh.userData.instanceName = instanceName;
-
   return mesh;
 }