mky-vent-base/src/views/vent/monitorManager/sprayMonitor/spray.three.ts

import * as THREE from 'three';
import UseThree from '../../../../utils/threejs/useThree';
import ModelContext from './spray.threejs.base';
import PenshaContext from './spray.threejs.pensha';
import { animateCamera } from '/@/utils/threejs/util';
import useEvent from '../../../../utils/threejs/useEvent';

type modelName = 'spray' | 'pensha';

/** 模型总控制器 */
let model: UseThree;
/** 当前展示的具体模型的 Object3D 对象 */
let group: THREE.Object3D;
/** 具体模型内容列表，包含此模型总控制器下的所有可用的具体模型内容 */
const modelContextList: {
  /** 当前模型类型，在控制器下有多个具体模型时分辨它们 */
  type: modelName;
  /** 模型的具体内容，即负责模型导入、绘制的上下文对象，一个控制器可以新建多个 */
  context?: ModelContext;
}[] = [];
const { mouseDownFn } = useEvent();

/** 分发鼠标事件到具体实现方法 */
function dispatchMouseEvent(event) {
  if (event.button == 0 && model && group) {
    mouseDownFn(model, group, event, () => {});
  }
}

/** 初始化模型CSS展示框的鼠标事件，应该在模型总控制器初始化后调用 */
function initEventListender() {
  if (!model) return;
  model.canvasContainer?.addEventListener('mousedown', (e) => dispatchMouseEvent(e));
  // model.orbitControls?.addEventListener('change', () => console.log('debug camera', model.camera, model.orbitControls));
}

/** 渲染并更新总模型 */
// function 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 function refreshModal() {
//   render();
//   // modelContextList.forEach((item) => {
//   //   if (item.context) {
//   //     item.context.render();
//   //   }
//   // });
// }

/** 设置模型类型并切换，不同的类型通常对应不同的具体模型，在模型总控制器下的具体模型会根据传入的参数彼此交互、切换 */
export function setModelType(modelType: modelName) {
  return new Promise((resolve, reject) => {
    if (!model) return reject('模型未初始化');
    modelContextList.forEach(({ type, context }) => {
      if (!context) return reject('模型未初始化');
      // 如果是指定类型的模型，则显示该模型，否则应该检查是否已经存在该模型，如果存在则隐藏
      if (modelType === type) {
        group = context?.group as THREE.Object3D;
        setTimeout(async () => {
          if (!model.scene?.getObjectByName(group.name) && group) {
            model.scene?.add(group);
          }
          await animateCamera({ x: -693, y: 474, z: 398 }, { x: 0, y: 0, z: 0 }, context.cameraPostion, context.orbitTarget, model, 0.8);
          resolve(null);
        }, 400);
      } else {
        const group = context?.group;
        const name = group?.name;
        if (name && group && model.scene?.getObjectByName(name)) {
          model.scene?.remove(group);
        }
      }
    });
  });
}

/** 挂载模型控制器，sceneSelctor表示放置模型的元素选择器，cssSelectors表示放置类似详情框的元素选择器，其中第一项需要是根元素选择器 */
export function mountedThree(sceneSelctor: string, cssSelectors: string[]) {
  return new Promise(async (resolve) => {
    const [rootSelector, ...selectors] = cssSelectors;
    model = new UseThree(sceneSelctor, rootSelector);
    model.setEnvMap('test1.hdr');
    /** @ts-ignore-next-line */
    model.renderer.toneMappingExposure = 1.0;

    const model1 = new ModelContext(model);
    await model1.mountedThree();
    model1.initCssElement(selectors);
    modelContextList.push({
      type: 'spray',
      context: model1,
    });
    const model2 = new PenshaContext(model);
    await model2.mountedThree();
    model2.initCssElement(selectors);
    modelContextList.push({
      type: 'pensha',
      context: model2,
    });

    initEventListender();
    model.animate();
    resolve(null);
  });
}

export const destroy = () => {
  if (!model) return;
  model.isRender = false;
  modelContextList.forEach((item) => {
    if (item.context) item.context.destroy();
  });
  model.destroy();
};