gasInjection-project/src/views/vent/monitorManager/nitrogen/nitrogen.threejs.ts

import * as THREE from 'three';
import { animateCamera, setModalCenter, updateAxisCenter } from '/@/utils/threejs/util';
import UseThree from '../../../../utils/threejs/useThree';
import useEvent from '../../../../utils/threejs/useEvent';
import Nitrogen from './nitrogen.dishang.threejs';

// 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,
  compressorObj1: Nitrogen | undefined,
  compressorObj2: Nitrogen | undefined,
  modalType = 'compressor';

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

// 鼠标点击、松开事件
const mouseEvent = (event) => {
  // 单道、 双道
  if (event.button == 0 && model && group) {
    model.canvasContainer?.addEventListener('mousemove', mousemove);
    mouseDownFn(model, group, event, (intersects) => {
      if (modalType === 'compressor1') {
        compressorObj1?.mousedownModel.call(compressorObj1, intersects);
      }
      if (modalType === 'compressor2') {
        compressorObj2?.mousedownModel.call(compressorObj2, intersects);
      }
    });
  }
};

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

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

const render = () => {
  if (model && model.isRender) {
    model.animationId = requestAnimationFrame(render.bind(this));
    model.stats?.update();
    if (model.renderEnabled) {
      model.render();
    }
  }
};

/* 添加监控数据 */
export const addText = () => {
  if (!compressorObj1) return;
  if (modalType === 'compressor1') {
    return compressorObj1.addCssText.call(compressorObj1);
  } else if (modalType === 'compressor2') {
    return compressorObj2.addCssText.call(compressorObj2);
  }
};

export const play = () => {
  if (modalType === 'compressor1' && compressorObj1) {
    return compressorObj1.play.call(compressorObj1);
  }
  if (modalType === 'compressor2' && compressorObj2) {
    return compressorObj2.play.call(compressorObj2);
  }
};

// 切换风窗类型
export const setModelType = (type) => {
  modalType = type;

  if (group) {
    // compressorObj1?.clearCssText();
    model?.scene?.remove(group);
    // model?.initCSS3Renderer('#compressorCss3D');
  }

  return new Promise((resolve) => {
    // 显示双道风窗

    if (modalType === 'compressor1' && compressorObj1 && model) {
      group = compressorObj1.group;
      model.renderAnimationScene = () => {
        compressorObj1?.css3dRender?.render(model?.scene as THREE.Scene, model?.camera as THREE.PerspectiveCamera);
      };
      // if (model?.scene?.getObjectByName('compressor2')) {
      //   if (compressorObj2) model?.scene?.remove(compressorObj2.group);
      // }
    }
    if (modalType === 'compressor2' && compressorObj2 && model) {
      group = compressorObj2.group;
      model.renderAnimationScene = () => {
        compressorObj2?.css3dRender?.render(model?.scene as THREE.Scene, model?.camera as THREE.PerspectiveCamera);
      };
      // if (model?.scene?.getObjectByName('compressor1')) {
      //   if (compressorObj1) model?.scene?.remove(compressorObj1.group);
      // }
    }
    model?.camera?.position.set(-1000, 100, 500);
    const oldCameraPosition = { x: -1000, y: 100, z: 500 };
    const oldControlsPosition = { x: 0, y: 0, z: 0 };
    let newCameraPosition = { x: 0, y: 0, z: 0 },
      newControlsPosition = { x: 0, y: 0, z: 0 };
    if (group?.children.length == 6) {
      newCameraPosition = { x: -1.7434040517387115, y: 46.41089142470955, z: 114.33388865672832 };
      newControlsPosition = { x: -1.6994314417499141, y: -12.38981035037152, z: 10.110013648346193 };
    } else if (group?.children.length == 5) {
      newCameraPosition = { x: -1.2741159124866441, y: 46.04318455197148, z: 95.25814325750986 };
      newControlsPosition = { x: -1.699431, y: -12.38981, z: -1.699431 };
    } else if (group?.children.length == 4) {
      newCameraPosition = { x: -2.0540155219473597, y: 40.869414434737195, z: 97.8637568969557 };
      newControlsPosition = { x: -2.01631417107236, y: -9.544836585137801, z: 8.50481206883075 };
    } else if (group?.children.length == 3) {
      newCameraPosition = { x: -0.8949900855095378, y: 44.03213312648178, z: 78.19288289339097 };
      newControlsPosition = { x: -0.4945087067301434, y: -9.810777468925817, z: -3.179982369050871 };
    } else if (group?.children.length == 2) {
      newCameraPosition = { x: -1.2741159124866441, y: 46.04318455197148, z: 70.25814325750986 };
      newControlsPosition = { x: -1.699431, y: -12.38981, z: -1.699431 };
    } else if (group?.children.length == 1) {
      newCameraPosition = { x: -1.2741159124866441, y: 46.04318455197148, z: 70.25814325750986 };
      newControlsPosition = { x: -1.699431, y: -12.38981, z: -1.699431 };
    }

    setTimeout(async () => {
      resolve(null);
      if (group) model?.scene?.add(group);
      await animateCamera(oldCameraPosition, oldControlsPosition, newCameraPosition, newControlsPosition, model, 0.8);
    }, 300);
  });
};

export const clearCssText = () => {
  if (modalType === 'compressor' && compressorObj1) {
    return compressorObj1.clearCssText.call(compressorObj1);
  }
};

export const mountedThree = (monitorDataGroupNum1, monitorDataGroupNum2) => {
  return new Promise(async (resolve) => {
    model = new UseThree('#compressor3D');
    model.setEnvMap('test1');
    model.renderer.toneMappingExposure = 1.0;
    model.canvasContainer?.addEventListener('mousedown', mouseEvent);
    model.canvasContainer?.addEventListener('pointerup', mouseUp);
    compressorObj1 = new Nitrogen(model);
    await compressorObj1.mountedThree(monitorDataGroupNum1, '#compressorCss3D');
    compressorObj1.modelName = 'compressor1';

    compressorObj2 = new Nitrogen(model);
    await compressorObj2.mountedThree(monitorDataGroupNum2, '#compressorCss3D1');
    compressorObj2.modelName = 'compressor2';
    resolve(null);
    // render();
    model.animate();
    // 添加摄像机辅助

    // const helper = new THREE.CameraHelper(model.camera as THREE.Camera);
    // model?.scene?.add(helper);
  });
};

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