mky-vent-base/src/views/vent/monitorManager/workFaceMonitor/wokeFace.threejs.ts

import * as THREE from 'three';
import UseThree from '../../../../utils/threejs/useThree';
import WorkFace from './workFace.threejs.base';
import { animateCamera } from '/@/utils/threejs/util';
import useEvent from '../../../../utils/threejs/useEvent';

// 模型对象、 文字对象
let model,
  workFaceObj: WorkFace | undefined,
  group,
  fiberType = 'workFace'; // workerFaceFiber

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

// 鼠标点击、松开事件
const mouseEvent = (event) => {
  if (event.button == 0 && group) {
    model.canvasContainer?.addEventListener('mousemove', mousemove);
    const groud = group.getObjectByName('groud');
    const intakewind = group.getObjectByName('workFace-jin');
    const returnwind = group.getObjectByName('workFace-hui');
    mouseDownFn(model, [groud, intakewind, returnwind], event);
    console.log('摄像头控制信息', model.orbitControls, model.camera);
  }
};

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

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

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 setModelType = (type, n = Math.ceil(Math.random() * 4), isShowPlane) => {
  fiberType = type;
  return new Promise((resolve) => {
    if (workFaceObj) {
      group = workFaceObj.group;

      workFaceObj.setModalType(type);
      showOrHideGasPlane(isShowPlane);
      const oldControlsPosition = { x: 0.055, y: 0.062, z: 0.117 };
      const oldCameraPosition = { x: 0.055, y: 0.062, z: 0.117 };
      const newCameraPosition = { x: 0.019426503104799448, y: 30.779998695745917, z: 44.32480656959464 };
      const newControlsPosition = { x: 0.021191, y: 0.077857, z: 0.069123 };

      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(workFaceObj?.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 = () => {
  return new Promise(async (resolve) => {
    model = new UseThree('#workFace3D', '#workFace3DCSS');
    model.setEnvMap('test1.hdr');
    model.renderer.toneMappingExposure = 1.0;
    // model.renderer = 1;
    workFaceObj = new WorkFace(model);
    await workFaceObj.mountedThree();

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

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