gas-injection/src/views/vent/monitorManager/wokerFaceMonitor/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 { useAppStore } from '/@/store/modules/app';

// 模型对象、 文字对象
let model,
  beltFiberObj: BeltFiber,
  workerFaceFiberObj: WorkFace,
  group,
  fiberType = 'beltFiber'; // workerFaceFiber
const appStore = useAppStore();

// 鼠标点击、松开事件
const mouseEvent = (event) => {
  event.stopPropagation();
  const widthScale = appStore.getWidthScale;
  const heightScale = appStore.getHeightScale;
  // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
  model.mouse.x =
    ((-model.canvasContainer.getBoundingClientRect().left * widthScale + event.clientX) / (model.canvasContainer.clientWidth * widthScale)) * 2 - 1;
  model.mouse.y =
    -((-model.canvasContainer.getBoundingClientRect().top + event.clientY) / (model.canvasContainer.clientHeight * heightScale)) * 2 + 1;
  (model.rayCaster as THREE.Raycaster).setFromCamera(model.mouse, model.camera as THREE.Camera);
  if (group) {
    if (fiberType === 'beltFiber') {
      beltFiberObj.mousedownModel.call(beltFiberObj, model.rayCaster);
    } else if (fiberType === 'workFace') {
      workerFaceFiberObj.mousedownModel.call(workerFaceFiberObj, model.rayCaster);
    }

    // const intersects = model.rayCaster?.intersectObjects([...group.children]) as THREE.Intersection[];
    // if (intersects.length > 0) {
    //   if (fiberType === 'beltFiber') {
    //     beltFiberObj.mousedownModel.call(beltFiberObj, intersects);
    //   } else if (fiberType === 'workFace') {
    //     workerFaceFiberObj.mousedownModel.call(workerFaceFiberObj, intersects);
    //   }
    // }
  }
};

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.animationId != -1) {
    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') {
      group = beltFiberObj.group;
      if (model.scene.getObjectByName('workFace')) {
        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,
          oldCameraPosition,
          { 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') {
      group = workerFaceFiberObj.group;

      if (model.scene.getObjectByName('beltFiber')) {
        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,
          oldCameraPosition,
          { 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');
    model.renderer.toneMappingExposure = 1;
    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) {
    beltFiberObj.destroy();
    model.deleteModal();
    model = null;
    group = null;
    beltFiberObj = null;
  }
};