gasInjection-project/src/views/vent/monitorManager/mainFanMonitor/main.threejs.ts

import * as THREE from 'three';
import { animateCamera } from '/@/utils/threejs/util';
import UseThree from '../../../../utils/threejs/useThree';
import mainWindRect from './mainWind.threejs';
import mainXjWindRect from './mainWind.xj.threejs';
import useEvent from '../../../../utils/threejs/useEvent';

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

// 模型对象、 文字对象
let model: UseThree | undefined, //
  group: THREE.Object3D | undefined,
  bgGroup: THREE.Object3D | undefined,
  mainWindObj: mainWindRect | undefined,
  mainXjWindObj: mainXjWindRect | undefined,
  modalType = 'mainWindRect',
  explosionVentClose = -1,
  explosionVentOpen = -1;

const { mouseDownFn, mousemoveFn, mouseUpFn } = useEvent();

// 打灯光
const addLight = () => {
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(63, 258, -261);
  model?.scene?.add(directionalLight);

  const pointLight6 = new THREE.PointLight(0xffffff, 1.5, 300);
  pointLight6.position.set(64, -12, 129);
  pointLight6.shadow.bias = 0.05;
  model?.scene?.add(pointLight6);
  //
  const pointLight7 = new THREE.PointLight(0xffffff, 1, 500);
  pointLight7.position.set(21, 64, 75);
  pointLight7.shadow.bias = -0.05;
  model?.scene?.add(pointLight7);
};

// 重置摄像头
const resetCamera = () => {
  if (!model) return;
  model.camera?.position.set(-500, 0, 2000);
  model.orbitControls?.update();
  model.camera?.updateProjectionMatrix();
};

const setControls = () => {
  if (model && model.orbitControls) {
    model.orbitControls.panSpeed = 0.5;
    model.orbitControls.rotateSpeed = 0.5;
    model.orbitControls.maxPolarAngle = Math.PI / 3;
    model.orbitControls.minPolarAngle = Math.PI / 4;
  }
};

// 初始化事件
const startAnimation = () => {
  // 定义鼠标点击事件
  model?.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  model?.canvasContainer?.addEventListener('pointerup', mouseUp);
};

// 鼠标点击、松开事件
const mouseEvent = (event) => {
  if (event.button == 0) {
    model?.canvasContainer?.addEventListener('mousemove', mousemove);
    mouseDownFn(<UseThree>model, <THREE.Object3D>group, event, (intersects) => {
      if (modalType === 'mainWindRect' && mainWindObj) {
        mainWindObj?.mousedownModel.call(mainWindObj, intersects);
      } else if (modalType === 'mainXjWindRect' && mainXjWindObj) {
        mainXjWindObj?.mousedownModel.call(mainXjWindObj, intersects);
      }
    });
  }
};

const mouseUp = () => {
  if (!model) return;
  mouseUpFn(model);
  model.canvasContainer?.removeEventListener('mousemove', mousemove);
};

const mousemove = () => {
  mousemoveFn();
};

/* 添加监控数据 */
export const addText = () => {
  if (!mainWindObj) return;
  if (modalType === 'mainWindRect' && mainWindObj) {
    return mainWindObj.addCssText.call(mainWindObj);
  } else if (modalType === 'mainXjWindRect' && mainXjWindObj) {
    return mainXjWindObj.addCssText.call(mainXjWindObj);
  }
};

/* 刷新echarts曲线图 */
export const resetEcharts = (selectData) => {
  if (!mainWindObj) return;
  if (modalType === 'mainWindRect' && mainWindObj) {
    return mainWindObj.addEcharts.call(mainWindObj);
  } else if (modalType === 'mainXjWindRect' && mainXjWindObj) {
    return mainXjWindObj.addEcharts.call(mainXjWindObj);
  }
};

/**
 *
 * @param controlType //操作类型
 * @param deviceType // 设备类型，前后风机
 * @param frequencyVal // 频率
 * @param state // 启停状态
 * @param smokeDirection // 气流路径
 * @returns
 */
export const play = (controlType, deviceType, frequencyVal?, state?, smokeDirection?) => {
  if (!mainWindObj) return;
  if (modalType === 'mainWindRect' && mainWindObj) {
    return mainWindObj.playSmoke.call(mainWindObj, controlType, deviceType, frequencyVal, state, smokeDirection);
  } else if (modalType === 'mainXjWindRect' && mainXjWindObj) {
    return mainXjWindObj.playSmoke.call(mainXjWindObj, controlType, deviceType, frequencyVal, state, smokeDirection);
  }
};

export const playAnimate1 = async (selectData, duration?) => {
  if (!mainWindObj) return;
  let mainObj: mainWindRect | mainXjWindRect | undefined;

  if (modalType === 'mainWindRect') {
    mainObj = mainWindObj;
  } else if (modalType === 'mainXjWindRect') {
    mainObj = mainXjWindObj;
  }
  if (selectData && mainObj) {
    if (selectData.Fan1WindowOpen !== undefined) {
      // 主风机水平窗开启
      if (selectData.Fan1WindowOpen == 1) mainObj?.openOrCloseWindow('front', 'openWindow');
      if (selectData.Fan1WindowOpen == 0) mainObj?.openOrCloseWindow('front', 'closeWindow');
    }
    if (selectData.Fan2WindowOpen !== undefined) {
      // 备风机水平窗开启
      if (selectData.Fan2WindowOpen == 1) mainObj?.openOrCloseWindow('back', 'openWindow');
      if (selectData.Fan2WindowOpen == 0) mainObj?.openOrCloseWindow('back', 'closeWindow');
    }
    if (selectData.Fan1ButterflyOpen !== undefined) {
      if (selectData.Fan1ButterflyOpen == 1) {
        // 主风机蝶阀打开
        mainObj.openOrCloseValve('front', 'open', duration);
      } else {
        // 主风机蝶阀关闭
        mainObj.openOrCloseValve('front', 'close', duration);
      }
    }
    if (selectData.Fan2ButterflyOpen !== undefined) {
      if (selectData.Fan2ButterflyOpen == 1) {
        // 主风机蝶阀打开
        mainObj.openOrCloseValve('back', 'open', duration);
      } else {
        // 主风机蝶阀关闭
        mainObj.openOrCloseValve('back', 'close', duration);
      }
    }

    if (selectData.Fan1FreqHz !== undefined) {
      // 主风机频率设置
      mainObj.resetSmokeParam('front', selectData.Fan1FreqHz, duration);
    }
    if (selectData.Fan2FreqHz !== undefined) {
      // 主风机频率设置
      mainObj.resetSmokeParam('back', selectData.Fan2FreqHz, duration);
    }
    if (selectData.Fan1StartStatus) {
      if (selectData.Fan1StartStatus == 1) {
        // 主风机开启
        mainObj.lookMotor('front', 'open', duration);

        // if (selectData.Fan1FreqForwardRun && selectData.Fan1FreqForwardRun == 1) {
        //   // 主风机正转
        //   await mainWindObj.setSmokeDirection('front', 'tubPositivePath');
        // } else if (selectData.Fan1FreqReverseRun && selectData.Fan1FreqReverseRun == 1) {
        //   // 主风机反转
        //   await mainWindObj.setSmokeDirection('front', 'tubInversePath');
        // }
        // 齿轮转动
        mainObj.startGearAnimation('front', 'open', 'tubPositivePath', selectData.Fan1FreqHz, duration);
        await mainObj.setSmokeDirection('front', 'tubPositivePath');
        if (!mainObj.frontSmoke?.frameId) mainObj?.frontSmoke?.startSmoke(duration);
      } else {
        mainObj?.lookMotor('front', 'close', duration);
      }
    }
    if (selectData.Fan2StartStatus) {
      if (selectData.Fan2StartStatus == 1) {
        // 备风机开启
        mainObj.lookMotor('back', 'open', duration);
        // if (selectData.Fan2FreqForwardRun && selectData.Fan2FreqForwardRun == 1) {
        //   // 主风机正转
        // } else if (selectData.Fan2FreqReverseRun && selectData.Fan2FreqReverseRun == 1) {
        //   // 主风机反转
        // }
        await mainObj.setSmokeDirection('back', 'tubPositivePath');
        if (!mainObj.backSmoke?.frameId) mainObj?.backSmoke?.startSmoke(duration);
      } else {
        mainObj?.lookMotor('back', 'close', duration);
      }
    }
  }
};

export const playAnimate = async (selectData, duration?) => {
  if (!mainWindObj) return;

  let mainObj: mainWindRect | mainXjWindRect | undefined;

  if (modalType === 'mainWindRect') {
    mainObj = mainWindObj;
    // bgGroup.visible = true;
  } else if (modalType === 'mainXjWindRect') {
    mainObj = mainXjWindObj;
    // bgGroup.visible = false;
  }

  if (selectData && mainObj) {
    if (selectData['Fan1FreqHz'] == undefined || selectData['Fan1FreqHz'] == null || selectData['Fan1FreqHz'] == '') selectData['Fan1FreqHz'] = 50;
    if (selectData['Fan2FreqHz'] == undefined || selectData['Fan2FreqHz'] == null || selectData['Fan2FreqHz'] == '') selectData['Fan2FreqHz'] = 50;
    mainObj.resetSmokeParam('front', selectData.Fan1FreqHz, duration);
    mainObj.resetSmokeParam('back', selectData.Fan2FreqHz, duration);
    if (selectData.Fan2StartStatus == 1) {
      // 主风机开启
      mainObj?.lookMotor('front', 'open', duration);
      mainObj?.openOrCloseValve('front', 'open', duration);
      // 1. 已经运行，首次切入动画
      // 2. 在页面上，切换动画
      if (selectData.Fan2FreqForwardRun == 1 && selectData.Fan2FreqReverseRun == 0) {
        // 主风机正转
        mainObj.startGearAnimation('front', 'open', 'tubPositivePath', selectData.Fan2FreqHz, duration);
        await mainObj.setSmokeDirection('front', 'tubPositivePath');
      } else if (selectData.Fan2FreqReverseRun == 1 && selectData.Fan2FreqForwardRun == 0) {
        // 主风机反转
        mainObj.startGearAnimation('front', 'open', 'tubInversePath', selectData.Fan2FreqHz, duration);
        await mainObj.setSmokeDirection('front', 'tubInversePath');
      } else {
        // 默认主风机正转
        mainObj.startGearAnimation('front', 'open', 'tubPositivePath', selectData.Fan2FreqHz, duration);
        await mainObj.setSmokeDirection('front', 'tubPositivePath');
      }

      if (!mainObj?.frontSmoke?.frameId) mainObj?.frontSmoke?.startSmoke(duration);
    } else {
      // 主风机停止
      mainObj.closeDevice('front');
    }
    if (selectData.Fan1StartStatus == 1) {
      // 主风机开启
      mainObj.lookMotor('back', 'open', duration);
      mainObj.openOrCloseValve('back', 'open', duration);
      // 1. 已经运行，首次切入动画
      // 2. 在页面上，切换动画
      if (selectData.Fan1FreqForwardRun == 1 && selectData.Fan1FreqReverseRun == 0) {
        // 主风机正转
        mainObj.startGearAnimation('back', 'open', 'tubPositivePath', selectData.Fan1FreqHz, duration);
        await mainObj.setSmokeDirection('back', 'tubPositivePath');
      } else if (selectData.Fan1FreqReverseRun == 1 && selectData.Fan1FreqForwardRun == 0) {
        // 主风机反转
        mainObj.startGearAnimation('back', 'open', 'tubInversePath', selectData.Fan1FreqHz, duration);
        await mainObj.setSmokeDirection('back', 'tubInversePath');
      } else {
        mainObj.startGearAnimation('back', 'open', 'tubPositivePath', selectData.Fan1FreqHz, duration);
        await mainObj.setSmokeDirection('back', 'tubPositivePath');
      }

      if (!mainObj?.backSmoke?.frameId) mainObj?.backSmoke?.startSmoke(duration);
    } else {
      // 主风机停止
      mainObj.closeDevice('back');
    }

    // 防爆门动画
    if (modalType === 'mainWindRect' && selectData['ExplosionVentOpen'] == 1 && explosionVentOpen !== 1) {
      if (explosionVentOpen == -1) {
        // 直接打开
        mainObj.playAnimation('open', 0);
      } else {
        mainObj.playAnimation('open');
      }
      explosionVentOpen = 1;
      explosionVentClose = 0;
    }
    if (modalType === 'mainWindRect' && selectData['ExplosionVentClose'] == 1 && explosionVentClose !== 1) {
      if (explosionVentOpen == -1) {
        // 直接关闭
        mainObj.playAnimation('close', 0);
      } else {
        mainObj.playAnimation('close');
      }

      explosionVentClose = 1;
      explosionVentOpen = 0;
    }
  }
};

// 切换风机类型
export const setModelType = (type) => {
  if (!model) return;
  modalType = type;
  return new Promise((resolve) => {
    // 停止气流动画
    mainWindObj?.stopSmoke();
    mainXjWindObj?.stopSmoke();

    if (group) model?.scene?.remove(group);
    if (modalType === 'mainWindRect' && mainWindObj && mainWindObj.group) {
      mainXjWindObj?.clearCssText();
      (<UseThree>model).startAnimation = mainWindObj.render.bind(mainWindObj);
      group = mainWindObj.group;
      setTimeout(async () => {
        resolve(null);
        // const position = mainWindObj.group.position;
        const position = new THREE.Vector3(-1.0127, -3.4717, -7.864);
        const oldCameraPosition = { x: -332.39, y: 283.47, z: 438.61 };
        await animateCamera(
          oldCameraPosition,
          { x: -3.41, y: -29.01, z: 8.84 },
          { x: -1.7927, y: 70.8399, z: 120.8451 },
          { x: position.x, y: position.y, z: position.z },
          model,
          0.8
        );
        if (group) model?.scene?.add(group);
      }, 300);
    }
    if (modalType === 'mainXjWindRect' && mainXjWindObj && mainXjWindObj.group) {
      mainWindObj?.clearCssText();
      (<UseThree>model).startAnimation = mainXjWindObj.render.bind(mainXjWindObj);
      group = mainXjWindObj.group;
      setTimeout(async () => {
        resolve(null);
        // const position = mainWindObj.group.position;
        const position = new THREE.Vector3(12.96, 23.17, -23.16);
        const oldCameraPosition = { x: -332.39, y: 283.47, z: 438.61 };
        await animateCamera(
          oldCameraPosition,
          { x: -3.41, y: -29.01, z: 8.84 },
          { x: 12.09, y: 105.51, z: 119.45 },
          { x: position.x, y: position.y, z: position.z },
          model,
          0.8
        );
        if (group) model?.scene?.add(group);
      }, 300);
    }
  });
};

export const mountedThree = (playerVal1) => {
  return new Promise(async (resolve) => {
    model = new UseThree('#main3D', '#main3DCSS');
    model.setEnvMap('test1');
    model.renderer.toneMappingExposure = 1.0;
    if (model.renderer) {
      model.renderer.sortObjects = true;
    }
    addLight();
    setControls();
    resetCamera();
    model.setGLTFModel(['bg']).then(async (gltf) => {
      bgGroup = gltf[0] as THREE.Object3D;
      bgGroup.position.set(3.43, 27.13, 22.0);
      model?.scene?.add(bgGroup);
      mainWindObj = new mainWindRect(model, playerVal1);
      await mainWindObj.mountedThree();
      mainXjWindObj = new mainXjWindRect(model, playerVal1);
      await mainXjWindObj.mountedThree();
      model?.animate();
      resolve(null);
    });
    startAnimation();
  });
};

export const destroy = () => {
  if (model) {
    model.isRender = false;
    console.log('场景销毁前信息----------->', model.renderer?.info);
    mainWindObj?.destroy();
    mainWindObj = undefined;
    mainXjWindObj?.destroy();
    mainXjWindObj = undefined;
    model.clearGroup(bgGroup);
    bgGroup = undefined;
    group = undefined;
    model.destroy();
    model = undefined;
  }
};