hsq-pro/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();
  }
};

export const refreshModal = () => {
  workFaceObj.render();
};

// 切换风窗类型
export const setModelType = (type) => {
  fiberType = type;
  return new Promise((resolve) => {
    if (workFaceObj) {
      group = workFaceObj.group;

      if (!model.scene.getObjectByName('workFace')) {
        model.scene.add(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.03, y: 0.91, z: 0.239 };
        var newControlsPosition = { x: -0.03, y: 0.114, z: 0.007 };
      } 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.03126, y: 0.81725, z: 0.6104 };
        var newControlsPosition = { x: -0.0312, y: 0.0648, z: 0.0852 };
      }

      model.orbitControls.addEventListener('change', workFaceObj.render.bind(workFaceObj));

      setTimeout(async () => {
        resolve(null);
        await animateCamera(
          oldCameraPosition,
          oldControlsPosition,
          newCameraPosition,
          newControlsPosition,
          model,
          0.8,
          workFaceObj.render.bind(workFaceObj)
        );
      }, 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;
  }
};