[Feat 0000] 瓦斯抽采泵（地下）箭头流线动画及动画控制功能初步实现

src/views/vent/comment/threejs/ArrowFlow.ts

@@ -61,8 +61,25 @@ export default class ArrowFlow extends THREE.MeshBasicMaterial {
     this.tween.pause();
   }
 
+  resumeAnimation() {
+    if (!this.tween) return;
+    this.tween.resume();
+  }
+
   stopAnimation() {
     if (!this.tween) return;
     this.tween.kill();
   }
+
+  hideElement() {
+    this.visible = false;
+    if (!this.tween) return;
+    this.pauseAnimation();
+  }
+
+  showElement() {
+    this.visible = true;
+    if (!this.tween) return;
+    this.resumeAnimation();
+  }
 }

src/views/vent/monitorManager/gasPumpMonitor/gasPump.threejs.under.ts

@@ -11,30 +11,38 @@ class gasPumpUnder {
   modelName = 'gas-pump-underground';
   group: THREE.Object3D | null = null;
 
-  /** 进气管道动画，指总进气 */
-  airIn: ArrowFlow | null = null;
-  /** 进气管道动画，指靠右的那条进气 */
+  /** 进气管道动画，指总进气连接左边泵的那条 */
   airInA: ArrowFlow | null = null;
-  /** 进气管道动画，指靠左的那条进气 */
+  /** 进气管道动画，指总进气连接右边泵的那条  */
   airInB: ArrowFlow | null = null;
-  /** 出气管道动画，指总出气 */
-  airOut: ArrowFlow | null = null;
-  /** 出气管道动画，指靠右的那条出气 */
+  /** 进气管道动画，指靠右的那条进气 */
+  airInR: ArrowFlow | null = null;
+  /** 进气管道动画，指靠左的那条进气 */
+  airInL: ArrowFlow | null = null;
+  /** 出气管道动画，指总出气连接左边泵的那条 */
   airOutA: ArrowFlow | null = null;
-  /** 出气管道动画，指靠左的那条出气 */
+  /** 出气管道动画，指总出气连接右边泵的那条 */
   airOutB: ArrowFlow | null = null;
-  /** 进水管道动画，指总进水 */
-  waterIn: ArrowFlow | null = null;
-  /** 进水管道动画，指靠右的那条进水 */
+  /** 出气管道动画，指靠右的那条出气 */
+  airOutR: ArrowFlow | null = null;
+  /** 出气管道动画，指靠左的那条出气 */
+  airOutL: ArrowFlow | null = null;
+  /** 进水管道动画，指总进水连接左边泵的那条 */
   waterInA: ArrowFlow | null = null;
-  /** 进水管道动画，指靠左的那条进水 */
+  /** 进水管道动画，指总进水连接右边泵的那条 */
   waterInB: ArrowFlow | null = null;
-  /** 排水管道动画，指总排水 */
-  waterOut: ArrowFlow | null = null;
-  /** 排水管道动画，指靠右的那条排水 */
+  /** 进水管道动画，指靠右的那条进水 */
+  waterInR: ArrowFlow | null = null;
+  /** 进水管道动画，指靠左的那条进水 */
+  waterInL: ArrowFlow | null = null;
+  /** 排水管道动画，指总排水连接左边泵的那条 */
   waterOutA: ArrowFlow | null = null;
-  /** 排水管道动画，指靠左的那条排水 */
+  /** 排水管道动画，指总排水连接右边泵的那条 */
   waterOutB: ArrowFlow | null = null;
+  /** 排水管道动画，指靠右的那条排水 */
+  waterOutR: ArrowFlow | null = null;
+  /** 排水管道动画，指靠左的那条排水 */
+  waterOutL: ArrowFlow | null = null;
 
   constructor(model) {
     this.model = model;
@@ -84,9 +92,84 @@ class gasPumpUnder {
 
   /** 根据各个泵的状态控制动画 */
   handleAnimation() {
-    for (let i = 0; i < modelMonitorTags.length; i++) {
-      const tag = modelMonitorTags[i];
-      // this.addFlows(tag.path, tag.radius, tag.domId);
+    this.airInA?.hideElement();
+    this.airInB?.hideElement();
+    this.airInR?.hideElement();
+    this.airInL?.hideElement();
+    this.airOutA?.hideElement();
+    this.airOutB?.hideElement();
+    this.airOutR?.hideElement();
+    this.airOutL?.hideElement();
+    this.waterInA?.hideElement();
+    this.waterInB?.hideElement();
+    this.waterInR?.hideElement();
+    this.waterInL?.hideElement();
+    this.waterOutA?.hideElement();
+    this.waterOutB?.hideElement();
+    this.waterOutR?.hideElement();
+    this.waterOutL?.hideElement();
+    // 进气动画控制
+    const jqf1Open = modelMonitorTags.find((e) => e.domId === 'jqf1')?.value === '1';
+    const jqf2Open = modelMonitorTags.find((e) => e.domId === 'jqf2')?.value === '1';
+
+    if (jqf1Open && jqf2Open) {
+      this.airInB?.hideElement();
+      this.airInR?.showElement();
+      this.airInL?.showElement();
+    } else if (jqf1Open) {
+      this.airInB?.showElement();
+      this.airInR?.showElement();
+    } else if (jqf2Open) {
+      this.airInA?.showElement();
+      this.airInL?.showElement();
+    }
+
+    // 出气动画控制
+    const cqf1Open = modelMonitorTags.find((e) => e.domId === 'cqf1')?.value === '1';
+    const cqf2Open = modelMonitorTags.find((e) => e.domId === 'cqf2')?.value === '1';
+
+    if (cqf1Open && cqf2Open) {
+      this.airOutB?.showElement();
+      this.airOutR?.showElement();
+      this.airOutL?.showElement();
+    } else if (cqf1Open) {
+      this.airOutB?.showElement();
+      this.airOutR?.showElement();
+    } else if (cqf2Open) {
+      this.airOutA?.showElement();
+      this.airOutL?.showElement();
+    }
+
+    // 进水动画控制
+    const jsf1Open = modelMonitorTags.find((e) => e.domId === 'jsf1')?.value === '1';
+    const jsf2Open = modelMonitorTags.find((e) => e.domId === 'jsf2')?.value === '1';
+
+    if (jsf1Open && jsf2Open) {
+      this.waterInB?.showElement();
+      this.waterInR?.showElement();
+      this.waterInL?.showElement();
+    } else if (jsf1Open) {
+      this.waterInB?.showElement();
+      this.waterInR?.showElement();
+    } else if (jsf2Open) {
+      this.waterInA?.showElement();
+      this.waterInL?.showElement();
+    }
+
+    // 出水动画控制
+    const csf1Open = modelMonitorTags.find((e) => e.domId === 'csf1')?.value === '1';
+    const csf2Open = modelMonitorTags.find((e) => e.domId === 'csf2')?.value === '1';
+
+    if (csf1Open && csf2Open) {
+      this.waterOutB?.showElement();
+      this.waterOutR?.showElement();
+      this.waterOutL?.showElement();
+    } else if (csf1Open) {
+      this.waterOutB?.showElement();
+      this.waterOutR?.showElement();
+    } else if (csf2Open) {
+      this.waterOutA?.showElement();
+      this.waterOutL?.showElement();
     }
   }
 
@@ -102,10 +185,10 @@ class gasPumpUnder {
         if (this.group) {
           // this.group?.scale.set(0.1, 0.1, 0.1);
           // this.group.position.y += 40;
-          this.handleAnimation(); // 流动动画在这里写吧
           resolve(null);
           this.addLight();
           this.addArrowFlows();
+          this.handleAnimation(); // 流动动画在这里写吧
         }
       });
     });
@@ -122,7 +205,15 @@ class gasPumpUnder {
     const arrows = [
       {
         texturePath: '/model/img/blueArrow.png',
-        id: 'airIn',
+        id: 'airInA',
+        offsetY: 0.5,
+        repeatX: 10,
+        radius: 0.09,
+        points: [new THREE.Vector3(-12.284, 0.942, -0.359), new THREE.Vector3(-7.276, 0.942, -0.377)],
+      },
+      {
+        texturePath: '/model/img/blueArrow.png',
+        id: 'airInB',
         offsetY: 0.25,
         repeatX: 20,
         radius: 0.09,
@@ -130,7 +221,7 @@ class gasPumpUnder {
       },
       {
         texturePath: '/model/img/blueArrow.png',
-        id: 'airInA',
+        id: 'airInR',
         offsetY: 0.5,
         repeatX: 5,
         radius: 0.09,
@@ -144,7 +235,7 @@ class gasPumpUnder {
       },
       {
         texturePath: '/model/img/blueArrow.png',
-        id: 'airInB',
+        id: 'airInL',
         offsetY: 0.5,
         repeatX: 5,
         radius: 0.09,
@@ -158,15 +249,23 @@ class gasPumpUnder {
       },
       {
         texturePath: '/model/img/blueArrow.png',
-        id: 'airOut',
+        id: 'airOutA',
+        offsetY: 0.5,
+        repeatX: 10,
+        radius: 0.09,
+        points: [new THREE.Vector3(-9.697, 1.618, -0.069), new THREE.Vector3(-12.284, 1.618, -0.08)],
+      },
+      {
+        texturePath: '/model/img/blueArrow.png',
+        id: 'airOutB',
         offsetY: 0.75,
         repeatX: 20,
         radius: 0.09,
-        points: [new THREE.Vector3(-6.197, 1.619, -0.08), new THREE.Vector3(-12.284, 1.619, -0.08)],
+        points: [new THREE.Vector3(-6.197, 1.619, -0.08), new THREE.Vector3(-12.284, 1.618, -0.08)],
       },
       {
         texturePath: '/model/img/blueArrow.png',
-        id: 'airOutA',
+        id: 'airOutR',
         offsetY: 0.75,
         repeatX: 5,
         radius: 0.09,
@@ -181,7 +280,7 @@ class gasPumpUnder {
       },
       {
         texturePath: '/model/img/blueArrow.png',
-        id: 'airOutB',
+        id: 'airOutL',
         offsetY: 0.75,
         repeatX: 5,
         radius: 0.09,
@@ -196,7 +295,15 @@ class gasPumpUnder {
       },
       {
         texturePath: '/model/img/redArrow.png',
-        id: 'waterIn',
+        id: 'waterInA',
+        offsetY: 0.25,
+        repeatX: 10,
+        radius: 0.04,
+        points: [new THREE.Vector3(-10.808, 0.124, 0.808), new THREE.Vector3(-9.008, 0.124, 0.808)],
+      },
+      {
+        texturePath: '/model/img/redArrow.png',
+        id: 'waterInB',
         offsetY: 0.25,
         repeatX: 20,
         radius: 0.04,
@@ -204,7 +311,7 @@ class gasPumpUnder {
       },
       {
         texturePath: '/model/img/redArrow.png',
-        id: 'waterInA',
+        id: 'waterInR',
         offsetY: 0.5,
         repeatX: 5,
         radius: 0.04,
@@ -217,7 +324,7 @@ class gasPumpUnder {
       },
       {
         texturePath: '/model/img/redArrow.png',
-        id: 'waterInB',
+        id: 'waterInL',
         offsetY: 0.5,
         repeatX: 5,
         radius: 0.04,
@@ -230,7 +337,20 @@ class gasPumpUnder {
       },
       {
         texturePath: '/model/img/redArrow.png',
-        id: 'waterOut',
+        id: 'waterOutA',
+        offsetY: 0.5,
+        repeatX: 10,
+        radius: 0.04,
+        points: [
+          // new THREE.Vector3(-5.614, 0.175, 0.609),
+          new THREE.Vector3(-9.725, 0.175, 0.609),
+          new THREE.Vector3(-9.777, 0.175, 0.007),
+          new THREE.Vector3(-10.843, 0.175, -0.04),
+        ],
+      },
+      {
+        texturePath: '/model/img/redArrow.png',
+        id: 'waterOutB',
         offsetY: 0.75,
         repeatX: 20,
         radius: 0.04,
@@ -243,7 +363,7 @@ class gasPumpUnder {
       },
       {
         texturePath: '/model/img/redArrow.png',
-        id: 'waterOutA',
+        id: 'waterOutR',
         offsetY: 0.5,
         repeatX: 2,
         radius: 0.04,
@@ -251,7 +371,7 @@ class gasPumpUnder {
       },
       {
         texturePath: '/model/img/redArrow.png',
-        id: 'waterOutB',
+        id: 'waterOutL',
         offsetY: 0.5,
         repeatX: 2,
         radius: 0.04,
@@ -261,23 +381,22 @@ class gasPumpUnder {
 
     arrows.forEach(({ points, id, texturePath, offsetY, repeatX, radius }) => {
       // 初始化箭头，偏移设置为0.25可以让贴图在管道上方
-      this[id] = new ArrowFlow(texturePath as any, {
+      const arrow = new ArrowFlow(texturePath as any, {
         offsetY,
         repeatX,
       });
+      // 这里开启动画后隐藏元素可以让后续动画控制仅调用 show/hideElement 即可
+      arrow.startAnimation();
+      arrow.hideElement();
       // 曲线，张力设置为 0 可以让曲线不使用平滑过渡效果从而贴合管道
       const curve = new THREE.CatmullRomCurve3(points, false, 'catmullrom', 0);
 
       // 添加几何，这样设置该几何体可以略大于依附的管道，其贴图不会出现被覆盖的现象
       const geometry = new THREE.TubeGeometry(curve, 32, radius, 8, false);
-      const mesh = new THREE.Mesh(geometry, this[id]);
+      const mesh = new THREE.Mesh(geometry, arrow);
+      this[id] = arrow;
       this.group?.add(mesh);
     });
-
-    this.airInA?.startAnimation();
-    this.airInB?.startAnimation();
-    this.airOutA?.startAnimation();
-    this.airOutB?.startAnimation();
   }
 }
 export default gasPumpUnder;