mky-vent-base/src/views/vent/monitorManager/gasPumpMonitor/gasPump.threejs.ts

import * as THREE from 'three';
import UseThree from '../../../../utils/threejs/useThree';
import gasPumpBase from './gasPump.threejs.over';
import gasPumpUnder from './gasPump.threejs.under';
import { animateCamera, setModalCenter } from '/@/utils/threejs/util';
import useEvent from '../../../../utils/threejs/useEvent';

// 模型对象、 文字对象
let model: UseThree | undefined,
  gasPumpBaseObj: gasPumpBase | undefined,
  gasPumpUnderObj: gasPumpUnder | undefined,
  group: THREE.Object3D | undefined,
  gasPumpType = 'gasPump';

const { mouseDownFn } = useEvent();

// 鼠标点击事件
const mouseEvent = (event) => {
  if (event.button == 0) {
    mouseDownFn(<UseThree>model, <THREE.Object3D>group, event, (intersects) => {
      if (gasPumpType === 'gasPump') {
        // gasPumpBaseObj.mousedownModel.call(gasPumpBaseObj, intersects);
      }
    });
  }
};

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

export const playAnimate = (monitorData: any) => {
  if (gasPumpType === 'gasPumpUnder') {
    gasPumpUnderObj?.handleAnimation(monitorData);
  }
};

export const addgasPumpText = (selectData) => {
  if (gasPumpType === 'gasPump') {
    // return gasPumpBaseObj.addgasPumpText.call(gasPumpBaseObj, selectData);
  }
};

// 切换模型类型
export const setModelType = (type) => {
  gasPumpType = type;
  return new Promise((resolve) => {
    if (gasPumpType === 'gasPump' && gasPumpBaseObj && gasPumpBaseObj.group) {
      if (model?.scene?.getObjectByName('gasPumpUnder') && gasPumpUnderObj && gasPumpUnderObj.group) {
        model.scene.remove(gasPumpUnderObj.group);
      }
      group = gasPumpBaseObj.group;
      // model.isRender = false;
      const oldCameraPosition = { x: 15.9074, y: 5.40264, z: 27.12551 };
      setTimeout(async () => {
        model?.scene?.add(group);
        await animateCamera(
          oldCameraPosition,
          { x: 0.544, y: 0.3335, z: 0.29222 },
          { x: 0.0553, y: 1.2775, z: 3.7402 },
          { x: 0.0731, y: -0.162, z: 0.562 },
          model,
          0.6
        );
      }, 300);

      resolve(null);
    }
    if (gasPumpType === 'gasPumpUnder' && gasPumpUnderObj && gasPumpUnderObj.group) {
      if (model?.scene?.getObjectByName('gasPump') && gasPumpBaseObj && gasPumpBaseObj.group) {
        model.scene.remove(gasPumpBaseObj.group);
      }
      gasPumpUnderObj.addCssText();
      group = gasPumpUnderObj.group;
      // model.isRender = true;
      const oldCameraPosition = { x: 15.9074, y: 5.40264, z: 27.12551 };
      setTimeout(async () => {
        model?.scene?.add(group);
        await animateCamera(
          oldCameraPosition,
          { x: 0.544, y: 0.3335, z: 0.29222 },
          { x: -11.014079961863667, y: 1.6456786378357198, z: 5.733554317319543 },
          { x: -7.043053237796046, y: 0.3354979232986092, z: -0.10561004136342216 },
          model,
          0.6
        );
      }, 300);

      resolve(null);
    }
  });
};

export const mountedThree = () => {
  return new Promise(async (resolve) => {
    model = new UseThree('#gasPump3D', '#gas3DCSS');
    model.setEnvMap('test2');
    model.renderer.toneMappingExposure = 1.0;
    // model.renderer.outputEncoding = THREE.sRGBEncoding;
    gasPumpBaseObj = new gasPumpBase(model);
    await gasPumpBaseObj.mountedThree();

    gasPumpUnderObj = new gasPumpUnder(model);
    await gasPumpUnderObj.mountedThree();

    addMouseEvent();
    model.animate();
    resolve(null);
  });
};

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