mky-vent-base/src/views/vent/monitorManager/gateMonitor/gate.threejs.window.ts

import * as THREE from 'three';
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
import gsap from 'gsap';
import { drawHot } from '/@/utils/threejs/util';
import { useAppStore } from '/@/store/modules/app';

// import * as dat from 'dat.gui';
// const gui = new dat.GUI();
// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';

class FmDc {
  modelName = 'fmDc';
  model; //
  group;
  isLRAnimation = true; // 是否开启左右摇摆动画
  direction = 1; // 摇摆方向
  animationTimer: NodeJS.Timeout | null = null; // 摇摆开启定时器
  player1;
  player2;
  deviceDetailCSS3D;
  playerStartClickTime1 = new Date().getTime();
  playerStartClickTime2 = new Date().getTime();

  fmClock = new THREE.Clock();
  mixers: THREE.AnimationMixer | undefined;
  appStore = useAppStore();

  // backLeftDamperOpenMesh;
  // backLeftDamperClosedMesh;
  // frontLeftDamperOpenMesh;
  // frontLeftDamperClosedMesh;
  // backRightDamperOpenMesh;
  // backRightDamperClosedMesh;
  // frontRightDamperOpenMesh;
  // frontRightDamperClosedMesh;

  clipActionArr = {
    frontDoor: null as unknown as THREE.AnimationAction,
    backDoor: null as unknown as THREE.AnimationAction,
  };
  windowsActionArr = {
    frontLeftWindow: <THREE.Mesh[]>[],
    backLeftWindow: <THREE.Mesh[]>[],
    frontRightWindow: <THREE.Mesh[]>[],
    backRightWindow: <THREE.Mesh[]>[],
  };

  constructor(model) {
    this.model = model;
  }

  addLight() {}
  // 重置摄像头
  resetCamera() {
    this.model.camera.far = 274;
    this.model.orbitControls?.update();
    this.model.camera.updateProjectionMatrix();
  }
  // 设置模型位置
  setModalPosition() {
    this.group?.scale.set(22, 22, 22);
    this.group?.position.set(-20, 20, 9);
  }

  /* 添加监控数据 */
  addMonitorText(selectData) {
    if (!this.group) {
      return;
    }
    const screenDownText = VENT_PARAM['modalText']
      ? VENT_PARAM['modalText']
      : History_Type['type'] == 'remote'
      ? `国能神东煤炭集团监制`
      : '煤炭科学技术研究院有限公司研制';

    const screenDownTextX = 80 - (screenDownText.length - 10) * 6;

    const textArr = [
      {
        text: `远程控制自动风门`,
        font: 'normal 30px Arial',
        color: '#00FF00',
        strokeStyle: '#007400',
        x: 120,
        y: 100,
      },
      {
        text: `净通行高度(m):`,
        font: 'normal 30px Arial',
        color: '#00FF00',
        strokeStyle: '#007400',
        x: 0,
        y: 155,
      },
      {
        text: `${selectData.fclearheight ? selectData.fclearheight : '-'}`,
        font: 'normal 30px Arial',
        color: '#00FF00',
        strokeStyle: '#007400',
        x: 295,
        y: 155,
      },
      {
        text: `净通行宽度(m): `,
        font: 'normal 30px Arial',
        color: '#00FF00',
        strokeStyle: '#007400',
        x: 0,
        y: 215,
      },
      {
        text: ` ${selectData.fclearwidth ? selectData.fclearwidth : '-'}`,
        font: 'normal 30px Arial',
        color: '#00FF00',
        strokeStyle: '#007400',
        x: 290,
        y: 215,
      },
      {
        text: `故障诊断:`,
        font: 'normal 30px Arial',
        color: '#00FF00',
        strokeStyle: '#007400',
        x: 0,
        y: 275,
      },
      {
        text: `${selectData.warnLevel_str ? selectData.warnLevel_str : '-'}`,
        font: 'normal 30px Arial',
        color: '#00FF00',
        strokeStyle: '#007400',
        x: 290,
        y: 275,
      },
      {
        text: screenDownText,
        font: 'normal 28px Arial',
        color: '#00FF00',
        strokeStyle: '#007400',
        x: screenDownTextX,
        y: 320,
      },
    ];
    //
    getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
      textMap.colorSpace = THREE.SRGBColorSpace;
      const textMaterial = new THREE.MeshBasicMaterial({
        // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
        map: textMap, // 设置纹理贴图
        transparent: true,
        side: THREE.FrontSide, // 这里是双面渲染的意思
      });
      textMaterial.blending = THREE.CustomBlending;
      const monitorPlane = this.group.getObjectByName('monitorText');
      if (monitorPlane) {
        monitorPlane.material = textMaterial;
      } else {
        const planeGeometry = new THREE.PlaneGeometry(526, 346); // 平面3维几何体PlaneGeometry
        const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
        planeMesh.name = 'monitorText';
        planeMesh.scale.set(0.002, 0.002, 0.002);
        planeMesh.position.set(4.025, 0.67, -0.27);
        this.group.add(planeMesh);
      }
      textMap.dispose();
    });
  }

  /** 添加热点 */
  drawHots() {
    const hotPositions = [
      { x: -0.37, y: 0.26, z: -0.32 },
      { x: 0.28, y: -0.2, z: -0.43 },
      { x: 0.55, y: -0.22, z: -0.38 },
    ];
    for (let i = 0; i < 3; i++) {
      const hotPoint = drawHot(0.1);
      const position = hotPositions[i];
      hotPoint.scale.set(0.1, 0.1, 0.1);
      hotPoint.position.set(position.x, position.y, position.z);
      hotPoint.name = 'hotPoint' + i;
      this.group?.add(hotPoint);
    }
  }

  /* 风门动画 */
  render() {
    if (!this.model) {
      return;
    }

    if (this.mixers && this.fmClock.running) {
      this.mixers.update(2);
    }
  }

  /* 点击风窗，风窗全屏 */
  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
    if (this.animationTimer) {
      clearTimeout(this.animationTimer);
      this.animationTimer = null;
    }
  }

  mouseUpModel() {}

  /* 提取风门序列帧，初始化前后门动画 */
  initAnimation() {
    const fmGroup = this.group?.getObjectByName('fm-window');
    if (fmGroup) {
      const tracks = fmGroup.animations[0].tracks;
      const fontTracks: any[] = [],
        backTracks: any[] = [];
      for (let i = 0; i < tracks.length; i++) {
        const track = tracks[i];
        if (track.name.includes('Men_1') || track.name.includes('Men_2')) {
          fontTracks.push(track);
        } else if (track.name.includes('Men_3') || track.name.includes('Men_4')) {
          backTracks.push(track);
        }
      }
      const parentGroup = fmGroup.getObjectByName('QiDongTiaoJieFengMen_1');
      // const frontGroup = parentGroup.getObjectByName('FengMen2');
      // const backGroup = parentGroup.getObjectByName('FengMen1');
      this.mixers = new THREE.AnimationMixer(parentGroup);

      const frontDoor = new THREE.AnimationClip('frontDoor', 2.5, fontTracks);
      const frontClipAction = this.mixers.clipAction(frontDoor, parentGroup);
      frontClipAction.clampWhenFinished = true;
      frontClipAction.loop = THREE.LoopOnce;
      this.clipActionArr.frontDoor = frontClipAction;

      const backDoor = new THREE.AnimationClip('backDoor', 2.5, backTracks);
      const backClipAction = this.mixers.clipAction(backDoor, parentGroup);
      backClipAction.clampWhenFinished = true;
      backClipAction.loop = THREE.LoopOnce;
      this.clipActionArr.backDoor = backClipAction;
    }
    // 编写风窗
  }
  /* 提取风门序列帧，初始化前后门动画 */
  initWindowAnimation() {
    const meshArr01: THREE.Object3D[] = []; //front left
    const meshArr02: THREE.Object3D[] = []; //front right
    const meshArr03: THREE.Object3D[] = []; //back left
    const meshArr04: THREE.Object3D[] = []; //back right
    const windowGroup = new THREE.Group();
    windowGroup.name = 'hiddenGroup';
    const fmGroup = this.group?.getObjectByName('fm-window');
    const parentGroup = fmGroup.getObjectByName('QiDongTiaoJieFengMen_1');
    const frontGroup = parentGroup.getObjectByName('FengMen_1');
    const backGroup = parentGroup.getObjectByName('FengMen_2');
    const frontLeftObj = frontGroup.getObjectByName('Men_2').getObjectByName('shanye_2');
    const frontRightObj = frontGroup.getObjectByName('Men_1').getObjectByName('shanye_1');
    const backLeftObj = backGroup.getObjectByName('Men_4').getObjectByName('shanye_4');
    const backRightObj = backGroup.getObjectByName('Men_3').getObjectByName('shanye_3');
    frontLeftObj.traverse((obj) => {
      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
        obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
        meshArr01.push(obj);
      }
    });
    frontRightObj.traverse((obj) => {
      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
        obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
        meshArr02.push(obj);
      }
    });
    backLeftObj.traverse((obj) => {
      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
        obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
        meshArr03.push(obj);
      }
    });
    backRightObj.traverse((obj) => {
      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
        obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
        meshArr04.push(obj);
      }
    });

    this.windowsActionArr.frontLeftWindow = meshArr01;
    this.windowsActionArr.frontRightWindow = meshArr02;
    this.windowsActionArr.backLeftWindow = meshArr03;
    this.windowsActionArr.backRightWindow = meshArr04;
    this.group?.add(windowGroup);
  }

  deviceDetailCard(position = { x: 0, y: 0, z: 0 }) {
    const element = document.getElementById('deviceCard') as HTMLElement;
    if (element) {
      this.deviceDetailCSS3D = new CSS2DObject(element);
      this.deviceDetailCSS3D.name = 'deviceCard';
      this.deviceDetailCSS3D.position.set(position.x, position.y, position.z);
      this.deviceDetailCSS3D.visible = false;
      // this.model.scene.add(this.deviceDetailCSS3D);
      this.group.add(this.deviceDetailCSS3D);
    }
  }

  // 播放动画
  play(handlerState, timeScale = 0.01) {
    let handler = () => {};
    if (this.clipActionArr.frontDoor && this.clipActionArr.backDoor) {
      switch (handlerState) {
        case 1: // 打开前门
          handler = () => {
            this.clipActionArr.frontDoor.paused = true;
            this.clipActionArr.frontDoor.reset();
            this.clipActionArr.frontDoor.time = 0;
            this.clipActionArr.frontDoor.timeScale = timeScale;
            // this.clipActionArr.frontDoor.clampWhenFinished = true;
            this.clipActionArr.frontDoor.play();
            this.fmClock.start();

            // 显示打开前门文字
            if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = true;
            if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = false;
          };
          break;
        case 2: // 关闭前门
          handler = () => {
            this.clipActionArr.frontDoor.paused = true;
            this.clipActionArr.frontDoor.reset(); //
            this.clipActionArr.frontDoor.time = 2.5;
            this.clipActionArr.frontDoor.timeScale = -timeScale;
            // this.clipActionArr.frontDoor.clampWhenFinished = true;
            this.clipActionArr.frontDoor.play();
            this.fmClock.start();

            if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = false;
            if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = true;
          };
          break;
        case 3: // 打开后门
          handler = () => {
            this.clipActionArr.backDoor.paused = true;
            this.clipActionArr.backDoor.reset();
            this.clipActionArr.backDoor.time = 0;
            this.clipActionArr.backDoor.timeScale = timeScale;
            // this.clipActionArr.backDoor.clampWhenFinished = true;
            this.clipActionArr.backDoor.play();
            this.fmClock.start();

            if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = true;
            if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = false;
          };
          break;
        case 4: // 关闭后门
          handler = () => {
            this.clipActionArr.backDoor.paused = true;
            this.clipActionArr.backDoor.reset();
            this.clipActionArr.backDoor.time = 2.5;
            this.clipActionArr.backDoor.timeScale = -timeScale;
            // this.clipActionArr.backDoor.clampWhenFinished = true;
            this.clipActionArr.backDoor.play();
            this.fmClock.start();

            if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = false;
            if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = true;
          };
          break;
        default:
      }
      handler();
    }
  }

  playWindow(rotationParam, flag) {
    if (
      !this.windowsActionArr.frontLeftWindow ||
      !this.windowsActionArr.frontRightWindow ||
      !this.windowsActionArr.backLeftWindow ||
      !this.windowsActionArr.backRightWindow ||
      this.windowsActionArr.frontLeftWindow.length <= 0 ||
      this.windowsActionArr.frontRightWindow.length <= 0 ||
      this.windowsActionArr.backLeftWindow.length <= 0 ||
      this.windowsActionArr.backRightWindow.length <= 0
    ) {
      return;
    }
    if (flag === 1) {
      // 前门左风窗动画
      this.windowsActionArr.frontLeftWindow.forEach((mesh) => {
        gsap.to(mesh.rotation, {
          z: THREE.MathUtils.degToRad(rotationParam.frontLeftDeg1),
          duration: (1 / 9) * Math.abs(rotationParam.frontLeftDeg1 - mesh.rotation.z),
          overwrite: true,
        });
      });
    } else if (flag === 2) {
      // 后门左风窗动画
      this.windowsActionArr.backLeftWindow.forEach((mesh) => {
        gsap.to(mesh.rotation, {
          z: THREE.MathUtils.degToRad(rotationParam.backLeftDeg1),
          duration: (1 / 9) * Math.abs(rotationParam.backLeftDeg1 - mesh.rotation.z),
          overwrite: true,
        });
      });
    } else if (flag === 3) {
      // 前门右风窗动画
      this.windowsActionArr.frontRightWindow.forEach((mesh) => {
        gsap.to(mesh.rotation, {
          z: THREE.MathUtils.degToRad(rotationParam.frontRightDeg1),
          duration: (1 / 9) * Math.abs(rotationParam.frontRightDeg1 - mesh.rotation.z),
          overwrite: true,
        });
      });
    } else if (flag === 4) {
      // 后门右风窗动画
      this.windowsActionArr.backRightWindow.forEach((mesh) => {
        gsap.to(mesh.rotation, {
          z: THREE.MathUtils.degToRad(rotationParam.backRightDeg1),
          duration: (1 / 9) * Math.abs(rotationParam.backRightDeg1 - mesh.rotation.z),
          overwrite: true,
        });
      });
    } else if (flag === 0) {
      (
        [
          ...this.windowsActionArr.frontLeftWindow,
          ...this.windowsActionArr.frontRightWindow,
          ...this.windowsActionArr.backLeftWindow,
          ...this.windowsActionArr.backRightWindow,
        ] as THREE.Mesh[]
      ).forEach((mesh) => {
        gsap.to(mesh.rotation, {
          z: 0,
          overwrite: true,
        });
      });
    }
  }

  async initCamera(dom1) {
    const videoPlayer1 = dom1;
    this.player1 = dom1;
    let monitorPlane: THREE.Mesh | null = null;
    if (!videoPlayer1) {
      const textArr = [
        {
          text: `无信号输入`,
          font: 'normal 40px Arial',
          color: '#009900',
          strokeStyle: '#002200',
          x: 170,
          y: 40,
        },
      ];
      const canvas = await getTextCanvas(320, 180, '', 'noSinge.png');

      let textMaterial: THREE.MeshBasicMaterial | null = null;
      if (canvas) {
        const textMap = new THREE.CanvasTexture(canvas); // 关键一步
        textMaterial = new THREE.MeshBasicMaterial({
          map: textMap, // 设置纹理贴图
          transparent: true,
          side: THREE.DoubleSide, // 这里是双面渲染的意思
        });
        textMaterial.blending = THREE.CustomBlending;

        const planeGeometry = new THREE.PlaneGeometry(100, 100); // 平面3维几何体PlaneGeometry
        monitorPlane = new THREE.Mesh(planeGeometry, textMaterial);

        textMaterial.dispose();
        planeGeometry.dispose();
        textMap.dispose();
      }
    }
    const player1 = this.group.getObjectByName('player1');
    if (player1) {
      this.model.clearMesh(player1);
      this.group.remove(player1);
    }
    const noPlayer1 = this.group.getObjectByName('noPlayer1');
    if (noPlayer1) {
      this.model.clearMesh(noPlayer1);
      this.group.remove(noPlayer1);
    }
    if (!videoPlayer1 && videoPlayer1 === null) {
      if (monitorPlane && !this.group.getObjectByName('noPlayer1')) {
        const planeMesh = monitorPlane.clone();
        planeMesh.name = 'noPlayer1';
        planeMesh.scale.set(0.0085, 0.0055, 0.012);
        planeMesh.position.set(-3.64, 0.01, -0.41);
        this.group?.add(planeMesh.clone());
      }
    } else if (videoPlayer1) {
      try {
        const mesh = renderVideo(this.group, videoPlayer1, 'player1');
        if (mesh) {
          mesh?.scale.set(-0.0275, 0.028, 1);
          mesh?.position.set(-3.643, 0.02, -0.4);
          mesh.rotation.y = -Math.PI;
          this.group.add(mesh);
        }
      } catch (error) {
        console.log('视频信号异常');
      }
    }
  }

  mountedThree(playerDom) {
    this.group = new THREE.Object3D();
    this.group.name = this.modelName;
    return new Promise((resolve) => {
      this.model.setGLTFModel(['fm-window'], this.group).then(() => {
        console.log('带风窗风门模型----->', this.group);
        this.setModalPosition();
        // 初始化左右摇摆动画;
        this.initAnimation();
        this.initWindowAnimation();
        // this.drawHots();
        this.addLight();
        // this.deviceDetailCard();
        this.model.animate();

        resolve(this.model);
      });
    });
  }

  destroy() {
    if (this.model) {
      if (this.mixers) {
        this.mixers.uncacheClip(this.clipActionArr.frontDoor.getClip());
        this.mixers.uncacheClip(this.clipActionArr.backDoor.getClip());
        this.mixers.uncacheAction(this.clipActionArr.frontDoor.getClip(), this.group);
        this.mixers.uncacheAction(this.clipActionArr.backDoor.getClip(), this.group);
        this.mixers.uncacheRoot(this.group);

        if (this.model.animations[0]) this.model.animations[0].tracks = [];
      }
      this.model.clearGroup(this.group);
      this.clipActionArr.backDoor = undefined;
      this.clipActionArr.frontDoor = undefined;

      this.windowsActionArr.frontWindow = undefined;
      this.windowsActionArr.backWindow = undefined;

      this.mixers = undefined;
    }
  }
}
export default FmDc;