gas-injection/src/views/vent/monitorManager/windowMonitor/shuangdaoFcHj.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;
  direction = 1;
  fontMixers1: THREE.AnimationMixer | null = null;
  fontMixers2: THREE.AnimationMixer | null = null;
  backMixers1: THREE.AnimationMixer | null = null;
  backMixers2: THREE.AnimationMixer | null = null;
  frontClipWindow1: THREE.AnimationClip | null = null;
  frontClipWindow2: THREE.AnimationClip | null = null;
  backClipWindow1: THREE.AnimationClip | null = null;
  backClipWindow2: THREE.AnimationClip | null = null;
  windowsActionArr = {
    frontWindow1: <THREE.AnimationAction | null>null,
    frontWindow2: <THREE.AnimationAction | null>null,
    backWindow1: <THREE.AnimationAction | null>null,
    backWindow2: <THREE.AnimationAction | null>null,
  };
  constructor(model) {
    this.model = model;
    // this.group.name = 'ddFc';
  }
  // // 重置摄像头
  // const resetCamera = () => {
  //   this.model.camera.position.set(30.328, 58.993, 148.315);
  //   this.model.camera.rotation.set(-27.88, 14.35, 7.47);
  //   this.model.orbitControls?.update();
  //   this.model.camera.updateProjectionMatrix();
  // };

  addLight = () => {};

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

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

    const screenDownTextX = 125 - (screenDownText.length - 10) * 10;
    const textArr = [
      {
        text: `远程定量调节自动风窗`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 120,
        y: 90,
      },
      {
        text: `${selectData.OpenDegree1 ? '前窗开度值(°)' : selectData.forntArea ? '前窗过风面积(㎡)' : '前窗过风面积(㎡)'}:`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 5,
        y: 145,
      },
      {
        text: selectData.OpenDegree1
          ? Number(`${selectData.OpenDegree1}`).toFixed(2)
          : selectData.forntArea
          ? Number(`${selectData.forntArea}`).toFixed(2)
          : '-',
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 330,
        y: 145,
      },
      {
        text: `${selectData.OpenDegree2 ? '后窗开度值(°)' : selectData.forntArea ? '后窗过风面积(㎡)' : '后窗过风面积(㎡)'}:`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 5,
        y: 200,
      },
      {
        text: selectData.OpenDegree2
          ? Number(`${selectData.OpenDegree2}`).toFixed(2)
          : selectData.rearArea
          ? Number(`${selectData.rearArea}`).toFixed(2)
          : '-',
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 330,
        y: 200,
      },
      {
        text: `${selectData.frontRearDP ? '风窗压差(Pa)' : selectData.windSpeed ? '风速(m/s)' : '通信状态'}:`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 5,
        y: 256,
      },
      {
        text: `${
          selectData.frontRearDP
            ? selectData.frontRearDP
            : selectData.windSpeed
            ? selectData.windSpeed
            : selectData.netStatus == '0'
            ? '断开'
            : '连接'
        }`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 330,
        y: 256,
      },
      {
        text: screenDownText,
        font: 'normal 28px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: screenDownTextX,
        y: 303,
      },
    ];

    getTextCanvas(726, 546, textArr, '').then((canvas: HTMLCanvasElement) => {
      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
      const textMaterial = new THREE.MeshBasicMaterial({
        // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
        map: textMap, // 设置纹理贴图
        transparent: true,
        side: THREE.DoubleSide, // 这里是双面渲染的意思
      });
      textMap.dispose();
      textMaterial.blending = THREE.CustomBlending;
      const monitorPlane = this.group?.getObjectByName('monitorText');
      if (monitorPlane) {
        monitorPlane.material = textMaterial;
      } else {
        const planeGeometry = new THREE.PlaneGeometry(726, 546); // 平面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.19, 0.448, -0.27);
        this.group?.add(planeMesh);
      }
    });
  }

  /* 提取风门序列帧，初始化前后门动画 */
  initAnimation() {
    const fcGroup = this.group?.getObjectByName('ShuangDaoTiaoJieFengChuang_1');
    if (fcGroup) {
      const tracks = fcGroup.animations[0].tracks;
      const fontTracks1: any[] = [],
        fontTracks2: any[] = [],
        backTracks1: any[] = [],
        backTracks2: any[] = [];
      for (let i = 0; i < tracks.length; i++) {
        const track = tracks[i];
        if (track.name.startsWith('juan_1')) {
          fontTracks1.push(track);
        } else if (track.name.startsWith('juan_2')) {
          fontTracks2.push(track);
        } else if (track.name.startsWith('juan_3')) {
          backTracks1.push(track);
        } else if (track.name.startsWith('juan_4')) {
          backTracks2.push(track);
        }
      }
      const fontGroup1 = fcGroup.getObjectByName('FengChuang_1')?.getObjectByName('ske_1');
      const fontGroup2 = fcGroup.getObjectByName('FengChuang_1')?.getObjectByName('ske_2');
      const backGroup1 = fcGroup.getObjectByName('FengChuang_2')?.getObjectByName('ske_3');
      const backGroup2 = fcGroup.getObjectByName('FengChuang_2')?.getObjectByName('ske_4');
      if (fontGroup1 && fontGroup2 && backGroup1 && backGroup2) {
        this.fontMixers1 = new THREE.AnimationMixer(fontGroup1);
        this.fontMixers2 = new THREE.AnimationMixer(fontGroup1);
        this.backMixers1 = new THREE.AnimationMixer(backGroup1);
        this.backMixers2 = new THREE.AnimationMixer(backGroup2);

        this.frontClipWindow1 = new THREE.AnimationClip('frontWindow1', 22, fontTracks1);
        const frontClipAction1 = this.fontMixers1.clipAction(this.frontClipWindow1, fontGroup1);
        frontClipAction1.clampWhenFinished = true;
        frontClipAction1.loop = THREE.LoopOnce;
        this.windowsActionArr.frontWindow1 = frontClipAction1;

        this.frontClipWindow2 = new THREE.AnimationClip('frontWindow2', 22, fontTracks2);
        const frontClipAction2 = this.fontMixers2.clipAction(this.frontClipWindow2, fontGroup2);
        frontClipAction2.clampWhenFinished = true;
        frontClipAction2.loop = THREE.LoopOnce;
        this.windowsActionArr.frontWindow1 = frontClipAction2;

        this.backClipWindow1 = new THREE.AnimationClip('backWindow1', 22, backTracks1);
        const backClipAction1 = this.backMixers1.clipAction(this.backClipWindow1, backGroup1);
        backClipAction1.clampWhenFinished = true;
        backClipAction1.loop = THREE.LoopOnce;
        this.windowsActionArr.backWindow1 = backClipAction1;

        this.backClipWindow2 = new THREE.AnimationClip('backWindow1', 22, backTracks2);
        const backClipAction2 = this.backMixers2.clipAction(this.backClipWindow2, backGroup2);
        backClipAction2.clampWhenFinished = true;
        backClipAction2.loop = THREE.LoopOnce;
        this.windowsActionArr.backWindow1 = backClipAction2;
      }
    }
  }

  play(handlerState, timeScale = 0.01) {
    let handler = () => {};
    if (
      this.windowsActionArr.frontWindow1 &&
      this.windowsActionArr.frontWindow2 &&
      this.windowsActionArr.backWindow1 &&
      this.windowsActionArr.backWindow2
    ) {
      switch (handlerState) {
        case 1: // 窗1开启动画
          handler = () => {
            const frontWindow1 = this.windowsActionArr.frontWindow1;
            if (frontWindow1 && this.frontClipWindow1) {
              frontWindow1.paused = true;
              frontWindow1.reset();
              this.frontClipWindow1.duration = 0;
              frontWindow1.time = 1.8;
              frontWindow1.timeScale = timeScale;
              frontWindow1.play();
            }
          };
          break;
        case 2: // 窗2开启动画
          handler = () => {
            const frontWindow2 = this.windowsActionArr.frontWindow2;
            if (frontWindow2) {
              frontWindow2.paused = true;
              frontWindow2.reset();
              frontWindow2.time = 4;
              frontWindow2.timeScale = -timeScale;
              frontWindow2.play();
            }
          };
          break;
        case 3: // 窗3开启动画
          handler = () => {
            const backWindow1 = this.windowsActionArr.backWindow1;
            if (backWindow1) {
              backWindow1.paused = true;
              backWindow1.reset();
              backWindow1.time = 1.2;
              backWindow1.timeScale = timeScale;
              backWindow1.play();
            }
          };
          break;
        case 4: // 窗4开启动画
          handler = () => {
            const backWindow2 = this.windowsActionArr.backWindow2;
            if (backWindow2) {
              backWindow2.paused = true;
              backWindow2.reset();
              backWindow2.time = 4;
              backWindow2.timeScale = -timeScale;
              backWindow2.play();
            }
          };
          break;
        default:
      }
      handler();
    }
  }

  /* 点击风窗，风窗全屏 */
  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
    if (this.animationTimer) {
      clearTimeout(this.animationTimer);
      this.animationTimer = null;
    }
    // 判断是否点击到视频
    intersects.find((intersect) => {
      const mesh = intersect.object;
      if (mesh.name === 'player1') {
        if (new Date().getTime() - this.playerStartClickTime1 < 400) {
          // 双击，视频放大
          if (this.player1) {
            this.player1.requestFullscreen();
          }
        }
        this.playerStartClickTime1 = new Date().getTime();
        return true;
      }
      return false;
    });
  }

  mouseUpModel() {}

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

  mountedThree(playerDom) {
    return new Promise((resolve) => {
      this.model.setGLTFModel('sdFc-jz').then((gltf) => {
        console.log('gltf', gltf);
        const fcModal = gltf[0];
        fcModal.name = 'sdFc';
        this.group?.add(fcModal);
        this.setModalPosition();
        this.initAnimation();
        this.addLight();
        resolve(null);
      });
    });
  }

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