mky-vent-base/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 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,
  modalType = 'mainWind',
  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 spotLight = new THREE.SpotLight();
  // spotLight.angle = Math.PI / 16;
  // spotLight.penumbra = 0;
  // // spotLight.castShadow = true;
  // spotLight.position.set(500, 500, 687);
  // model?.scene?.add(spotLight);

  // spotLight.shadow.camera.near = 0.5; // default
  // spotLight.shadow.camera.far = 1000; // default
  // spotLight.shadow.focus = 1;
  // spotLight.shadow.bias = -0.000002;

  // gui.add(pointLight7.position, 'x', -1000, 1000);
  // gui.add(pointLight7.position, 'y', -1000, 1000);
  // gui.add(pointLight7.position, 'z', -1000, 1000);
  // gui.add(spotLight.shadow, 'bias', -1, 1);
  // gui.add(spotLight.shadow, 'focus', -2, 2);
  // gui.add(pointLight7, 'distance', 0, 1000);

  // gui.add(pointLight6.position, 'x', -500, 500);
  // gui.add(pointLight6.position, 'y', -500, 500);
  // gui.add(pointLight6.position, 'z', -500, 500);
};

// 重置摄像头
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.mousedownModel.call(mainWindObj, 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);
  }
};

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

/**
 *
 * @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);
  }
};

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

      if (selectData.Fan1FreqHz !== undefined) {
        // 主风机频率设置
        mainWindObj.resetSmokeParam('front', selectData.Fan1FreqHz, duration);
      }
      if (selectData.Fan2FreqHz !== undefined) {
        // 主风机频率设置
        mainWindObj.resetSmokeParam('back', selectData.Fan2FreqHz, duration);
      }
      if (selectData.Fan1StartStatus) {
        if (selectData.Fan1StartStatus == 1) {
          // 主风机开启
          mainWindObj.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');
          // }
          // 齿轮转动
          mainWindObj.startGearAnimation('front', 'open', 'tubPositivePath', selectData.Fan1FreqHz, duration);
          await mainWindObj.setSmokeDirection('front', 'tubPositivePath');
          if (!mainWindObj.frontSmoke?.frameId) mainWindObj?.frontSmoke?.startSmoke(duration);
        } else {
          mainWindObj?.lookMotor('front', 'close', duration);
        }
      }
      if (selectData.Fan2StartStatus) {
        if (selectData.Fan2StartStatus == 1) {
          // 备风机开启
          mainWindObj.lookMotor('back', 'open', duration);
          // if (selectData.Fan2FreqForwardRun && selectData.Fan2FreqForwardRun == 1) {
          //   // 主风机正转
          // } else if (selectData.Fan2FreqReverseRun && selectData.Fan2FreqReverseRun == 1) {
          //   // 主风机反转
          // }
          await mainWindObj.setSmokeDirection('back', 'tubPositivePath');
          if (!mainWindObj.backSmoke?.frameId) mainWindObj?.backSmoke?.startSmoke(duration);
        } else {
          mainWindObj?.lookMotor('back', 'close', duration);
        }
      }
    }
  }
};

export const playAnimate = async (selectData, duration?) => {
  if (!mainWindObj) return;
  if (modalType === 'mainWindRect') {
    if (selectData) {
      if (selectData['Fan1FreqHz'] == undefined || selectData['Fan1FreqHz'] == null || selectData['Fan1FreqHz'] == '') selectData['Fan1FreqHz'] = 50;
      if (selectData['Fan2FreqHz'] == undefined || selectData['Fan2FreqHz'] == null || selectData['Fan2FreqHz'] == '') selectData['Fan2FreqHz'] = 50;
      mainWindObj.resetSmokeParam('front', selectData.Fan1FreqHz, duration);
      mainWindObj.resetSmokeParam('back', selectData.Fan2FreqHz, duration);
      if (selectData.Fan1StartStatus == 1) {
        // 主风机开启
        mainWindObj?.lookMotor('front', 'open', duration);
        mainWindObj?.openOrCloseValve('front', 'open', duration);
        // 1. 已经运行，首次切入动画
        // 2. 在页面上，切换动画
        if (selectData.Fan1FreqForwardRun == 1 && selectData.Fan1FreqReverseRun == 0) {
          // 主风机正转
          mainWindObj.startGearAnimation('front', 'open', 'tubPositivePath', selectData.Fan1FreqHz, duration);
          await mainWindObj.setSmokeDirection('front', 'tubPositivePath');
        } else if (selectData.Fan1FreqReverseRun == 1 && selectData.Fan1FreqForwardRun == 0) {
          // 主风机反转
          mainWindObj.startGearAnimation('front', 'open', 'tubInversePath', selectData.Fan1FreqHz, duration);
          await mainWindObj.setSmokeDirection('front', 'tubInversePath');
        } else {
          // 默认主风机正转
          mainWindObj.startGearAnimation('front', 'open', 'tubPositivePath', selectData.Fan1FreqHz, duration);
          await mainWindObj.setSmokeDirection('front', 'tubPositivePath');
        }

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

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

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

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

// 切换风机类型
export const setModelType = (type) => {
  if (!model) return;
  modalType = type;
  return new Promise((resolve) => {
    if (modalType === 'mainWindRect' && mainWindObj && mainWindObj.group) {
      (<UseThree>model).startAnimation = mainWindObj.render.bind(mainWindObj);
      group = mainWindObj.group;
      setTimeout(async () => {
        resolve(null);
        // const position = mainWindObj.group.position;
        const position = new THREE.Vector3(-0.45, 0.84, -10.35);
        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.23, y: 75.15, z: 118.36 },
          { 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();
      model?.animate();
      resolve(null);
    });
    startAnimation();
  });
};

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