mky-vent-5/src/views/vent/monitorManager/chamberMonitor/chamber.threejs.ts

import * as THREE from 'three';
import UseThree from '../../../../utils/threejs/useThree';
import ChamberBase from './chamber.threejs.base';
import { animateCamera } from '/@/utils/threejs/util';
import { useAppStore } from '/@/store/modules/app';

// 模型对象、 文字对象
let model,
  chamberBaseObj: ChamberBase,
  group,
  chamberType = 'chamberBase'; // workerFaceFiber
const appStore = useAppStore();

// 鼠标点击事件
const mouseEvent = (event) => {
  event.stopPropagation();
  if (!model) return;
  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 (chamberType === 'chamberBase') {
      // chamberBaseObj.mousedownModel.call(chamberBaseObj, 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);
    //   }
    // }

    console.log('摄像头，控制器------>', model.camera, model.orbitControls);
  }
};

const addMouseEvent = () => {
  // 定义鼠标点击事件
  model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
};

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 addChamberText = (selectData) => {
  if (chamberType === 'chamberBase') {
    return chamberBaseObj.addChamberText.call(chamberBaseObj, selectData);
  }
};

// 切换模型类型
export const setModelType = (type) => {
  chamberType = type;
  return new Promise((resolve) => {
    if (chamberType === 'chamberBase') {
      group = chamberBaseObj.group;
      const oldCameraPosition = { x: 124.736, y: 63.486, z: 103.337 };
      model.scene.add(chamberBaseObj.group);
      model.camera.position.set(0, 0, 300);
      setTimeout(async () => {
        // const position = { x: 0, y: 3.8, z: 10.5 };
        await animateCamera(
          oldCameraPosition,
          oldCameraPosition,
          { x: 0.519594036828229, y: 411.8877286329627, z: 330.7728952161751 },
          { x: 3.534969685817257, y: 14.506061950306899, z: -16.565361577001262 },
          model,
          0.8
        );
      }, 300);

      resolve(null);
    }
  });
};

export const mountedThree = () => {
  return new Promise(async (resolve) => {
    model = new UseThree('#chamber3D');
    model.setEnvMap('test1');
    model.renderer.toneMappingExposure = 1;
    // model.camera.position.set(100, 0, 1000);

    chamberBaseObj = new ChamberBase(model);
    await chamberBaseObj.mountedThree();

    // model.scene.add(chamberBaseObj.group);

    addMouseEvent();
    // render();
    model.animate();
    resolve(null);
  });
};

export const destroy = () => {
  if (model) {
    chamberBaseObj.destroy();
    model.deleteModal();
    model = null;
    group = null;
    chamberBaseObj = null;
  }
};