vent-template/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 { modal } from 'vxe-table';

// 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,
  // compressorObj: Nitrogen | undefined,
  modalType = 'compressor1';
const compressorObjArr = <Nitrogen[] | undefined[]>[];

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

// 鼠标点击、松开事件
const mouseEvent = (event) => {
  // 单道、 双道
  if (event.button == 0 && model && group) {
    model.canvasContainer?.addEventListener('mousemove', mousemove);
    mouseDownFn(model, group, event, (intersects) => {
      compressorObjArr.forEach((compressorObj, index) => {
        if (modalType === 'compressor' + index) {
          compressorObj?.mousedownModel.call(compressorObj, intersects);
        }
      });
      console.log('摄像头控制信息', model?.orbitControls, model?.camera);
    });
  }
};

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 (!compressorObj) return;
};

// 切换风窗类型
export const setModelType = (modalTypeName) => {
  modalType = modalTypeName;
  if (group) {
    model?.scene?.remove(group);
    // model?.initCSS3Renderer('#compressorCss3D');
  }

  let compressorObj;
  compressorObjArr.forEach((compressor, index) => {
    if (modalTypeName === 'compressor' + index) {
      compressorObj = compressor;
      if (!compressor.CSSCanvasContainer?.contains(compressor.css3dRender.domElement))
        compressor.CSSCanvasContainer?.appendChild(compressor.css3dRender.domElement);
    } else {
      if (compressor.CSSCanvasContainer?.contains(compressor.css3dRender.domElement))
        compressor.CSSCanvasContainer?.removeChild(compressor.css3dRender.domElement);
    }
  });
  model.renderAnimationScene = () => {
    compressorObj?.css3dRender?.render(model?.scene as THREE.Scene, model?.camera as THREE.PerspectiveCamera);
  };
  return new Promise((resolve) => {
    group = compressorObj.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: -107.33215442283758, y: 44.57609039633937, z: 2.0459979417299334 };
      newControlsPosition = { x: -4.615459422837561, y: -16.819491603660634, z: 1.9862299417299336 };
    } else if (group?.children.length == 5) {
      newCameraPosition = { x: -107.33215442283758, y: 44.57609039633937, z: 2.0459979417299334 };
      newControlsPosition = { x: -4.615459422837561, y: -16.819491603660634, z: 1.9862299417299336 };
    } 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 mountedThree = (monitorDataGroupArr) => {
  return new Promise(async (resolve) => {
    model = new UseThree('#compressor3D');
    model.setEnvMap('test1');
    model.renderer.toneMappingExposure = 1.0;
    model.camera?.layers.enable(0);
    model.canvasContainer?.addEventListener('mousedown', mouseEvent);
    model.canvasContainer?.addEventListener('pointerup', mouseUp);
    for (let i = 0; i < monitorDataGroupArr.length; i++) {
      const monitorDataGroup = monitorDataGroupArr[i];
      const compressorObj = new Nitrogen(model);
      await compressorObj.mountedThree(monitorDataGroup, '#compressorCss3D' + (i + 1));
      compressorObj.modelName = 'compressor' + (i + 1);
      compressorObjArr.push(compressorObj);
    }
    resolve(null);
    model.animate();
  });
};

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