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) => {
  // 重置动画
  if (fhmType === 'fireDoor' && fireDoor) {
    fireDoor.resetAnimate();
  }
  if (fhmType === 'fireDoorF' && fireDoorF) {
    fireDoorF.resetAnimate();
  }
  if (fhmType === 'fireDoorSsl' && fireDoorSsl) {
    fireDoorSsl.resetAnimate();
  }
  if (fhmType === 'fireDoorRed' && fireDoorRed) {
    fireDoorRed.resetAnimate();
  }

  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.14, y: 52.98, z: 112.23 },
      newT: { x: 6.049, y: 7.907, z: -25.566 },
    },
  };

  const oldConfig = fhmConfigurations[fhmType];
  const config = fhmConfigurations[type];
  fhmType = type;

  if (type == 'fireDoor' || type == 'fireDoorF') {
    model.orbitControls.maxPolarAngle = Math.PI / 2;
    model.orbitControls.minPolarAngle = Math.PI / 3;
    model.orbitControls.minDistance = 600;
    model.orbitControls.maxDistance = 900;
    model.orbitControls.update();
  } else if (type == 'fireDoorRed' || type == 'fireDoorSsl') {
    model.orbitControls.maxPolarAngle = Math.PI;
    model.orbitControls.minPolarAngle = 0;
    model.orbitControls.enableRotate = true;
    model.orbitControls.minDistance = 0;
    model.orbitControls.maxDistance = Infinity;
    model.orbitControls.update();
  }

  const oldCameraPosition = { x: -1000, y: 100, z: 500 };
  return new Promise((resolve) => {
    if (oldConfig && oldConfig.group) {
      model.scene?.remove(oldConfig.group);
    }
    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 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);
    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;
};