gasInjection-project/src/views/vent/monitorManager/fiberMonitor/fiber.threejs.ts

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

// 模型对象、 文字对象
let model: UseThree | undefined,
  beltFiberObj: BeltFiber | undefined,
  workerFaceFiberObj: WorkFace | undefined,
  group: THREE.Object3D | undefined,
  fiberType = 'beltFiber'; // workerFaceFiber

const { mouseDownFn } = useEvent();

// 鼠标点击、松开事件
const mouseEvent = (event) => {
  if (event.button == 0) {
    mouseDownFn(<UseThree>model, <THREE.Object3D>group, event, (intersects) => {
      if (fiberType === 'beltFiber') {
        // beltFiberObj?.mousedownModel.call(beltFiberObj, model.rayCaster);
      } else if (fiberType === 'workFace') {
        // workerFaceFiberObj.mousedownModel.call(workerFaceFiberObj, model.rayCaster);
      }
    });
    console.log('摄像头控制信息', model?.orbitControls, model?.camera);
  }
};

const addMouseEvent = () => {
  // 定义鼠标点击事件
  model?.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  model?.canvasContainer?.addEventListener('pointerup', (event) => {
    event.stopPropagation();
    // 单道、 双道
    if (fiberType === 'beltFiber') {
      beltFiberObj?.mouseUpModel.call(beltFiberObj);
    } else if (fiberType === 'workFace') {
      workerFaceFiberObj?.mouseUpModel.call(workerFaceFiberObj);
    }
  });
};

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

export const refreshModal = (warningNum, errorNum) => {
  if (fiberType === 'beltFiber') {
    beltFiberObj?.monitorData(warningNum, errorNum);
    beltFiberObj?.render();
  } else if (fiberType === 'workFace') {
    workerFaceFiberObj?.render();
  }
};

export const addFiberText = (selectData) => {
  if (fiberType === 'beltFiber') {
    return beltFiberObj?.addBeltText.call(beltFiberObj, selectData);
  }
  if (fiberType === 'workFace') {
    return workerFaceFiberObj?.addMonitorText.call(workerFaceFiberObj, selectData);
  }
};

// 切换风窗类型
export const setModelType = (type) => {
  fiberType = type;
  return new Promise((resolve) => {
    if (fiberType === 'beltFiber' && beltFiberObj && beltFiberObj.group) {
      group = beltFiberObj.group;
      if (model?.scene?.getObjectByName('workFace') && workerFaceFiberObj) {
        model?.scene.remove(workerFaceFiberObj.group);
      }
      const oldCameraPosition = { x: 124.736, y: 63.486, z: 103.337 };
      model?.scene?.add(beltFiberObj.group);
      model?.orbitControls?.addEventListener('change', beltFiberObj.render.bind(beltFiberObj));

      setTimeout(async () => {
        resolve(null);

        const position = { x: 0, y: 3.8, z: 10.5 };
        await animateCamera(
          oldCameraPosition,
          { x: 0, y: 0, z: 0 },
          { x: position.x, y: position.y, z: position.z },
          { x: 10, y: 3.1, z: -8.8 },
          model,
          0.8,
          beltFiberObj?.render.bind(beltFiberObj)
        );
      }, 300);
    }
    if (fiberType === 'workFace' && workerFaceFiberObj && workerFaceFiberObj.group) {
      group = workerFaceFiberObj.group;

      if (model?.scene?.getObjectByName('beltFiber') && beltFiberObj) {
        model.scene.remove(beltFiberObj.group);
      }
      const oldCameraPosition = { x: 124.736, y: 63.486, z: 103.337 };
      model?.scene?.add(workerFaceFiberObj.group);
      model?.orbitControls?.addEventListener('change', workerFaceFiberObj.render.bind(workerFaceFiberObj));

      setTimeout(async () => {
        resolve(null);

        const position = { x: 0, y: 3.8, z: 1.5 };
        await animateCamera(
          oldCameraPosition,
          { x: 0, y: 0, z: 0 },
          { x: position.x, y: position.y, z: position.z },
          { x: 10, y: 3.1, z: -8.8 },
          model,
          0.8,
          workerFaceFiberObj?.render.bind(workerFaceFiberObj)
        );
      }, 300);
    }
  });
};

export const mountedThree = () => {
  return new Promise(async (resolve) => {
    model = new UseThree('#fiberBox', '#fiber3DCSS');
    model.setEnvMap('test1.hdr');

    model?.camera?.position.set(100, 0, 1000);

    beltFiberObj = new BeltFiber(model);
    await beltFiberObj.mountedThree();

    workerFaceFiberObj = new WorkFace(model);
    await workerFaceFiberObj.mountedThree();

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

export const destroy = () => {
  if (model) {
    model.isRender = false;
    console.log('场景销毁前信息----------->', model.renderer?.info);
    beltFiberObj?.destroy();
    beltFiberObj = undefined;
    workerFaceFiberObj?.destroy();
    workerFaceFiberObj = undefined;
    group = undefined;
    model.destroy();
    model = undefined;
  }
};