gas-injection/src/views/vent/monitorManager/gasPumpMonitor/gasPump.threejs.under.ts

import * as THREE from 'three';
import { CSS3DObject, CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import { modelMonitorTags } from './gasPump.data';
import ArrowFlow from '../../comment/threejs/ArrowFlow';
// import * as dat from 'dat.gui';
// const gui = new dat.GUI();
// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';

class gasPumpUnder {
  model;
  modelName = 'gas-pump-underground';
  group: THREE.Object3D | null = null;

  /** 进气管道动画，指总进气连接左边泵的那条 */
  airInA: ArrowFlow | null = null;
  /** 进气管道动画，指总进气连接右边泵的那条  */
  airInB: ArrowFlow | null = null;
  /** 进气管道动画，指靠右的那条进气 */
  airInR: ArrowFlow | null = null;
  /** 进气管道动画，指靠左的那条进气 */
  airInL: ArrowFlow | null = null;
  /** 出气管道动画，指总出气连接左边泵的那条 */
  airOutA: ArrowFlow | null = null;
  /** 出气管道动画，指总出气连接右边泵的那条 */
  airOutB: ArrowFlow | null = null;
  /** 出气管道动画，指靠右的那条出气 */
  airOutR: ArrowFlow | null = null;
  /** 出气管道动画，指靠左的那条出气 */
  airOutL: ArrowFlow | null = null;
  /** 进水管道动画，指总进水连接左边泵的那条 */
  waterInA: ArrowFlow | null = null;
  /** 进水管道动画，指总进水连接右边泵的那条 */
  waterInB: 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;
  }

  addLight() {
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(-48, 107, 36);
    this.group?.add(directionalLight);
    directionalLight.target = this.group as THREE.Object3D;
  }

  // addCssText = () => {
  //   if (!this.group) return;
  //   if (!this.group.getObjectByName('text1')) {
  //     const element = document.getElementById('FlowSensor') as HTMLElement;
  //     if (element) {
  //       const parentElement = document.getElementById('gas3DCSS') as HTMLElement;
  //       parentElement.appendChild(element);
  //       const fanLocalCSS3D = new CSS3DObject(element);
  //       fanLocalCSS3D.name = 'text1';
  //       fanLocalCSS3D.scale.set(0.007, 0.007, 0.007);
  //       fanLocalCSS3D.position.set(0, 1.6, 0);
  //       this.group.add(fanLocalCSS3D);
  //     }
  //   }
  // };

  addCssText = () => {
    if (!this.group) return;
    const parentElement = document.getElementById('gas3DCSS') as HTMLElement;
    for (let i = 0; i < modelMonitorTags.length; i++) {
      const tag = modelMonitorTags[i];
      if (!this.group.getObjectByName(tag.domId)) {
        const element = document.getElementById(tag.domId) as HTMLElement;
        if (element) {
          parentElement.appendChild(element);
          const fanLocalCSS3D = new CSS3DSprite(element);
          fanLocalCSS3D.name = tag.domId;
          fanLocalCSS3D.scale.set(0.009, 0.009, 0.009);
          fanLocalCSS3D.position.set(tag.position[0], tag.position[1], tag.position[2]);
          this.group.add(fanLocalCSS3D);
        }
      }
    }
  };

  /** 根据各个泵的状态控制动画 */
  handleAnimation() {
    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();
    }
  }

  clearCssText = () => {
    const fanLocalCSS3D = this.group?.getObjectByName('text1') as THREE.Object3D;
    this.group?.remove(fanLocalCSS3D);
  };

  mountedThree() {
    return new Promise((resolve) => {
      this.model.setGLTFModel([this.modelName]).then((gltf) => {
        this.group = gltf[0];
        if (this.group) {
          // this.group?.scale.set(0.1, 0.1, 0.1);
          // this.group.position.y += 40;
          resolve(null);
          this.addLight();
          this.addArrowFlows();
          this.handleAnimation(); // 流动动画在这里写吧
        }
      });
    });
  }

  destroy() {
    this.model.clearGroup(this.group);
    this.model = null;
    this.group = null;
  }

  /** 添加进气、进水、出气、排水的箭头流线，不负责启动动画 */
  addArrowFlows() {
    const arrows = [
      {
        texturePath: '/model/img/blueArrow.png',
        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,
        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: 'airInR',
        offsetY: 0.5,
        repeatX: 22,
        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),
          new THREE.Vector3(-12.284, 0.962, -0.359),
          new THREE.Vector3(-3.929, 0.942, -0.359),
          new THREE.Vector3(-3.839, 0.942, -0.207),
          new THREE.Vector3(-3.924, 0.942, -0.06),
          new THREE.Vector3(-4.356, 0.942, -0.06),
          new THREE.Vector3(-5.153, 0.942, -0.06),
          new THREE.Vector3(-5.173, 0.725, -0.06),
        ],
      },
      {
        texturePath: '/model/img/blueArrow.png',
        id: 'airInL',
        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: '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.618, -0.08)],
      },
      {
        texturePath: '/model/img/blueArrow.png',
        id: 'airOutR',
        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: 'airOutL',
        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: '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,
        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: 'waterInR',
        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: 'waterInL',
        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: '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,
        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: 'waterOutR',
        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: 'waterOutL',
        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)],
      },
    ];

    arrows.forEach(({ points, id, texturePath, offsetY, repeatX, radius }) => {
      // 初始化箭头，偏移设置为0.25可以让贴图在管道上方
      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.2);

      // 添加几何，这样设置该几何体可以略大于依附的管道，其贴图不会出现被覆盖的现象
      const geometry = new THREE.TubeGeometry(curve, 32, radius, 8, false);
      const mesh = new THREE.Mesh(geometry, arrow);
      this[id] = arrow;
      this.group?.add(mesh);
    });
  }
}
export default gasPumpUnder;