[Wip 0000] 为瓦斯抽采泵（地下）添加流线动画

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

@@ -7,12 +7,6 @@ import gasp from 'gsap';
 export default class ArrowFlow extends THREE.MeshBasicMaterial {
   /** 箭头流材质 */
   texture: THREE.Texture;
-  /** 流线起点 */
-  origin: THREE.Vector3;
-  /** 流线终点 */
-  destiny: THREE.Vector3;
-  /** 流线 */
-  path: THREE.LineCurve3;
   /** 重复次数 */
   repeat: THREE.Vector2;
   /** 图形偏移量 */
@@ -22,8 +16,6 @@ export default class ArrowFlow extends THREE.MeshBasicMaterial {
 
   constructor(
     texturePath: '/model/img/blueArrow.png' | '/model/img/greenArrow.png' | '/model/img/redArrow.png',
-    origin: THREE.Vector3,
-    destiny: THREE.Vector3,
     {
       repeatX = 20,
       repeatY = 1,
@@ -39,10 +31,7 @@ export default class ArrowFlow extends THREE.MeshBasicMaterial {
     t.repeat = new THREE.Vector2(repeatX, repeatY);
     t.offset = new THREE.Vector2(offsetX, offsetY);
     super({ map: t, transparent: true });
-    this.path = new THREE.LineCurve3(origin, destiny);
     this.texture = t;
-    this.origin = origin;
-    this.destiny = destiny;
     this.repeat = t.repeat;
     this.offset = t.offset;
   }

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

@@ -11,6 +11,31 @@ 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;
+  /** 出气管道动画，指靠右的那条出气 */
+  airOutA: ArrowFlow | null = null;
+  /** 出气管道动画，指靠左的那条出气 */
+  airOutB: ArrowFlow | null = null;
+  /** 进水管道动画，指总进水 */
+  waterIn: ArrowFlow | null = null;
+  /** 进水管道动画，指靠右的那条进水 */
+  waterInA: ArrowFlow | null = null;
+  /** 进水管道动画，指靠左的那条进水 */
+  waterInB: ArrowFlow | null = null;
+  /** 排水管道动画，指总排水 */
+  waterOut: ArrowFlow | null = null;
+  /** 排水管道动画，指靠右的那条排水 */
+  waterOutA: ArrowFlow | null = null;
+  /** 排水管道动画，指靠左的那条排水 */
+  waterOutB: ArrowFlow | null = null;
+
   constructor(model) {
     this.model = model;
   }
@@ -57,7 +82,8 @@ class gasPumpUnder {
     }
   };
 
-  initAnimate() {
+  /** 根据各个泵的状态控制动画 */
+  handleAnimation() {
     for (let i = 0; i < modelMonitorTags.length; i++) {
       const tag = modelMonitorTags[i];
       // this.addFlows(tag.path, tag.radius, tag.domId);
@@ -76,10 +102,10 @@ class gasPumpUnder {
         if (this.group) {
           // this.group?.scale.set(0.1, 0.1, 0.1);
           // this.group.position.y += 40;
-          this.initAnimate(); // 流动动画在这里写吧
+          this.handleAnimation(); // 流动动画在这里写吧
           resolve(null);
           this.addLight();
-          this.addFlows();
+          this.addArrowFlows();
         }
       });
     });
@@ -91,28 +117,167 @@ class gasPumpUnder {
     this.group = null;
   }
 
-  // 添加箭头流线
-  addFlows() {
-    const arrowflow = new ArrowFlow('/model/img/blueArrow.png', new THREE.Vector3(-12.284, 0.942, -0.359), new THREE.Vector3(-3.909, 0.942, -0.359));
-    // const t = new THREE.TextureLoader().load('/model/img/blueArrow.png');
-    // t.wrapS = THREE.RepeatWrapping;
-    // t.wrapT = THREE.RepeatWrapping;
-    // t.repeat = new THREE.Vector2(10, 1);
-    // t.offset = new THREE.Vector2(0, 0.5);
-    // const b = new THREE.MeshBasicMaterial({ map: t, transparent: true });
-    // const path = new THREE.LineCurve3(new THREE.Vector3(-12.284, 0.942, -0.359), new THREE.Vector3(-3.909, 0.942, -0.359));
+  /** 添加进气、进水、出气、排水的箭头流线，不负责启动动画 */
+  addArrowFlows() {
+    const arrows = [
+      {
+        texturePath: '/model/img/blueArrow.png',
+        id: 'airIn',
+        offsetY: 0.25,
+        repeatX: 20,
+        radius: 0.09,
+        points: [new THREE.Vector3(-12.284, 0.942, -0.359), new THREE.Vector3(-3.909, 0.942, -0.359)],
+      },
+      {
+        texturePath: '/model/img/blueArrow.png',
+        id: 'airInA',
+        offsetY: 0.5,
+        repeatX: 5,
+        radius: 0.09,
+        points: [
+          new THREE.Vector3(-3.909, 0.942, -0.359),
+          new THREE.Vector3(-3.819, 0.942, -0.207),
+          new THREE.Vector3(-3.924, 0.942, -0.06),
+          new THREE.Vector3(-5.153, 0.942, -0.06),
+          new THREE.Vector3(-5.153, 0.725, -0.06),
+        ],
+      },
+      {
+        texturePath: '/model/img/blueArrow.png',
+        id: 'airInB',
+        offsetY: 0.5,
+        repeatX: 5,
+        radius: 0.09,
+        points: [
+          new THREE.Vector3(-7.276, 0.942, -0.377),
+          new THREE.Vector3(-7.276, 0.942, -0.181),
+          new THREE.Vector3(-7.414, 0.942, -0.063),
+          new THREE.Vector3(-8.78, 0.942, -0.063),
+          new THREE.Vector3(-8.78, 0.725, -0.063),
+        ],
+      },
+      {
+        texturePath: '/model/img/blueArrow.png',
+        id: 'airOut',
+        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)],
+      },
+      {
+        texturePath: '/model/img/blueArrow.png',
+        id: 'airOutA',
+        offsetY: 0.75,
+        repeatX: 5,
+        radius: 0.09,
+        points: [
+          new THREE.Vector3(-5.628, 0.606, -0.08),
+          new THREE.Vector3(-5.628, 0.788, -0.08),
+          new THREE.Vector3(-5.732, 0.916, -0.08),
+          new THREE.Vector3(-5.962, 0.916, -0.08),
+          new THREE.Vector3(-6.067, 1.073, -0.08),
+          new THREE.Vector3(-6.067, 1.618, -0.08),
+        ],
+      },
+      {
+        texturePath: '/model/img/blueArrow.png',
+        id: 'airOutB',
+        offsetY: 0.75,
+        repeatX: 5,
+        radius: 0.09,
+        points: [
+          new THREE.Vector3(-9.257, 0.606, -0.069),
+          new THREE.Vector3(-9.257, 0.819, -0.069),
+          new THREE.Vector3(-9.388, 0.916, -0.069),
+          new THREE.Vector3(-9.593, 0.916, -0.069),
+          new THREE.Vector3(-9.697, 1.073, -0.069),
+          new THREE.Vector3(-9.697, 1.618, -0.069),
+        ],
+      },
+      {
+        texturePath: '/model/img/redArrow.png',
+        id: 'waterIn',
+        offsetY: 0.25,
+        repeatX: 20,
+        radius: 0.04,
+        points: [new THREE.Vector3(-10.808, 0.124, 0.808), new THREE.Vector3(-5.374, 0.124, 0.808)],
+      },
+      {
+        texturePath: '/model/img/redArrow.png',
+        id: 'waterInA',
+        offsetY: 0.5,
+        repeatX: 5,
+        radius: 0.04,
+        points: [
+          new THREE.Vector3(-5.374, 0.124, 0.808),
+          new THREE.Vector3(-5.374, 0.124, 0.019),
+          new THREE.Vector3(-5.368, 0.215, 0.001),
+          new THREE.Vector3(-5.204, 0.219, 0.001),
+        ],
+      },
+      {
+        texturePath: '/model/img/redArrow.png',
+        id: 'waterInB',
+        offsetY: 0.5,
+        repeatX: 5,
+        radius: 0.04,
+        points: [
+          new THREE.Vector3(-9.008, 0.124, 0.808),
+          new THREE.Vector3(-9.008, 0.124, 0.019),
+          new THREE.Vector3(-9.003, 0.215, 0.001),
+          new THREE.Vector3(-8.839, 0.219, 0.001),
+        ],
+      },
+      {
+        texturePath: '/model/img/redArrow.png',
+        id: 'waterOut',
+        offsetY: 0.75,
+        repeatX: 20,
+        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: 'waterOutA',
+        offsetY: 0.5,
+        repeatX: 2,
+        radius: 0.04,
+        points: [new THREE.Vector3(-5.614, 0.175, 0.238), new THREE.Vector3(-5.614, 0.175, 0.609)],
+      },
+      {
+        texturePath: '/model/img/redArrow.png',
+        id: 'waterOutB',
+        offsetY: 0.5,
+        repeatX: 2,
+        radius: 0.04,
+        points: [new THREE.Vector3(-9.268, 0.175, 0.237), new THREE.Vector3(-9.268, 0.175, 0.593)],
+      },
+    ];
 
-    // const a = this.group?.getObjectByName('dian');
-    // const b = this.group?.getObjectByName('dian1');
-    // a?.getWorldPosition(origin);
-    // b?.getWorldPosition(dest);
+    arrows.forEach(({ points, id, texturePath, offsetY, repeatX, radius }) => {
+      // 初始化箭头，偏移设置为0.25可以让贴图在管道上方
+      this[id] = new ArrowFlow(texturePath as any, {
+        offsetY,
+        repeatX,
+      });
+      // 曲线，张力设置为 0 可以让曲线不使用平滑过渡效果从而贴合管道
+      const curve = new THREE.CatmullRomCurve3(points, false, 'catmullrom', 0);
 
-    const geometry = new THREE.TubeGeometry(arrowflow.path, 1, 0.08, 8, false);
-    const mesh = new THREE.Mesh(geometry, arrowflow);
+      // 添加几何，这样设置该几何体可以略大于依附的管道，其贴图不会出现被覆盖的现象
+      const geometry = new THREE.TubeGeometry(curve, 32, radius, 8, false);
+      const mesh = new THREE.Mesh(geometry, this[id]);
+      this.group?.add(mesh);
+    });
 
-    arrowflow.startAnimation();
-    mesh.name = 'flow1';
-    this.group?.add(mesh);
+    this.airInA?.startAnimation();
+    this.airInB?.startAnimation();
+    this.airOutA?.startAnimation();
+    this.airOutB?.startAnimation();
   }
 }
 export default gasPumpUnder;