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('intakewind01');
    const returnwind = group.getObjectByName('returnwind');
    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 setCss3D = () => {
  workFaceObj?.setCss3D();
};
export const clearCss3D = () => {
  workFaceObj?.clearCss3D();
};

// 切换风窗类型
export const setModelType = (type, n = Math.ceil(Math.random() * 10)) => {
  debugger;
  fiberType = type;
  return new Promise((resolve) => {
    if (workFaceObj) {
      workFaceObj.clearPlanes();
      group = workFaceObj.group;

      workFaceObj.setModalType(type);
      // 判断模型类型
      if (type == 'workFace1') {
        var oldControlsPosition = { x: 0.055, y: 0.062, z: 0.117 };
        var oldCameraPosition = { x: 0.055, y: 0.062, z: 0.117 };
        var newCameraPosition = { x: -0.17182200678070425, y: 1.7188311320712673, z: 1.787394450495768 };
        var newControlsPosition = { x: -0.171622930063528, y: -0.1442344658741759, z: 0.032110784753260874 };
      } else if (type == 'workFace2') {
        var oldControlsPosition = { x: 0.055, y: 0.062, z: 0.117 };
        var oldCameraPosition = { x: 1.403, y: 3.354, z: 2.873 };
        var newCameraPosition = { x: -0.0271, y: 0.9205, z: 0.1973 };
        var newControlsPosition = { x: -0.027, y: 0.1244, z: -0.0306 };
      } else if (type == 'workFace3') {
        var oldControlsPosition = { x: 0.055, y: 0.062, z: 0.117 };
        var oldCameraPosition = { x: 1.403, y: 3.354, z: 2.873 };
        var newCameraPosition = { x: -0.026, y: 0.927, z: 0.333 };
        var newControlsPosition = { x: -0.026, y: 0.089, z: 0.093 };
      } else {
        var oldControlsPosition = { x: 0.055, y: 0.062, z: 0.117 };
        var oldCameraPosition = { x: 1.403, y: 3.354, z: 2.873 };
        var newCameraPosition = { x: -0.17182200678070425, y: 1.7188311320712673, z: 1.787394450495768 };
        var newControlsPosition = { x: -0.171622930063528, y: -0.1442344658741759, z: 0.032110784753260874 };
      }
      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);
        }
        workFaceObj?.setPlanes(n);
        await animateCamera(oldCameraPosition, oldControlsPosition, newCameraPosition, newControlsPosition, model, 0.8);
      }, 600);
    }
  });
};

export const mountedThree = () => {
  return new Promise(async (resolve) => {
    model = new UseThree('#workFace3D', '#workFace3DCSS');
    model.setEnvMap('test1');
    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;
    workFaceObj.destroy();
    workFaceObj = undefined;
    model.destroy();
    model = null;
    group = null;
  }
};