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

import * as THREE from 'three';
import { animateCamera, setModalCenter, updateAxisCenter } from '/@/utils/threejs/util';
import UseThree from '../../../../utils/threejs/useThree';
import Nitrogen from './nitrogen.dishang.threejs';
import { useAppStore } from '/@/store/modules/app';
// 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, //
  group,
  nitrogenObj,
  modalType = 'lmWindRect';

const appStore = useAppStore();

// 鼠标点击、松开事件
const mouseEvent = (event) => {
  event.stopPropagation();
  const widthScale = appStore.getWidthScale;
  const heightScale = appStore.getHeightScale;
  // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
  model.mouse.x =
    ((-model.canvasContainer.getBoundingClientRect().left * widthScale + event.clientX) / (model.canvasContainer.clientWidth * widthScale)) * 2 - 1;
  model.mouse.y =
    -((-model.canvasContainer.getBoundingClientRect().top + event.clientY) / (model.canvasContainer.clientHeight * heightScale)) * 2 + 1;
  (model.rayCaster as THREE.Raycaster).setFromCamera(model.mouse, model.camera as THREE.Camera);

  // console.log('相机与控制器信息--->', model.camera, model.orbitControls);
  // updateAxisCenter(model, event);

  if (group) {
    const intersects = model.rayCaster?.intersectObjects(group.children, false) as THREE.Intersection[];
    if (intersects.length > 0) {
      // 单道、 双道
      if (modalType === 'nitrogen') {
        nitrogenObj.mousedownModel.call(nitrogenObj, intersects);
      }
    }
    console.log('99999------>', model.camera, model.orbitControls);
  }
};

/* 添加监控数据 */
export const addText = (selectData) => {
  if (modalType === 'nitrogen') {
    return nitrogenObj.addText.call(nitrogenObj, selectData);
  }
};

export const play = () => {
  if (modalType === 'nitrogen') {
    return nitrogenObj.play.call(nitrogenObj);
  }
};

// 切换风窗类型
export const setModelType = (type) => {
  modalType = type;
  model.camera.position.set(-1000, 100, 500);

  return new Promise((resolve) => {
    // 显示双道风窗
    if (modalType === 'nitrogen') {
      group = nitrogenObj.group;
      // setModalCenter(group);
      const oldCameraPosition = { x: -1000, y: 100, z: 500 };
      const oldControlsPosition = { x: -10, y: 10, z: 10 };
      model.scene.add(nitrogenObj.group);
      setTimeout(async () => {
        resolve(null);
        await animateCamera(
          oldCameraPosition,
          oldControlsPosition,
          // { x: -0.24658823766780538, y: 35.50352092191473, z: 83.90511756512278 },
          // { x: -0.24658823766780538, y: 35.50352092191473, z: 83.90511756512278 },
          // { x: 1.5582599568763913, y: -3.2828007511721147, z: 2.2606374587827234 },
          { x: 0.2528210526315788, y: 38.731704155124646, z: 66.23189916897506 },
          { x: 0, y: 0, z: 0 },
          model,
          0.8
        );
      }, 300);
    }
  });
};

export const mountedThree = (nitrogenNum) => {
  return new Promise(async (resolve) => {
    model = new UseThree('#nitrogen3D', '#nitrogenCss3D');
    model.setEnvMap('test1');
    model.renderer.toneMappingExposure = 0.8;
    model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
    nitrogenObj = new Nitrogen(model);
    await nitrogenObj.mountedThree(nitrogenNum);
    setModelType('nitrogen');
    resolve(null);
    model.animate();
  });
};

export const destroy = () => {
  if (model) {
    nitrogenObj?.destroy();
    model.deleteModal();
    model = null;
    group = null;
  }
};