vent-template/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, setModalCenter } from '/@/utils/threejs/util';
import useEvent from '../../../../utils/threejs/useEvent';

// 模型对象、 文字对象
let model,
  chamberBaseObj: ChamberBase,
  group,
  chamberType = 'chamberBase';

const { mouseDownFn } = useEvent();

// 鼠标点击事件
const mouseEvent = (event) => {
  mouseDownFn(model, group, event, (intersects) => {
    if (chamberType === 'chamberBase') {
      // chamberBaseObj.mousedownModel.call(chamberBaseObj, intersects);
    }
  });
  console.log('摄像头控制信息', model.orbitControls, model.camera);
};

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);
      setModalCenter(model.scene);
      model.camera.position.set(0, 0, 300);
      setTimeout(async () => {
        await animateCamera(
          oldCameraPosition,
          {x: 0, y: 0, z: 0},
          { x: 11.19, y: 400.13, z: 344.20 },
          { x: 10.446, y: 0.875, z: -0.993 },
          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;
  }
};