mky-vent-base/src/views/vent/monitorManager/tunFaceMonitor/tunFace.threejs.ts

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

// 模型对象、 文字对象
let model,
  workFaceObj: WorkFace,
  group,
  fiberType = 'tunFace'; // 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 === 'tunFace') {
    //   workFaceObj.mousedownModel.call(workFaceObj, model.rayCaster);
    // }
    console.log(model.camera, model.orbitControls);
    // 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 === 'tunFace') {
    //     workFaceObj.mousedownModel.call(workFaceObj, intersects);
    //   }
    // }
  }
};

const addMouseEvent = () => {
  // 定义鼠标点击事件
  model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  model.canvasContainer?.addEventListener('pointerup', (event) => {
    event.stopPropagation();
    // if (fiberType === 'tunFace') {
    //   workFaceObj.mouseUpModel.call(workFaceObj);
    // }
  });
};

const render = () => {
  if (model && model.animationId != -1) {
    // model.animationId = requestAnimationFrame(render);
    model.css3dRender?.render(model.scene as THREE.Scene, model.camera as THREE.PerspectiveCamera);
    model.renderer.render(model.scene as THREE.Scene, model.camera as THREE.PerspectiveCamera);
    model.stats?.update();
  }
};

export const refreshModal = () => {
  if (fiberType === 'tunFace') {
    // workFaceObj.render();
    render();
  }
};

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

      // const oldCameraPosition = { x: 124.736, y: 63.486, z: 103.337 };
      const oldCameraPosition = { x: 124.736, y: 63.486, z: 603.337 };
      if (!model.scene.getObjectByName('tunFace')) {
        model.scene.add(workFaceObj.group);
      }
      model.orbitControls.addEventListener('change', render);

      setTimeout(async () => {
        resolve(null);
        const position = { x: 14.826074594663222, y: 16.901762713393836, z: 36.459944037951004 };
        await animateCamera(
          oldCameraPosition,
          { x: 0, y: 0, z: 0 },
          { x: position.x, y: position.y, z: position.z },
          { x: 0, y: 0, z: 0 },
          model,
          0.8,
          render
        );
      }, 400);
    }
  });
};

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

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

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