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

import * as THREE from 'three';
import UseThree from '../../../../utils/threejs/useThree';
import Fm1 from './gate.threejs.yy';
import Fm3 from './gate.threejs.qd';
import FmXR from './gate.threejs.xr';
import Fm2 from './gate.threejs.three';
import FmTwoSs from './gate.threejs.two.ss';
import { animateCamera } from '/@/utils/threejs/util';
import useEvent from '../../../../utils/threejs/useEvent';
import { useGlobSetting } from '/@/hooks/setting';

// 模型对象、 文字对象
let model,
  fm1, //液压风门
  fm2, //三道风门
  fm3, //气动风门
  fmXr: FmXR, //行人风门
  fmTwoSs, //
  group: THREE.Object3D,
  fmType = '';

const { mouseDownFn } = useEvent();

// 初始化左右摇摆动画
const startAnimation = () => {
  // 定义鼠标点击事件
  model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  model.canvasContainer?.addEventListener('pointerup', (event) => {
    event.stopPropagation();
    // 单道、 双道
    if (fmType === 'fm1') {
      fm1?.mouseUpModel.call(fm1);
    } else if (fmType === 'fm2') {
      fm2?.mouseUpModel.call(fm2);
    } else if (fmType === 'fm3') {
      fm3?.mouseUpModel.call(fm3);
    } else if (fmType === 'fmXr') {
      fmXr?.mouseUpModel.call(fmXr);
    } else if (fmType === 'fmTwoSs') {
      fmTwoSs?.mouseUpModel.call(fmTwoSs);
    }
  });
};

// 鼠标点击、松开事件
const mouseEvent = (event) => {
  if (event.button == 0) {
    mouseDownFn(model, group, event, (intersects) => {
      if (fmType === 'fm1' && fm1) {
        fm1?.mousedownModel.call(fm1, intersects);
      } else if (fmType === 'fm2' && fm2) {
        fm2?.mousedownModel.call(fm2, intersects);
      } else if (fmType === 'fm3' && fm3) {
        fm3?.mousedownModel.call(fm3, intersects);
      } else if (fmType === 'fmXr' && fmXr) {
        fmXr?.mousedownModel.call(fmXr, intersects);
      } else if (fmType === 'fmTwoSs' && fmTwoSs) {
        fmTwoSs?.mousedownModel.call(fmTwoSs, intersects);
      }
    });
    // console.log('摄像头控制信息', model.orbitControls, model.camera);
  }
};

export const addMonitorText = (selectData) => {
  if (fmType === 'fm1' && fm1) {
    return fm1?.addMonitorText.call(fm1, selectData);
  } else if (fmType === 'fm2' && fm2) {
    return fm2?.addMonitorText.call(fm2, selectData);
  } else if (fmType === 'fm3' && fm3) {
    return fm3?.addMonitorText.call(fm3, selectData);
  } else if (fmType === 'fmXr' && fmXr) {
    return fmXr?.addMonitorText.call(fmXr, selectData);
  } else if (fmType === 'fmTwoSs' && fmTwoSs) {
    return fmTwoSs?.addMonitorText.call(fmTwoSs, selectData);
  }
};

export const deviceDetailCard = () => {
  if (fmType === 'fm1') {
    return fm1?.deviceDetailCard.call(fm1);
  } else if (fmType === 'fm3') {
    return fm3?.deviceDetailCard.call(fm3);
  } else if (fmType === 'fmXr') {
    return fmXr?.deviceDetailCard.call(fmXr);
  } else {
    // return fm2.addMonitorText.call(fm2);
  }
};

export const play = (handlerState, flag?) => {
  if (fmType === 'fm1' && fm1) {
    return fm1.play.call(fm1, handlerState, flag);
  } else if (fmType === 'fm2' && fm2) {
    return fm2.play.call(fm2, handlerState, flag);
  } else if (fmType === 'fm3' && fm3) {
    return fm3.play.call(fm3, handlerState, flag);
  } else if (fmType === 'fmXr' && fmXr) {
    return fmXr.play.call(fmXr, handlerState, flag);
  } else if (fmType === 'fmTwoSs' && fmTwoSs) {
    return fmTwoSs.play.call(fmTwoSs, handlerState, flag);
  }
};

// 切换风门类型
export const setModelType = (type) => {
  fmType = type;
  return new Promise((resolve) => {
    // 暂停风门1动画
    if (fmType === 'fm1' && fm1 && fm1.group) {
      if (fm1.clipActionArr.frontDoor && fm1.clipActionArr.backDoor) {
        fm1.clipActionArr.frontDoor.reset();
        fm1.clipActionArr.frontDoor.time = 0.5;
        fm1.clipActionArr.backDoor.reset();
        fm1.clipActionArr.backDoor.time = 0.5;
        fm1.clipActionArr.frontDoor.stop();
        fm1.clipActionArr.backDoor.stop();
      }

      if (fm1.frontDamperOpenMesh) fm1.frontDamperOpenMesh.visible = false;
      if (fm1.frontDamperClosedMesh) fm1.frontDamperClosedMesh.visible = true;
      if (fm1.backDamperOpenMesh) fm1.backDamperOpenMesh.visible = false;
      if (fm1.backDamperClosedMesh) fm1.backDamperClosedMesh.visible = true;
      model.scene.remove(group);
      model.startAnimation = fm1.render.bind(fm1);
      group = fm1.group;
      group.rotation.y = 0;
      const oldCameraPosition = { x: -1000, y: 100, z: 500 };
      setTimeout(async () => {
        resolve(null);
        model.scene.add(fm1.group);
        await animateCamera(
          oldCameraPosition,
          { x: 0, y: 0, z: 0 },
          { x: 50.99, y: 69.32, z: 93.61 },
          { x: -10.04, y: -14.38, z: -31.4 },
          model,
          0.8
        );
      }, 300);
    } else if (fmType === 'fm2' && fm2 && fm2.group) {
      if (fm2.clipActionArr.frontDoor && fm2.clipActionArr.backDoor) {
        fm2.clipActionArr.frontDoor.reset();
        fm2.clipActionArr.frontDoor.time = 0.5;
        fm2.clipActionArr.backDoor.reset();
        fm2.clipActionArr.backDoor.time = 0.5;

        fm2.clipActionArr.centerDoor.reset();
        fm2.clipActionArr.centerDoor.time = 0.5;

        fm2.clipActionArr.frontDoor.stop();
        fm2.clipActionArr.backDoor.stop();

        fm2.clipActionArr.centerDoor.stop();
      }

      // 显示单道风窗
      model.startAnimation = fm2.render.bind(fm2);
      model.scene.remove(group);
      group = fm2.group;
      const oldCameraPosition = { x: -761, y: 569, z: 871 };
      setTimeout(async () => {
        resolve(null);
        model.scene.add(fm2.group);
        const position = { x: -2.28, y: -0.91, z: -5.68 };
        await animateCamera(
          oldCameraPosition,
          { x: -2.27, y: -0.91, z: -5.67 },
          { x: 66.257, y: 57.539, z: 94.313 },
          { x: position.x, y: position.y, z: position.z },
          model,
          0.6
        );
      }, 300);
    } else if (fmType === 'fm3' && fm3 && fm3.group) {
      if (fm3.clipActionArr.frontDoor && fm3.clipActionArr.backDoor) {
        fm3.clipActionArr.frontDoor.reset();
        fm3.clipActionArr.frontDoor.time = 0.5;
        fm3.clipActionArr.backDoor.reset();
        fm3.clipActionArr.backDoor.time = 0.5;
        fm3.clipActionArr.frontDoor.stop();
        fm3.clipActionArr.backDoor.stop();
      }

      if (fm3.frontDamperOpenMesh) fm3.frontDamperOpenMesh.visible = false;
      if (fm3.frontDamperClosedMesh) fm3.frontDamperClosedMesh.visible = true;
      if (fm3.backDamperOpenMesh) fm3.backDamperOpenMesh.visible = false;
      if (fm3.backDamperClosedMesh) fm3.backDamperClosedMesh.visible = true;

      model.scene.remove(group);
      model.startAnimation = fm3.render.bind(fm3);
      group = fm3.group;
      group.rotation.y = 0;
      const oldCameraPosition = { x: -1000, y: 100, z: 500 };
      setTimeout(async () => {
        resolve(null);
        model.scene.add(fm3.group);
        await animateCamera(
          oldCameraPosition,
          { x: 0, y: 0, z: 0 },
          { x: 50.99, y: 69.32, z: 93.61 },
          { x: -10.04, y: -14.38, z: -31.4 },
          model,
          0.8
        );
      }, 300);
    } else if (fmType === 'fmXr' && fmXr && fmXr.group) {
      if (fmXr.clipActionArr.frontDoor && fmXr.clipActionArr.backDoor) {
        fmXr.clipActionArr.frontDoor.reset();
        fmXr.clipActionArr.frontDoor.time = 0.5;
        fmXr.clipActionArr.backDoor.reset();
        fmXr.clipActionArr.backDoor.time = 0.5;
        fmXr.clipActionArr.frontDoor.stop();
        fmXr.clipActionArr.backDoor.stop();
      }

      if (fmXr.frontDamperOpenMesh) fmXr.frontDamperOpenMesh.visible = false;
      if (fmXr.frontDamperClosedMesh) fmXr.frontDamperClosedMesh.visible = true;
      if (fmXr.backDamperOpenMesh) fmXr.backDamperOpenMesh.visible = false;
      if (fmXr.backDamperClosedMesh) fmXr.backDamperClosedMesh.visible = true;

      model.startAnimation = fmXr.render.bind(fmXr);
      model.scene.remove(group);
      group = fmXr.group;
      group.rotation.y = 0;

      const oldCameraPosition = { x: -1000, y: 100, z: 500 };
      setTimeout(async () => {
        resolve(null);
        model.scene.add(fmXr.group);
        await animateCamera(
          oldCameraPosition,
          { x: 0, y: 0, z: 0 },
          { x: 50.99, y: 69.32, z: 93.61 },
          { x: -10.04, y: -14.38, z: -31.4 },
          model,
          0.8
        );
      }, 300);
    } else if (fmType === 'fmTwoSs' && fmTwoSs && fmTwoSs.group) {
      if (fmTwoSs.clipActionArr.frontDoor && fmTwoSs.clipActionArr.backDoor) {
        fmTwoSs.clipActionArr.frontDoor.reset();
        fmTwoSs.clipActionArr.frontDoor.time = 0.5;
        fmTwoSs.clipActionArr.backDoor.reset();
        fmTwoSs.clipActionArr.backDoor.time = 0.5;
        fmTwoSs.clipActionArr.frontDoor.stop();
        fmTwoSs.clipActionArr.backDoor.stop();
      }

      if (fmTwoSs.frontDamperOpenMesh) fmTwoSs.frontDamperOpenMesh.visible = false;
      if (fmTwoSs.frontDamperClosedMesh) fmTwoSs.frontDamperClosedMesh.visible = true;
      if (fmTwoSs.backDamperOpenMesh) fmTwoSs.backDamperOpenMesh.visible = false;
      if (fmTwoSs.backDamperClosedMesh) fmTwoSs.backDamperClosedMesh.visible = true;

      model.startAnimation = fmTwoSs.render.bind(fmTwoSs);
      model.scene.remove(group);
      group = fmTwoSs.group;
      group.rotation.y = 0;

      const oldCameraPosition = { x: -1000, y: 100, z: 500 };
      setTimeout(async () => {
        resolve(null);
        model.scene.add(fmTwoSs.group);
        await animateCamera(
          oldCameraPosition,
          { x: 0, y: 0, z: 0 },
          { x: 50.99, y: 69.32, z: 93.61 },
          { x: -10.04, y: -14.38, z: -31.4 },
          model,
          0.8
        );
      }, 300);
    }
  });
};

export const initCameraCanvas = async (playerVal1) => {
  if (fmType === 'fm1' && fm1) {
    return await fm1.initCamera.call(fm1, playerVal1);
  } else if (fmType === 'fm2' && fm2) {
    return fm2.initCamera.call(fm2, playerVal1);
  } else if (fmType === 'fm3' && fm3) {
    return fm3.initCamera.call(fm3, playerVal1);
  } else if (fmType === 'fmXr' && fmXr) {
    return fmXr.initCamera.call(fmXr, playerVal1);
  }
};

export const mountedThree = (playerDom) => {
  const { sysOrgCode } = useGlobSetting();
  // sysOrgCode = 'yjmdsankuang';
  return new Promise(async (resolve) => {
    model = new UseThree('#damper3D', '', '#deviceDetail');
    model.setEnvMap('test1');
    model.renderer.toneMappingExposure = 1.0;
    model.camera.position.set(100, 0, 1000);
    switch (sysOrgCode) {
      case 'yjmdsankuang': //窑街三矿
      case 'yjmdhswmk': //窑街海石湾
      case 'yjmdjhmk': //窑街金河矿
        const FmYj = await import('./gate.threejs.yj');
        if (FmYj) fm3 = new FmYj.default(model);
        if (fm3) fm3.mountedThree(playerDom);

        const FmTwoYj = await import('./gate.threejs.two.yj');
        if (FmTwoYj) fmTwoSs = new FmTwoYj.default(model);
        fmTwoSs.mountedThree(playerDom);

        // if (FmTwoYj) fm2 = new FmTwoYj.default(model);
        // fm2.mountedThree(playerDom);
        break;
      default:
        fm3 = new Fm3(model);
        fm3.mountedThree(playerDom);
        fmTwoSs = new FmTwoSs(model);
        fmTwoSs.mountedThree(playerDom);
        fm2 = new Fm2(model);
        fm2.mountedThree(playerDom);
        break;
    }

    fmXr = new FmXR(model);
    fmXr.mountedThree(playerDom);
    fm1 = new Fm1(model);
    fm1.mountedThree(playerDom);

    resolve(null);

    model.animate();
    startAnimation();
  });
};

export const destroy = () => {
  if (model) {
    model.isRender = false;
    if (fm1) fm1.destroy();
    if (fm2) fm2.destroy();
    if (fm3) fm3.destroy();
    if (fmXr) fmXr.destroy();
    if (fmTwoSs) fmTwoSs.destroy();
    fm1 = null;
    fm2 = null;
    fm3 = null;
    fmXr = null;
    fmTwoSs = null;
    group = null;
    model.mixers = [];
    model.destroy();
  }
  model = null;
};