gasInjection-project/src/views/vent/gas/gasAssessment/threejs/gasAssessmen.threejs.ts

import * as THREE from 'three';
import UseThree from '@/utils/threejs/useThree';
import GasAssessmen from './gasAssessmen.threejs.base';
import GasUnit from './gasUnit.threejs.base';
import { animateCamera, setModalCenter } from '/@/utils/threejs/util';
import useEvent from '@/utils/threejs/useEvent';
import gsap from 'gsap';
import { Ref } from 'vue';

// 模型对象、 文字对象
let model, workFaceObj: GasAssessmen | undefined, gasUnit: GasUnit | undefined, group;
let modalType: Ref<string>;
let activeId: Ref<string>;
const { mouseDownFn } = useEvent();

// 鼠标点击、松开事件
const mouseEvent = (event) => {
  if (event.button == 0 && group) {
    if (modalType?.value == 'workFace') {
      mouseDownFn(<UseThree>model, <THREE.Object3D>workFaceObj?.planeGroup, event, (intersects) => {
        workFaceObj?.mousedownModel(intersects).then(async (unitId: string) => {
          if (activeId) activeId.value = unitId;
          await setModelType('toUnit');
        });
      });
    } else if (modalType?.value == 'gasUnit') {
      mouseDownFn(<UseThree>model, <THREE.Object3D>gasUnit?.group, event, (intersects) => {
        gasUnit?.mousedownModel(intersects).then(async () => {
          await setModelType('toWorkFace');
        });
      });
    }
  }
};

const mouseUp = () => {
  if (!model) return;
  workFaceObj?.mouseUpModel.call(workFaceObj);
};

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

const render = () => {
  if (model && model.isRender) {
    model.animationId = requestAnimationFrame(render);
    model.css3dRender?.render(model.scene as THREE.Scene, model.camera as THREE.PerspectiveCamera);
    model.stats?.update();
    model.orbitControls?.update();
    model.camera?.updateMatrixWorld();
    workFaceObj?.render();
  }
};

export const setCss3D = (unitList: any[]) => {
  workFaceObj?.setCss3D(unitList);
};
export const clearCss3D = () => {
  workFaceObj?.clearCss3D();
};
export const setPlanes = (unitList) => {
  workFaceObj?.setPlanes(unitList);
};
// 切换风窗类型
export const setModelType = (type) => {
  debugger;
  return new Promise((resolve) => {
    const newCameraPosition = { x: -0.1077663653208413, y: 3.730662630250735, z: 5.174545297338427 };
    const newControlsPosition = { x: -0.0997084705839992, y: -0.050186843433472336, z: -0.3263852289773498 };

    if (type == 'toUnit' && workFaceObj && gasUnit) {
      if (modalType) modalType.value = 'gasUnit';
      gsap.to(workFaceObj.group.scale, {
        x: 30,
        y: 30,
        z: 30,
        duration: 1,
        ease: 'easeInCirc',
        onComplete: function () {
          gasUnit.group.scale.set(20, 20, 20);
          workFaceObj.group.visible = false;
          setModalCenter(gasUnit.group);
          gasUnit.group.visible = true;
          const newCameraPosition1 = { x: 0.07728832423767938, y: 2.000608719643587, z: 3.920565793165089 };
          const newControlsPosition1 = { x: 0.08291552616960282, y: -0.6396998462924676, z: 0.07906121096410117 };
          animateCamera(newCameraPosition, newControlsPosition, newCameraPosition1, newControlsPosition1, model, 0.8);
          gsap.to(gasUnit.group.scale, {
            x: 1,
            y: 1,
            z: 1,
            duration: 2,
            ease: 'easeOutCubic',
            onComplete: function () {},
          });
        },
      });
    } else if (type == 'toWorkFace') {
      // 由抽采单元切换到工作面
      gsap.to(gasUnit.group.scale, {
        x: 20,
        y: 20,
        z: 20,
        duration: 1,
        ease: 'easeInCirc',
        onComplete: function () {
          workFaceObj.group.scale.set(20, 20, 20);
          gasUnit.group.visible = false;
          setModalCenter(workFaceObj.group);
          workFaceObj.group.visible = true;
          const newCameraPosition1 = { x: 0.07728832423767938, y: 2.000608719643587, z: 3.920565793165089 };
          const newControlsPosition1 = { x: 0.08291552616960282, y: -0.6396998462924676, z: 0.07906121096410117 };
          animateCamera(newCameraPosition1, newControlsPosition1, newCameraPosition, newControlsPosition, model, 0.8);
          gsap.to(workFaceObj.group.scale, {
            x: 1,
            y: 1,
            z: 1,
            duration: 1,
            ease: 'easeOutCubic',
            onComplete: function () {
              if (modalType) modalType.value = 'workFace';
            },
          });
        },
      });
    } else {
      // 初始加载
      group = workFaceObj.group;
      showOrHideGasPlane(true);
      const oldControlsPosition = { x: -0.086221, y: -0.612538, z: 0.33468 };
      const oldCameraPosition = { x: 19.589025920044726, y: 7.437905524957071, z: 23.032636074396976 };

      if (model.scene.getObjectByName('workFace')) {
        model.camera.position.set(oldCameraPosition.x, oldCameraPosition.y, oldCameraPosition.z + 20);
        model.orbitControls.target.set(oldControlsPosition.x, oldControlsPosition.y, oldControlsPosition.z);
      }
      setTimeout(async () => {
        resolve(null);
        if (!model.scene.getObjectByName('workFace')) {
          model.scene.add(group);
          model.scene.add(gasUnit.group);
        }
        await animateCamera(oldCameraPosition, oldControlsPosition, newCameraPosition, newControlsPosition, model, 0.8);
      }, 600);
    }
  });
};

export const showOrHideGasPlane = (isShowPlane) => {
  if (workFaceObj) {
    if (isShowPlane) {
      workFaceObj.planeGroup.visible = true;
    } else {
      workFaceObj.planeGroup.visible = false;
    }
  }
};

export const mountedThree = (pageType: Ref<string>, activeUnitId: Ref<string>) => {
  modalType = pageType;
  activeId = activeUnitId;
  return new Promise(async (resolve) => {
    model = new UseThree('#workFace3D', '#workFace3DCSS');
    model.setEnvMap('test1.hdr');
    model.renderer.toneMappingExposure = 1.0;
    // model.renderer = 1;
    workFaceObj = new GasAssessmen(model);
    await workFaceObj.mountedThree();

    gasUnit = new GasUnit(model);
    await gasUnit.mountedThree();

    addMouseEvent();
    render();
    resolve(null);
  });
};

export const destroy = () => {
  if (model) {
    model.isRender = false;
    workFaceObj?.destroy();
    workFaceObj = undefined;
    model.destroy();
    model = null;
    group = null;
  }
};