mky-vent-base/src/views/vent/monitorManager/fireDoorMonitor/fireDoor.threejs.ts

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

// 模型对象、 文字对象
let model,
  fireDoor, //液压风门
  fireDoorF, //保德风门
  fireDoorSsl, // 思山岭防火门
  fireDoorRed, // 防火门
  group: THREE.Object3D,
  fhmType = '';

const { mouseDownFn } = useEvent();

// 初始化左右摇摆动画
const startAnimation = () => {
  // 定义鼠标点击事件
  model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  model.canvasContainer?.addEventListener('pointerup', (event) => {
    event.stopPropagation();
    // 单道、 双道
    if (fhmType === 'fireDoor') {
      fireDoor?.mouseUpModel.call(fireDoor);
    }
    if (fhmType === 'fireDoorF') {
      fireDoorF?.mouseUpModel.call(fireDoorF);
    }
    if (fhmType === 'fireDoorSsl') {
      fireDoorSsl?.mouseUpModel.call(fireDoorSsl);
    }
    if (fhmType === 'fireDoorRed') {
      fireDoorRed?.mouseUpModel.call(fireDoorRed);
    }
  });
};

// 鼠标点击、松开事件
const mouseEvent = (event) => {
  if (event.button == 0) {
    mouseDownFn(model, group, event, (intersects) => {
      if (fhmType === 'fireDoor' && fireDoor) {
        fireDoor?.mousedownModel.call(fireDoor, intersects);
      }
      if (fhmType === 'fireDoorF' && fireDoorF) {
        fireDoorF?.mousedownModel.call(fireDoorF, intersects);
      }
      if (fhmType === 'fireDoorSsl' && fireDoorSsl) {
        fireDoorSsl?.mousedownModel.call(fireDoorSsl, intersects);
      }
      if (fhmType === 'fireDoorRed' && fireDoorRed) {
        fireDoorRed?.mousedownModel.call(fireDoorRed, intersects);
      }
    });
    // console.log('摄像头控制信息', model.orbitControls, model.camera);
  }
};

export const play = (handlerState, flag?) => {
  if (fhmType === 'fireDoor' && fireDoor) {
    return fireDoor.play.call(fireDoor, handlerState, flag);
  }
  if (fhmType === 'fireDoorF' && fireDoorF) {
    return fireDoorF.play.call(fireDoorF, handlerState, flag);
  }
  if (fhmType === 'fireDoorSsl' && fireDoorSsl) {
    return fireDoorSsl.play.call(fireDoorSsl, handlerState, flag);
  }
  if (fhmType === 'fireDoorRed' && fireDoorRed) {
    return fireDoorRed.play.call(fireDoorRed, handlerState, flag);
  }
};

// 切换风门类型
export const setModelType = (type) => {
  fhmType = type;
  const fhmConfigurations = {
    fireDoor: {
      render: fireDoor ? () => fireDoor.render() : null,
      group: fireDoor ? fireDoor.group : null,
      newP: { x: -654.2006991449887, y: 103.16181473511944, z: -30.348656073478562 },
      newT: { x: -7.380506513422206, y: 56.36967052459397, z: -29.230675020846963 },
    },
    fireDoorF: {
      render: fireDoorF ? () => fireDoorF.render() : null,
      group: fireDoorF ? fireDoorF.group : null,
      newP: { x: -655.0169729333649, y: 47.24181078408825, z: -9.781926649842067 },
      newT: { x: -7.380506513422206, y: 47.24181078408821, z: -37.9244016972381 },
    },
    fireDoorSsl: {
      render: fireDoorSsl ? () => fireDoorSsl.render() : null,
      group: fireDoorSsl ? fireDoorSsl.group : null,
      newP: { x: 342.74781900192056, y: 183.50210411099545, z: 451.0806333923029 },
      newT: { x: 72.33938301176254, y: -35.03891296652319, z: -37.91742549963208 },
    },
    fireDoorRed: {
      render: fireDoorRed ? () => fireDoorRed.render() : null,
      group: fireDoorRed ? fireDoorRed.group : null,
      newP: { x: 66.257, y: 57.539, z: 94.313 },
      newT: { x: -2.28, y: -0.91, z: -5.68 },
    },
  };
  const config = fhmConfigurations[fhmType];
  const oldCameraPosition = { x: -1000, y: 100, z: 500 };
  return new Promise((resolve) => {
    // 暂停风门1动画
    // if (fhmType === 'fireDoor' && fireDoor && fireDoor.group) {
    //   if (fireDoor.clipActionArr.door) {
    //     fireDoor.clipActionArr.door.reset();
    //     fireDoor.clipActionArr.door.time = 0.5;
    //     fireDoor.clipActionArr.door.stop();
    //   }

    //   if (fireDoor.damperOpenMesh) fireDoor.damperOpenMesh.visible = false;
    //   if (fireDoor.damperClosedMesh) fireDoor.damperClosedMesh.visible = true;
    //   model.scene.remove(group);
    //   model.startAnimation = fireDoor.render.bind(fireDoor);
    //   group = fireDoor.group;
    //   group.rotation.y = 0;
    //   const oldCameraPosition = { x: -1000, y: 100, z: 500 };
    //   setTimeout(async () => {
    //     resolve(null);
    //     model.scene.add(fireDoor.group);
    //     await animateCamera(
    //       oldCameraPosition,
    //       { x: 0, y: 0, z: 0 },
    //       { x: -654.2006991449887, y: 103.16181473511944, z: -30.348656073478562 },
    //       { x: -7.380506513422206, y: 56.36967052459397, z: -29.230675020846963 },
    //       model,
    //       0.8
    //     );
    //   }, 300);
    // } else if (fhmType === 'fireDoorF' && fireDoorF && fireDoorF.group) {
    //   if (fireDoorF.clipActionArr.door) {
    //     fireDoorF.clipActionArr.door.reset();
    //     fireDoorF.clipActionArr.door.time = 0;
    //     fireDoorF.clipActionArr.door.stop();
    //   }
    //   model.scene.remove(group);
    //   model.startAnimation = fireDoorF.render.bind(fireDoorF);
    //   group = fireDoorF.group;
    //   group.rotation.y = 0;
    //   const oldCameraPosition = { x: -1000, y: 100, z: 500 };
    //   setTimeout(async () => {
    //     resolve(null);
    //     model.scene.add(fireDoorF.group);
    //     await animateCamera(
    //       oldCameraPosition,
    //       { x: 0, y: 0, z: 0 },
    //       { x: -655.0169729333649, y: 47.24181078408825, z: -9.781926649842067 },
    //       { x: -7.380506513422206, y: 47.24181078408821, z: -37.9244016972381 },
    //       model,
    //       0.8
    //     );
    //   }, 300);
    // } else if (fhmType === 'fireDoorSsl' && fireDoorSsl && fireDoorSsl.group) {
    //   // if (fireDoorSsl.clipActionArr.door) {
    //   //   fireDoorSsl.clipActionArr.door.reset();
    //   //   fireDoorSsl.clipActionArr.door.time = 0;
    //   //   fireDoorSsl.clipActionArr.door.stop();
    //   // }
    //   // model.scene.remove(group);
    //   // model.startAnimation = fireDoorSsl.render.bind(fireDoorSsl);
    //   group = fireDoorSsl.group;
    //   group.rotation.y = 0;
    //   const oldCameraPosition = { x: -1000, y: 100, z: 500 };
    //   setTimeout(async () => {
    //     resolve(null);
    //     model.scene.add(fireDoorSsl.group);
    //     await animateCamera(
    //       oldCameraPosition,
    //       { x: 0, y: 0, z: 0 },
    //       {
    //         x: 342.74781900192056,
    //         y: 183.50210411099545,
    //         z: 451.0806333923029,
    //       },
    //       {
    //         x: 72.33938301176254,
    //         y: -35.03891296652319,
    //         z: -37.91742549963208,
    //       },
    //       model,
    //       0.8
    //     );
    //   }, 300);
    // }
    if (config && config.group) {
      model.startAnimation = config.render;
      group = config.group;

      setTimeout(async () => {
        await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, config.newP, config.newT, model);
        model.scene?.add(config.group);
        resolve(null);
      }, 1000);
    } else {
      resolve(null);
      throw new Error(`Unsupported fhmType: ${fhmType}`);
    }
  });
};

export const initCameraCanvas = async (playerVal1) => {
  if (fhmType === 'fireDoor' && fireDoor) {
    return await fireDoor.initCamera.call(fireDoor, playerVal1);
  } else if (fhmType === 'fireDoorF' && fireDoorF) {
    return await fireDoorF.initCamera.call(fireDoorF, playerVal1);
  } else if (fhmType === 'fireDoorSsl' && fireDoorSsl) {
    return await fireDoorSsl.initCamera.call(fireDoorSsl, playerVal1);
  } else if (fhmType === 'fireDoorRed' && fireDoorRed) {
    return await fireDoorRed.initCamera.call(fireDoorRed, playerVal1);
  }
};
const setControls = () => {
  if (model && model.orbitControls) {
    model.orbitControls.maxPolarAngle = Math.PI / 2;
    model.orbitControls.minPolarAngle = Math.PI / 3;
    model.orbitControls.minDistance = 600;
    model.orbitControls.maxDistance = 900;
  }
};

const loadModel = (code): Promise<any> => {
  if (code === 'fireDoor') return import('./fireDoor.threejs.fire').then((r) => r.default);
  if (code === 'fireDoorF') return import('./fireDoor.threejs.fireF').then((r) => r.default);
  if (code === 'fireDoorSsl') return import('./fireDoor.threejs.ssl').then((r) => r.default);
  if (code === 'fireDoorRed') return import('./fireDoor.threejs.fire.redGate').then((r) => r.default);
  return import('./fireDoor.threejs.fire.redGate').then((r) => r.default);
};

export const mountedThree = () => {
  return new Promise(async (resolve) => {
    model = new UseThree('#damper3D', '', '#deviceDetail');
    model.setEnvMap('test1.hdr');
    model.renderer.toneMappingExposure = 1.0;
    model.camera.position.set(100, 0, 1000);
    const dictCodes = getDictItemsByCode('fireDoorStyle');
    if (dictCodes && dictCodes.length > 0) {
      for (let i = 0; i < dictCodes.length; i++) {
        const dict = dictCodes[i];
        switch (dict.value) {
          case 'fireDoor':
            const FireDoor = await loadModel('fireDoor');
            fireDoor = new FireDoor(model);
            fireDoor.mountedThree();
            break;
          case 'fireDoorF':
            const FireDoorF = await loadModel('fireDoorF');
            fireDoorF = new FireDoorF(model);
            fireDoorF.mountedThree();
            break;
          case 'fireDoorSsl':
            const FireDoorSsl = await loadModel('fireDoorSsl');
            fireDoorSsl = new FireDoorSsl(model);
            fireDoorSsl.mountedThree();
            break;
          case 'fireDoorRed':
            const FireDoorRed = await loadModel('fireDoorRed');
            fireDoorRed = new FireDoorRed(model);
            fireDoorRed.mountedThree();
            break;
        }
      }
      resolve(null);
    } else {
      const FireDoorRed = await loadModel('');
      fireDoorRed = new FireDoorRed(model);
      fireDoorRed.mountedThree();
    }
    resolve(null);
    setControls();
    model.animate();
    startAnimation();
  });
};

export const destroy = () => {
  if (model) {
    model.orbitControls.maxPolarAngle = Math.PI;
    model.orbitControls.minPolarAngle = 0;
    model.orbitControls.enableRotate = true;
    model.orbitControls.minDistance = 0;
    model.orbitControls.maxDistance = Infinity;
    model.orbitControls.update();
    model.isRender = false;
    if (fireDoor) fireDoor.destroy();
    fireDoor = null;
    if (fireDoorF) fireDoorF.destroy();
    fireDoorF = null;
    if (fireDoorSsl) fireDoorSsl.destroy();
    fireDoorSsl = null;
    if (fireDoorRed) fireDoorRed.destroy();
    fireDoorRed = null;
    // @ts-ignore-next-line
    group = null;
    model.mixers = [];
    model.destroy();
  }
  model = null;
};