[Feat 0000] 主通风机立井单筒模型接入、动画开发及动画对接

src/views/vent/monitorManager/mainFanMonitor/index.vue

@@ -1063,6 +1063,8 @@
           ? 'mainLjWindRect'
           : selectData['modalTyoe'] === 'lijing_3'
           ? 'mainWindRect3'
+          : selectData['modalTyoe'] === 'lijing_1'
+          ? 'mainLjDtWindRect'
           : 'mainWindRect';
 
       frontMonitorIsShow.value = false;

src/views/vent/monitorManager/mainFanMonitor/main.threejs.ts

@@ -5,6 +5,7 @@ import mainWindRect from './mainWind.threejs';
 import mainXjWindRect from './mainWind.xj.threejs';
 import mainLjWindRect from './mainWind.lj.threejs';
 import mainWindLj3 from './mainWind.li3.threejs';
+import mainWindLjDt from './mainWind.lidt.threejs';
 import useEvent from '../../../../utils/threejs/useEvent';
 import { getDictItemsByCode } from '/@/utils/dict';
 
@@ -20,6 +21,7 @@ let model: UseThree | undefined, //
   mainXjWindObj: mainXjWindRect | undefined,
   mainLjWindObj: mainLjWindRect | undefined,
   mainLj3WindObj: mainWindLj3 | undefined,
+  mainFanLjDtObj: mainWindLjDt | undefined,
   modalType = 'mainWindRect',
   explosionVentClose = -1,
   explosionVentOpen = -1;
@@ -78,6 +80,8 @@ const mouseEvent = (event) => {
         mainXjWindObj?.mousedownModel.call(mainXjWindObj, intersects);
       } else if (modalType === 'mainWindRect3' && mainLj3WindObj) {
         mainLj3WindObj?.mousedownModel.call(mainLj3WindObj, intersects);
+      } else if (modalType === 'mainLjDtWindRect' && mainFanLjDtObj) {
+        mainFanLjDtObj?.mousedownModel.call(mainFanLjDtObj, intersects);
       }
     });
   }
@@ -104,6 +108,8 @@ export const addText = () => {
     return mainLjWindObj.addCssText.call(mainLjWindObj);
   } else if (modalType === 'mainWindRect3' && mainLj3WindObj) {
     return mainLj3WindObj.addCssText.call(mainLj3WindObj);
+  } else if (modalType === 'mainLjDtWindRect' && mainFanLjDtObj) {
+    return mainFanLjDtObj.addCssText.call(mainFanLjDtObj);
   }
 };
 
@@ -140,6 +146,8 @@ export const play = (controlType, deviceType, frequencyVal?, state?, smokeDirect
     return mainLjWindObj.playSmoke.call(mainLjWindObj, controlType, deviceType, frequencyVal, state, smokeDirection);
   } else if (modalType === 'mainWindRect3' && mainLj3WindObj) {
     return mainLj3WindObj.playSmoke.call(mainLj3WindObj, controlType, deviceType, frequencyVal, state, smokeDirection);
+  } else if (modalType === 'mainLjDtWindRect' && mainFanLjDtObj) {
+    return mainFanLjDtObj.playSmoke.call(mainFanLjDtObj, controlType, deviceType, frequencyVal, state, smokeDirection);
   }
 };
 
@@ -155,6 +163,8 @@ export const playAnimate1 = async (selectData, duration?) => {
     mainObj = mainLjWindObj;
   } else if (modalType === 'mainWindRect3') {
     mainObj = mainLj3WindObj;
+  } else if (modalType === 'mainLjDtWindRect') {
+    mainObj = mainFanLjDtObj;
   }
   if (selectData && mainObj) {
     if (selectData.Fan1WindowOpen !== undefined) {
@@ -237,7 +247,7 @@ export const playAnimate = async (selectData, duration?) => {
   // if (Number(selectData.Fan2FreqHz) < 0) selectData.Fan2FreqHz = Math.abs(Number(selectData.Fan2FreqHz));
   if (!mainWindObj) return;
 
-  let mainObj: mainWindRect | mainXjWindRect | mainWindLj3 | undefined;
+  let mainObj: mainWindRect | mainXjWindRect | mainWindLj3 | mainWindLjDt | undefined;
 
   if (modalType === 'mainWindRect') {
     mainObj = mainWindObj;
@@ -247,6 +257,8 @@ export const playAnimate = async (selectData, duration?) => {
     mainObj = mainLjWindObj;
   } else if (modalType === 'mainWindRect3') {
     mainObj = mainLj3WindObj;
+  } else if (modalType === 'mainLjDtWindRect') {
+    mainObj = mainFanLjDtObj;
   }
   if (selectData && mainObj) {
     if (selectData['Fan1FreqHz'] == undefined || selectData['Fan1FreqHz'] == null || selectData['Fan1FreqHz'] == '') selectData['Fan1FreqHz'] = 50;
@@ -331,6 +343,8 @@ export const playAnimate = async (selectData, duration?) => {
         // 主风机停止
         mainObj.closeDevice('back');
       }
+    } else if (modalType === 'mainLjDtWindRect') {
+      (mainObj as mainWindLjDt).playSmoke(selectData.Fan1StartStatus == 1, selectData.Fan2FreqForwardRun == 1, selectData.Fan2FreqReverseRun == 1);
     } else {
       mainObj.resetSmokeParam('front', selectData.Fan2FreqHz, duration);
       mainObj.resetSmokeParam('back', selectData.Fan1FreqHz, duration);
@@ -456,6 +470,7 @@ export const setModelType = (type) => {
     mainWindObj?.stopSmoke();
     mainXjWindObj?.stopSmoke();
     mainLj3WindObj?.stopSmoke();
+    mainFanLjDtObj?.stopSmoke();
     mainLjWindObj?.stopSmoke();
     if (group) model?.scene?.remove(group);
     if (modalType === 'mainWindRect' && mainWindObj && mainWindObj.group) {
@@ -529,6 +544,23 @@ export const setModelType = (type) => {
         );
         if (group) model?.scene?.add(group);
       }, 300);
+    } else if (modalType === 'mainLjDtWindRect' && mainFanLjDtObj && mainFanLjDtObj.group) {
+      (<UseThree>model).startAnimation = mainFanLjDtObj.render.bind(mainFanLjDtObj);
+      group = mainFanLjDtObj.group;
+      setTimeout(async () => {
+        resolve(null);
+        const position = new THREE.Vector3(2.815, -7.014, -5.985);
+        const oldCameraPosition = { x: -332.39, y: 283.47, z: 438.61 };
+        await animateCamera(
+          oldCameraPosition,
+          { x: -3.41, y: -29.01, z: 8.84 },
+          { x: 5.128, y: 72.363, z: 93.655 },
+          { x: position.x, y: position.y, z: position.z },
+          model,
+          0.8
+        );
+        if (group) model?.scene?.add(group);
+      }, 300);
     }
   });
 };
@@ -576,6 +608,11 @@ export const mountedThree = (playerVal1) => {
               mainLj3WindObj = new mainWindLj3(model, playerVal1);
               await mainLj3WindObj.mountedThree();
               break;
+            case 'lijing_1':
+              modalType = 'mainLjDtWindRect';
+              mainFanLjDtObj = new mainWindLjDt(model);
+              await mainFanLjDtObj.mountedThree();
+              break;
           }
         }
       } else {
@@ -609,6 +646,12 @@ export const mountedThree = (playerVal1) => {
         if (mainLj3WindObj.airJin2) mainLj3WindObj.airJin2.visible = false;
         if (mainLj3WindObj.airChu1) mainLj3WindObj.airChu1.visible = false;
       }
+      if (mainFanLjDtObj) {
+        // if (mainFanLjDtObj.airChu2) mainFanLjDtObj.airChu2.visible = false;
+        // if (mainFanLjDtObj.airJin1) mainFanLjDtObj.airJin1.visible = false;
+        // if (mainFanLjDtObj.airJin2) mainFanLjDtObj.airJin2.visible = false;
+        // if (mainFanLjDtObj.airChu1) mainFanLjDtObj.airChu1.visible = false;
+      }
     });
     startAnimation();
   });

src/views/vent/monitorManager/mainFanMonitor/mainWind.lidt.threejs.ts

@@ -0,0 +1,199 @@
+import * as THREE from 'three';
+import ArrowFlow from '/@/views/vent/comment/threejs/ArrowFlow';
+import Smoke from '/@/views/vent/comment/threejs/Smoke';
+
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+
+class mainWindLjDt {
+  model;
+  modelName = 'main';
+  group: THREE.Group | null = null; // 主通风机场景
+
+  /** 进气箭头，这里指风机吸入气体 */
+  airIn: ArrowFlow | null = null;
+  /** 出气箭头，这里指风机排出气体 */
+  airOut: ArrowFlow | null = null;
+  /** 烟雾粒子，配合风机吸入气体时使用 */
+  smokeIn: Smoke | null = null;
+  /** 烟雾粒子，配合风机排出气体时使用 */
+  smokeOut: Smoke | null = null;
+
+  constructor(model) {
+    this.model = model;
+  }
+  // 添加 cssObject
+  addCssText() {
+    if (!this.group) return;
+  }
+
+  clearCssText() {}
+
+  /* 更新动画 */
+  render() {
+    if (!this.model) return;
+  }
+
+  /* 点击风窗，风窗全屏 */
+  mousedownModel() {}
+
+  mouseUpModel() {}
+
+  /**
+   * 播放气流动画
+   * @param FanStart // 风机启动
+   * @param FanForward // 风机正转排风
+   * @param FanReverse // 风机反转吸风
+   */
+  async playSmoke(FanStart, FanForward, FanReverse) {
+    if (!this.model) return;
+
+    if (!FanStart) {
+      // 风机停机
+      this.stopSmoke();
+    } else if (FanForward && !FanReverse) {
+      // 确认风机正转
+      this.airOut?.showElement();
+      if (!this.smokeOut?.frameId) {
+        // 如果没在播放再call这个方法
+        this.smokeOut?.startSmoke();
+      }
+    } else if (FanReverse && !FanForward) {
+      // 确认风机反转
+      this.airIn?.showElement();
+      if (!this.smokeIn?.frameId) {
+        // 如果没在播放再call这个方法
+        this.smokeIn?.startSmoke();
+      }
+    } else {
+      // 默认风机正转
+      this.airOut?.showElement();
+      if (!this.smokeOut?.frameId) {
+        // 如果没在播放再call这个方法
+        this.smokeOut?.startSmoke();
+      }
+    }
+  }
+  stopSmoke() {
+    this.airIn?.hideElement();
+    this.airOut?.hideElement();
+
+    this.smokeIn?.stopSmoke();
+    this.smokeOut?.stopSmoke();
+  }
+
+  /* 初始化 进气出气箭头、烟雾元素  */
+  initAnimationElements() {
+    const arrows = [
+      {
+        texturePath: '/model/img/greenArrow.png',
+        id: 'airIn',
+        offsetY: 0,
+        repeatX: 5,
+        rotation: Math.PI,
+        points: [new THREE.Vector3(21.07, 10.441, -5.816), new THREE.Vector3(8.693, 10.441, -5.816)],
+      },
+      {
+        texturePath: '/model/img/greenArrow.png',
+        id: 'airOut',
+        offsetY: 0,
+        repeatX: 5,
+        rotation: 0,
+        points: [new THREE.Vector3(8.693, 10.441, -5.816), new THREE.Vector3(21.07, 10.441, -5.816)],
+      },
+    ];
+
+    arrows.forEach(({ points, id, texturePath, repeatX, rotation }) => {
+      // 初始化箭头，偏移设置为0.25可以让贴图在管道上方
+      const arrow = new ArrowFlow(texturePath as any, {
+        repeatX,
+        repeatY: 1,
+        rotation,
+      });
+      // 这里开启动画后隐藏元素可以让后续动画控制仅调用 show/hideElement 即可
+      arrow.startAnimation();
+      arrow.hideElement();
+      const width = Math.abs(points[1].x - points[0].x);
+
+      // 添加几何，几何为一个二维简单几何
+      const geometry = new THREE.PlaneGeometry(width, 2);
+      const mesh = new THREE.Mesh(geometry, arrow);
+      mesh.position.set(8.693 + width / 2, 10.441, -5.816);
+      this[id] = arrow;
+      this.group?.add(mesh);
+    });
+
+    this.smokeOut = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.4, 1.8, 100);
+    this.smokeOut.setPath([
+      // {
+      //   path0: new THREE.Vector3(26.956, 7.138, -5.816),
+      //   path1: new THREE.Vector3(26.956, 17.016, -5.816),
+      //   isSpread: false,
+      //   spreadDirection: 0,
+      // },
+      {
+        path0: new THREE.Vector3(26.956, 10.016, -5.816),
+        path1: new THREE.Vector3(26.956, 26.913, -5.816),
+        isSpread: true,
+        spreadDirection: 1, // 1是由小变大(出)，-1是由大变小（进）
+      },
+    ]);
+    this.smokeIn = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.4, 1.8, 100);
+    this.smokeIn.setPath([
+      // {
+      //   path0: new THREE.Vector3(26.956, 7.138, -5.816),
+      //   path1: new THREE.Vector3(26.956, 17.016, -5.816),
+      //   isSpread: false,
+      //   spreadDirection: 0,
+      // },
+      {
+        path0: new THREE.Vector3(26.956, 26.913, -5.816),
+        path1: new THREE.Vector3(26.956, 10.016, -5.816),
+        isSpread: true,
+        spreadDirection: -1, // 1是由小变大(出)，-1是由大变小（进）
+      },
+    ]);
+
+    this.smokeIn?.setPoints().then(() => {
+      this.group?.add(this.smokeIn?.points);
+    });
+    this.smokeOut?.setPoints().then(() => {
+      this.group?.add(this.smokeOut?.points);
+    });
+  }
+
+  mountedThree() {
+    return new Promise(async (resolve) => {
+      this.model.setGLTFModel(['mainFanLjDt'], this.group).then(async (gltf) => {
+        this.group = gltf[0];
+
+        this.group?.position.set(4, 20.6, 22);
+        this.group?.scale.set(1.2, 1.2, 1.2);
+        await this.initAnimationElements();
+        resolve(null);
+      });
+    });
+  }
+
+  destroy() {
+    this.model = undefined;
+    this.group = null;
+  }
+
+  resetSmokeParam() {}
+
+  openDevice() {}
+
+  closeDevice() {}
+
+  lookMotor() {}
+
+  openOrCloseValve() {}
+
+  startGearAnimation() {}
+
+  setSmokeDirection() {}
+}
+
+export default mainWindLjDt;