gas-injection/src/views/vent/monitorManager/dedustMonitor/dedust.threejs.ts

import * as THREE from 'three';
import UseThree from '../../../../utils/threejs/useThree';
import WorkFace from './dedust.threejs.base';
import { animateCamera } from '/@/utils/threejs/util';
import useEvent from '../../../../utils/threejs/useEvent';

// 模型对象、 文字对象
let model: UseThree | undefined,
  workFaceObj: WorkFace | undefined,
  group: THREE.Object3D | undefined,
  fiberType = 'tunFace'; // workerFaceFiber
const { mouseDownFn } = useEvent();

// 鼠标点击、松开事件
const mouseEvent = (event) => {
  if (event.button == 0 && model && group) {
    mouseDownFn(model, group, event, () => {});
  }
};

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

const render = () => {
  if (model && model.isRender && model.renderer) {
    // 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) => {
  if (!model) return;
  fiberType = type;
  return new Promise((resolve) => {
    if (fiberType === 'tunFace' && workFaceObj && workFaceObj.group) {
      group = workFaceObj.group;

      // const oldCameraPosition = { x: 124.736, y: 63.486, z: 103.337 };

      model?.orbitControls?.addEventListener('change', render);

      setTimeout(async () => {
        resolve(null);
        const oldCameraPosition = { x: -693, y: 474, z: 398 };
        if (!model?.scene?.getObjectByName('tunFace') && group) {
          model?.scene?.add(group);
        }
        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.hdr');
    /** @ts-ignore-next-line */
    model.renderer.toneMappingExposure = 1.0;
    // model?.camera?.position.set(100, 0, 1000);
    workFaceObj = new WorkFace(model);
    await workFaceObj.mountedThree();

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

export const destroy = () => {
  if (model) {
    model.isRender = false;
    workFaceObj?.destroy();
    workFaceObj = undefined;
    group = undefined;
    model.destroy();
    model = undefined;
  }
};