mky-vent-base/src/views/vent/monitorManager/windowMonitor/shuangdaoFc.threejs.ts

import * as THREE from 'three';
import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
import gsap from 'gsap';

class doubleWindow {
  model;
  modelName = 'sdFc';
  group: THREE.Object3D = new THREE.Object3D();
  animationTimer;
  isLRAnimation = true;
  direction = 1;
  windowsActionArr = {
    frontWindow: <THREE.Mesh[]>[],
    backWindow: <THREE.Mesh[]>[],
  };
  playerStartClickTime1 = new Date().getTime();
  playerStartClickTime2 = new Date().getTime();

  constructor(model) {
    this.model = model;
    // this.group.name = this.modelName;
  }

  // 设置模型位置
  setModalPosition() {
    this.group.getObjectByName(this.modelName)?.scale.set(9, 9, 9);
    this.group?.scale.set(22, 22, 22);
    this.group?.position.set(-15, 25, 15);
  }

  addMonitorText(selectData) {
    if (!this.group) {
      return;
    }
    const textArr = [
      {
        text: `远程定量调节自动风窗`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 95,
        y: 97,
      },
      {
        text: `过风量(m³/min):`,
        font: 'normal 28px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 5,
        y: 150,
      },
      {
        text: selectData.forntm3 ? Number(`${selectData.forntm3}`).toFixed(0) : '-',
        font: 'normal 28px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 215,
        y: 150,
      },
      {
        text: `过风面积(m2): `,
        font: 'normal 28px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 5,
        y: 205,
      },
      {
        text: `${selectData.forntArea ? selectData.forntArea : '-'}`,
        font: 'normal 28px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 200,
        y: 205,
      },
      {
        text: `风窗压差(Pa):`,
        font: 'normal 28px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 5,
        y: 256,
      },
      {
        text: `${selectData.frontRearDP ? selectData.frontRearDP : '-'}`,
        font: 'normal 28px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 200,
        y: 256,
      },
      {
        text: `调节精度:`,
        font: 'normal 28px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 330,
        y: 150,
      },
      {
        // text: `1% FS`,
        text: `-`,
        font: 'normal 28px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 460,
        y: 150,
      },
      {
        text: `调节范围(㎡):`,
        font: 'normal 28px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 330,
        y: 205,
      },
      {
        text: `0~${selectData.maxarea ? selectData.maxarea : '-'}`,
        font: 'normal 28px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 500,
        y: 205,
      },
      {
        text: History_Type['type'] == 'remote' ? `国能神东煤炭集团监制` : '煤炭科学技术研究院有限公司研制',
        font: 'normal 28px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: History_Type['type'] == 'remote' ? 120 : 60,
        y: 302,
      },
    ];

    getTextCanvas(570, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
      const textMaterial = new THREE.MeshBasicMaterial({
        // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
        map: textMap, // 设置纹理贴图
        transparent: true,
        side: THREE.DoubleSide, // 这里是双面渲染的意思
      });
      textMaterial.blending = THREE.CustomBlending;
      const monitorPlane = this.group?.getObjectByName('monitorText');
      if (monitorPlane) {
        monitorPlane.material = textMaterial;
      } else {
        const planeGeometry = new THREE.PlaneGeometry(570, 346); // 平面3维几何体PlaneGeometry
        const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
        planeMesh.name = 'monitorText';
        planeMesh.scale.set(0.0018, 0.0018, 0.0018);
        planeMesh.position.set(3.63, 0.158, -0.2);
        this.group?.add(planeMesh);
      }
      textMap.dispose();
    });
  }

  /* 风门动画 */
  render() {
    if (!this.model) {
      return;
    }
    if (this.isLRAnimation && this.group) {
      // 左右摇摆动画
      if (Math.abs(this.group.rotation.y) >= 0.2) {
        this.direction = -this.direction;
        this.group.rotation.y += 0.00002 * 30 * this.direction;
      } else {
        this.group.rotation.y += 0.00002 * 30 * this.direction;
      }
    }
  }

  /* 提取风门序列帧，初始化前后门动画 */
  initAnimation() {
    debugger;
    const meshArr01: THREE.Object3D[] = [];
    const meshArr02: THREE.Object3D[] = [];
    const windowGroup = new THREE.Group();
    windowGroup.name = 'hiddenGroup';
    this.group.getObjectByName('sdFc')?.children.forEach((obj) => {
      if (obj.type === 'Mesh' && obj.name && (obj.name.startsWith('shanye') || obj.name.startsWith('FCshanye'))) {
        if (obj.name.startsWith('FCshanye')) {
          obj.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0);
          meshArr01.push(obj);
        } else if (obj.name.startsWith('shanye')) {
          obj.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0);
          meshArr02.push(obj);
        }
      }
    });
    this.windowsActionArr.frontWindow = meshArr01;
    this.windowsActionArr.backWindow = meshArr02;
    this.group?.add(windowGroup);
  }

  /* 点击风窗，风窗全屏 */
  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
    this.isLRAnimation = false;
    if (this.animationTimer) {
      clearTimeout(this.animationTimer);
      this.animationTimer = null;
    }
    // 判断是否点击到视频
    intersects.find((intersect) => {
      const mesh = intersect.object;
      return false;
    });
  }

  mouseUpModel() {
    // 10s后开始摆动
    if (!this.animationTimer && !this.isLRAnimation) {
      this.animationTimer = setTimeout(() => {
        this.isLRAnimation = true;
      }, 10000);
    }
  }

  play(rotationParam, flag) {
    if (this.windowsActionArr.frontWindow.length <= 0 || this.windowsActionArr.backWindow.length <= 0) {
      return;
    }
    if (flag === 1) {
      // 前风窗动画
      this.windowsActionArr.frontWindow.forEach((mesh) => {
        gsap.to(mesh.rotation, {
          y: THREE.MathUtils.degToRad(rotationParam.frontDeg1),
          duration: (1 / 9) * Math.abs(rotationParam.frontDeg1 - mesh.rotation.y),
          overwrite: true,
        });
      });
    } else if (flag === 2) {
      // 后风窗动画
      this.windowsActionArr.backWindow.forEach((mesh) => {
        gsap.to(mesh.rotation, {
          y: THREE.MathUtils.degToRad(rotationParam.backDeg1),
          duration: (1 / 9) * Math.abs(rotationParam.backDeg1 - mesh.rotation.y),
          overwrite: true,
        });
      });
    } else if (flag === 0) {
      ([...this.windowsActionArr.frontWindow, ...this.windowsActionArr.backWindow] as THREE.Mesh[]).forEach((mesh) => {
        gsap.to(mesh.rotation, {
          y: 0,
          overwrite: true,
        });
      });
    }
  }

  async initCamera(dom1?, dom2?) {
    const videoPlayer1 = dom1;
    const videoPlayer2 = dom2;
    let monitorPlane: THREE.Mesh | null = null;
    if (!videoPlayer1 || !videoPlayer2) {
      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.011, 0.0053, 0.012);
        planeMesh.position.set(-4.3, 0.13, -0.23);
        this.group?.add(planeMesh.clone());
      }
    } else if (videoPlayer1) {
      try {
        const mesh = renderVideo(this.group, videoPlayer1, 'player1');
        if (mesh) {
          mesh?.scale.set(-0.034, 0.024, 1);
          mesh?.position.set(-3.332, 0.11, -0.23);
          mesh.rotation.y = -Math.PI;
          this.group.add(mesh);
        }
      } catch (error) {
        console.log('视频信号异常');
      }
    }
    const player2 = this.group.getObjectByName('player2');
    if (player2) {
      this.model.clearMesh(player2);
      this.group.remove(player2);
    }
    const noPlayer2 = this.group.getObjectByName('noPlayer2');
    if (noPlayer2) {
      this.model.clearMesh(noPlayer2);
      this.group.remove(noPlayer2);
    }
    if (!videoPlayer2 && videoPlayer2 === null) {
      if (monitorPlane && !this.group.getObjectByName('noPlayer2')) {
        const planeMesh = monitorPlane.clone();
        planeMesh.name = 'noPlayer2';
        planeMesh.scale.set(0.0085, 0.0056, 0.012);
        planeMesh.position.set(4.29, 0.02, -0.41);
        this.group?.add(planeMesh.clone());
      }
    } else if (videoPlayer2) {
      try {
        const mesh = renderVideo(this.group, videoPlayer2, 'player2');
        if (mesh) {
          mesh?.scale.set(-0.034, 0.024, 1);
          mesh?.position.set(-3.332, 0.11, -0.23);
          mesh.rotation.y = -Math.PI;
          this.group.add(mesh);
        }
      } catch (error) {
        console.log('视频信号异常');
      }
    }
  }

  mountedThree(playerDom) {
    return new Promise((resolve) => {
      this.model.setGLTFModel(['sdFc'], this.group).then(() => {
        this.setModalPosition();
        this.initAnimation();
        resolve(null);
        this.initCamera(playerDom);
      });
    });
  }

  destroy() {
    this.model.clearGroup(this.group);
    this.windowsActionArr.frontWindow = undefined;
    this.windowsActionArr.backWindow = undefined;
    this.model = null;
    this.group = null;
  }
}

export default doubleWindow;