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

import * as THREE from 'three';
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
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 fmSsl {
  modelName = 'fmssl';
  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();

  backDamperOpenMesh;
  backDamperClosedMesh;
  frontDamperOpenMesh;
  frontDamperClosedMesh;

  clipActionArr = {
    frontDoor: null as unknown as THREE.AnimationAction,
    backDoor: null as unknown as THREE.AnimationAction,
  };

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

  addLight() {
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
    directionalLight.position.set(344, 690, 344);
    this.group?.add(directionalLight);
    directionalLight.target = this.group as THREE.Object3D;

    const pointLight2 = new THREE.PointLight(0xffeeee, 1, 300);
    pointLight2.position.set(-4, 10, 1.8);
    pointLight2.shadow.bias = 0.05;
    this.group?.add(pointLight2);

    const pointLight3 = new THREE.PointLight(0xffeeee, 1, 200);
    pointLight3.position.set(-0.5, -0.5, 0.75);
    pointLight3.shadow.bias = 0.05;
    this.group?.add(pointLight3);
  }
  // 重置摄像头
  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 = 90 - (screenDownText.length - 11) * 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: 330,
        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: 320,
        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: 320,
        y: 275,
      },
      {
        text: screenDownText,
        font: 'normal 28px Arial',
        color: '#00FF00',
        strokeStyle: '#007400',
        x: screenDownTextX,
        y: 325,
      },
    ];

    //
    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(3.995, 0.67, -0.27);
        this.group.add(planeMesh);
      }
      textMap.dispose();
    });
  }

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

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

  mouseUpModel() {}

  /* 提取风门序列帧，初始化前后门动画 */
  initAnimation() {
    debugger;
    console.log('this.group', this.group);
    const men1 = this.group.getObjectByName('FengMen_SiShanLing').getObjectByName('men1');
    const men2 = this.group.getObjectByName('FengMen_SiShanLing').getObjectByName('men2');
    const tracks = this.group.animations[0].tracks;
    const fontTracks: any[] = [],
      backTracks: any[] = [];
    for (let i = 0; i < tracks.length; i++) {
      const track = tracks[i];
      if (track.name.startsWith('men1')) {
        fontTracks.push(track);
      } else if (track.name.startsWith('men2')) {
        backTracks.push(track);
      }
    }

    this.mixers = new THREE.AnimationMixer(this.group.getObjectByName('FengMen_SiShanLing'));

    const frontDoor = new THREE.AnimationClip('frontDoor', 22, fontTracks);
    const backDoor = new THREE.AnimationClip('backDoor', 22, backTracks);
    const frontClipAction = this.mixers.clipAction(frontDoor, men1);
    const backClipAction = this.mixers.clipAction(backDoor, men2);
    frontClipAction.clampWhenFinished = true;
    frontClipAction.loop = THREE.LoopOnce;
    this.clipActionArr.frontDoor = frontClipAction;
    backClipAction.clampWhenFinished = true;
    backClipAction.loop = THREE.LoopOnce;
    this.clipActionArr.backDoor = backClipAction;
  }

  // 播放动画
  play(handlerState, timeScale = 0.05) {
    if (this.clipActionArr.frontDoor) {
      let handler = () => {};
      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.play();
            this.fmClock.start();
          };
          break;
        case 2: // 关闭前门
          handler = () => {
            this.clipActionArr.frontDoor.paused = true;
            this.clipActionArr.frontDoor.reset(); //
            this.clipActionArr.frontDoor.time = 1.5;
            this.clipActionArr.frontDoor.timeScale = -timeScale;
            this.clipActionArr.frontDoor.play();
            this.fmClock.start();
          };
          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.play();
            this.fmClock.start();
          };
          break;
        case 4: // 关闭后门
          handler = () => {
            this.clipActionArr.backDoor.paused = true;
            this.clipActionArr.backDoor.reset(); //
            this.clipActionArr.backDoor.time = 1.5;
            this.clipActionArr.backDoor.timeScale = -timeScale;
            this.clipActionArr.backDoor.play();
            this.fmClock.start();
          };
        case 5: // 打开前后门
          handler = () => {
            this.clipActionArr.frontDoor.paused = true;
            this.clipActionArr.frontDoor.reset();
            this.clipActionArr.frontDoor.time = 0;
            this.clipActionArr.frontDoor.timeScale = timeScale;
            this.clipActionArr.frontDoor.play();
            this.fmClock.start();
            // 显示打开前门文字
            if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = true;
            if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = false;

            this.clipActionArr.backDoor.paused = true;
            this.clipActionArr.backDoor.reset();
            this.clipActionArr.backDoor.time = 0;
            this.clipActionArr.backDoor.timeScale = timeScale;
            this.clipActionArr.backDoor.play();
            this.fmClock.start();
          };
          break;
        case 6: // 关闭前后门
          handler = () => {
            this.clipActionArr.frontDoor.paused = true;
            this.clipActionArr.frontDoor.reset(); //
            this.clipActionArr.frontDoor.time = 1.5;
            this.clipActionArr.frontDoor.timeScale = -timeScale;
            this.clipActionArr.frontDoor.play();
            this.fmClock.start();

            if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = false;
            if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = true;

            this.clipActionArr.backDoor.paused = true;
            this.clipActionArr.backDoor.reset();
            this.clipActionArr.backDoor.time = 1.5;
            this.clipActionArr.backDoor.timeScale = -timeScale;
            this.clipActionArr.backDoor.play();
            this.fmClock.start();
          };
          break;
        default:
      }

      handler();
    }
  }

  mountedThree(playerDom) {
    this.group = new THREE.Object3D();
    this.group.name = this.modelName;

    return new Promise((resolve) => {
      if (!this.model) {
        resolve(null);
      }
      this.model.setGLTFModel('fmssl').then((gltf) => {
        this.group = gltf[0];
        this.group.name = 'fmssl';
        console.log('fmssl', this.group);
        this.setModalPosition();
        this.initAnimation();
        this.addLight();
        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.mixers = undefined;

      // document.getElementById('damper3D').parentElement.remove(document.getElementById('damper3D'))
    }
  }
}
export default fmSsl;