gas-injection/src/views/vent/monitorManager/windowMonitor/window.threejs.ts

import * as THREE from 'three';
import UseThree from '../../../../utils/threejs/useThree';
import ddFc_5 from './dandaoFc.threejs'; // ddFc_5  单道-大窗2列扇叶
import singleWindowXk from './dandaoFcXk.threejs';
import ddFc_1 from './dandaoFcYjl.threejs'; // ddFc_1  单道_小窗两列扇叶
import sdFc_1 from './shuangdaoFc.threejs'; //  sdFc_1 双道-带小门
import sdFc_3 from './shuangdaoFcBlt.threejs'; // sdFc_3 双道-带小门-小窗
import sdFc_4 from './shuangdaoFcHj.threejs'; // sdFc_4 双道-带门-卷闸
import sdFc_2 from './shuangdaoFcSw.threejs'; // sdFc_2 单道-带小门-2个窗
import sdFc_5 from './shuangdaoFcYjl.threejs'; // sdFc_5 双道-小门(侧边下)-小窗（榆家梁）
import ddFc_4 from './dandaoFcBd1.threejs'; // ddFc_4 单道-一个小窗两列扇叶
import ddFc_2 from './dandaoFcBd2.threejs'; // ddFc_2 单道-一个大窗两列竖型扇叶
import ddFc_6 from './dandaoFcHjt.threejs'; // ddFc_6 单道-大窗1列扇叶(活鸡兔)
import ddFc_7 from './dandaoFcBd3.threejs'; // ddFc_6 单道-大窗1列扇叶(活鸡兔)
import threeFc_8 from './sandaoFc.threejs'; // ddFc_8 三道-大窗2列门式扇叶(三道沟)
import ddFc_lt from './dandaoFcLt.threejs';
import { animateCamera } from '/@/utils/threejs/util';
import useEvent from '../../../../utils/threejs/useEvent';
import { getDictItemsByCode } from '/@/utils/dict';

// import * as dat from 'dat.gui';
// const gui = new dat.GUI();
// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';

// 模型对象、 文字对象
let model: UseThree,
  ddFc5: ddFc_5,
  ddFc1: ddFc_1,
  sdFc1: sdFc_1,
  sdFc3: sdFc_3,
  sdFc4: sdFc_4,
  sdFc2: sdFc_2,
  sdFc5: sdFc_5,
  ddFc2: ddFc_2,
  ddFc4: ddFc_4,
  ddFc6: ddFc_6,
  ddFc7: ddFc_7,
  ddFc8: ddFc_lt,
  threeFc8: threeFc_8,
  singleWindowXkObj: singleWindowXk,
  group: THREE.Object3D,
  windowType = 'ddFc1';

const rotationParam = {
  frontDeg0: 0, // 前门初始
  frontDeg1: 0, // 前门目标
  centerDeg0: 0, // 前门初始
  centerDeg1: 0, // 前门目标
  backDeg0: 0, // 后门初始
  backDeg1: 0, // 后门目标
};

const { mouseDownFn } = useEvent();

// 初始化左右摇摆动画
const startAnimation = () => {
  // 定义鼠标点击事件
  model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  model.canvasContainer?.addEventListener('pointerup', (event) => {
    event.stopPropagation();
    // 单道、 双道
    if (windowType === 'ddFc5' && ddFc5) {
      ddFc5.mouseUpModel.call(ddFc5);
    } else if (windowType === 'ddFc1' && ddFc1) {
      ddFc1.mouseUpModel.call(ddFc1);
    } else if (windowType === 'ddFc2' && ddFc2) {
      ddFc2.mouseUpModel.call(ddFc2);
    } else if (windowType === 'ddFc4' && ddFc4) {
      ddFc4.mouseUpModel.call(ddFc4);
    } else if (windowType === 'ddFc6' && ddFc6) {
      ddFc6.mouseUpModel.call(ddFc6);
    } else if (windowType === 'ddFc7' && ddFc7) {
      ddFc7.mouseUpModel.call(ddFc7);
    } else if (windowType === 'ddFc8' && ddFc8) {
      ddFc8.mouseUpModel.call(ddFc8);
    } else if (windowType === 'sdFc1' && sdFc1) {
      sdFc1.mouseUpModel.call(sdFc1);
    } else if (windowType === 'sdFc3' && sdFc3) {
      sdFc3.mouseUpModel.call(sdFc3);
    } else if (windowType === 'sdFc4' && sdFc4) {
      sdFc4.mouseUpModel.call(sdFc4);
    } else if (windowType === 'sdFc2' && sdFc2) {
      sdFc2.mouseUpModel.call(sdFc2);
    } else if (windowType === 'sdFc5' && sdFc5) {
      sdFc5.mouseUpModel.call(sdFc5);
    } else if (windowType === 'threeFc8' && threeFc8) {
      threeFc8.mouseUpModel.call(threeFc8);
    } else if (windowType === 'singleXkWindow' && singleWindowXkObj) {
      singleWindowXkObj.mouseUpModel.call(singleWindowXkObj);
    }
  });
};

// 鼠标点击、松开事件
const mouseEvent = (event) => {
  if (event.button == 0) {
    mouseDownFn(model, group, event, (intersects) => {
      if (windowType === 'ddFc5' && ddFc5) {
        ddFc5.mousedownModel.call(ddFc5, intersects);
      } else if (windowType === 'ddFc1' && ddFc1) {
        ddFc1.mousedownModel.call(ddFc1, intersects);
      } else if (windowType === 'ddFc2' && ddFc2) {
        ddFc2.mousedownModel.call(ddFc2, intersects);
      } else if (windowType === 'ddFc4' && ddFc4) {
        ddFc4.mousedownModel.call(ddFc4, intersects);
      } else if (windowType === 'ddFc6' && ddFc6) {
        ddFc6.mousedownModel.call(ddFc6, intersects);
      } else if (windowType === 'ddFc7' && ddFc7) {
        ddFc7.mousedownModel.call(ddFc7, intersects);
      } else if (windowType === 'ddFc8' && ddFc8) {
        ddFc8.mousedownModel.call(ddFc8, intersects);
      } else if (windowType === 'sdFc1' && sdFc1) {
        sdFc1.mousedownModel.call(sdFc1, intersects);
      } else if (windowType === 'sdFc3' && sdFc3) {
        sdFc3.mousedownModel.call(sdFc3, intersects);
      } else if (windowType === 'sdFc4' && sdFc4) {
        sdFc4.mousedownModel.call(sdFc4, intersects);
      } else if (windowType === 'sdFc2' && sdFc2) {
        sdFc2.mousedownModel.call(sdFc2, intersects);
      } else if (windowType === 'sdFc5' && sdFc5) {
        sdFc5.mousedownModel.call(sdFc5, intersects);
      } else if (windowType === 'threeFc8' && threeFc8) {
        threeFc8.mousedownModel(intersects);
      } else if (windowType === 'singleXkWindow' && singleWindowXkObj) {
        singleWindowXkObj.mousedownModel.call(singleWindowXkObj, intersects);
      }
    });
    console.log('摄像头控制信息', model.orbitControls, model.camera);
  }
};
const addMouseEvent = () => {
  // 定义鼠标点击事件
  model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  // model.canvasContainer?.addEventListener('pointerup', mouseUp);
};
export const addMonitorText = (selectData) => {
  if (windowType === 'ddFc5' && ddFc5) {
    return ddFc5.addMonitorText.call(ddFc5, selectData);
  } else if (windowType === 'ddFc1' && ddFc1) {
    return ddFc1.addMonitorText.call(ddFc1, selectData);
  } else if (windowType === 'ddFc2' && ddFc2) {
    return ddFc2.addMonitorText.call(ddFc2, selectData);
  } else if (windowType === 'ddFc4' && ddFc4) {
    return ddFc4.addMonitorText.call(ddFc4, selectData);
  } else if (windowType === 'ddFc6' && ddFc6) {
    return ddFc6.addMonitorText.call(ddFc6, selectData);
  } else if (windowType === 'ddFc7' && ddFc7) {
    return ddFc7.addMonitorText.call(ddFc7, selectData);
  } else if (windowType === 'ddFc8' && ddFc8) {
    return ddFc8.addMonitorText.call(ddFc8, selectData);
  } else if (windowType === 'sdFc1' && sdFc1) {
    return sdFc1.addMonitorText.call(sdFc1, selectData);
  } else if (windowType === 'sdFc3' && sdFc3) {
    return sdFc3.addMonitorText.call(sdFc3, selectData);
  } else if (windowType === 'sdFc4' && sdFc4) {
    return sdFc4.addMonitorText.call(sdFc4, selectData);
  } else if (windowType === 'sdFc2' && sdFc2) {
    return sdFc2.addMonitorText.call(sdFc2, selectData);
  } else if (windowType === 'sdFc5' && sdFc5) {
    return sdFc5.addMonitorText.call(sdFc5, selectData);
  } else if (windowType === 'threeFc8' && threeFc8) {
    return threeFc8.addMonitorText(selectData);
  } else if (windowType === 'singleXkWindow' && singleWindowXkObj) {
    return singleWindowXkObj.addMonitorText.call(singleWindowXkObj, selectData);
  }
};

export function computePlay(data, maxarea, isFirst = false) {
  const isJz = data.windowModal == 'sdFc4';
  if (windowType === 'singleXkWindow') {
    const acosToAngle = (cosValue) => {
      cosValue = Math.max(Math.min(cosValue, 1), -1);
      // 计算角度
      return Math.asin(cosValue) * (180 / Math.PI);
    };
    const sina = Math.sqrt((Math.sin((78 * Math.PI) / 180) ** 2 * parseFloat(data.forntArea)) / parseFloat(maxarea));
    const angleInRadians = acosToAngle(sina);
    rotationParam.frontDeg1 = angleInRadians;
    if (!rotationParam.frontDeg1 && !rotationParam.backDeg1) {
      // 当返回值有误时默认关闭
      play(rotationParam, 0);
    } else {
      setTimeout(() => {
        play(rotationParam, 1);
      }, 0);
    }
  } else {
    if (data.OpenDegree || data.OpenDegree1 || data.OpenDegree2 || data.OpenDegree3) {
      maxarea = 180;
      if (data.OpenDegree) {
        rotationParam.frontDeg0 = (180 / maxarea) * Number(isFirst ? 0 : data.OpenDegree);
        rotationParam.frontDeg1 = (180 / maxarea) * Number(data.OpenDegree) || 0;
      }
      if (data.OpenDegree1) {
        rotationParam.frontDeg0 = (180 / maxarea) * Number(isFirst ? 0 : data.OpenDegree1);
        rotationParam.frontDeg1 = (180 / maxarea) * Number(data.OpenDegree1) || 0;
      }
      if (data.OpenDegree2) {
        rotationParam.backDeg0 = (180 / maxarea) * Number(isFirst ? 0 : data.OpenDegree2);
        rotationParam.backDeg1 = (180 / maxarea) * Number(data.OpenDegree2) || 0;
      }
      if (data.OpenDegree3) {
        rotationParam.centerDeg0 = (180 / maxarea) * Number(isFirst ? 0 : data.OpenDegree3);
        rotationParam.centerDeg1 = (180 / maxarea) * Number(data.OpenDegree3) || 0;
      }
    } else {
      // 这里判断是扇叶模型还是卷闸模型，如果是卷闸模型时
      if (isJz) {
        rotationParam.frontDeg0 = 0;
        rotationParam.backDeg0 = 0;
        rotationParam.frontDeg1 = data.forntArea / maxarea;
        rotationParam.backDeg1 = data.rearArea / maxarea;
      } else {
        if (!maxarea) maxarea = 90;
        rotationParam.frontDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.forntArea);
        rotationParam.backDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.rearArea);
        rotationParam.frontDeg1 = (90 / maxarea) * Number(data.forntArea) || 0;
        rotationParam.backDeg1 = (90 / maxarea) * Number(data.rearArea) || 0;
        if (windowType == 'threeFc8') {
          rotationParam.centerDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.middleArea);
          rotationParam.centerDeg1 = (90 / maxarea) * Number(data.middleArea) || 0;
        }
      }
    }
    if (isJz) {
      play(1, { scaleY: data.frontArea / maxarea });
      play(2, { scaleY: data.rearArea / maxarea });
      play(3, { scaleY: data.frontArea3 / maxarea });
      play(4, { scaleY: data.frontArea4 / maxarea });
    } else {
      if (!rotationParam.frontDeg1 && !rotationParam.backDeg1) {
        // 当返回值有误时默认关闭
        play(rotationParam, 0);
      } else {
        setTimeout(() => {
          play(rotationParam, 1);
        }, 0);
        if (data.nwindownum == 2) {
          setTimeout(() => {
            play(rotationParam, 2);
          }, 0);
        }
        if (data.nwindownum == 3) {
          setTimeout(() => {
            play(rotationParam, 2);
          }, 0);
          setTimeout(() => {
            play(rotationParam, 3);
          }, 0);
        }
      }
    }
  }
}

export const play = (rotationParam, flag) => {
  if (windowType === 'ddFc5' && ddFc5) {
    return ddFc5.play.call(ddFc5, rotationParam, flag);
  } else if (windowType === 'ddFc1' && ddFc1) {
    return ddFc1.play.call(ddFc1, rotationParam, flag);
  } else if (windowType === 'ddFc2' && ddFc2) {
    return ddFc2.play.call(ddFc2, rotationParam, flag);
  } else if (windowType === 'ddFc4' && ddFc4) {
    return ddFc4.play.call(ddFc4, rotationParam, flag);
  } else if (windowType === 'ddFc6' && ddFc6) {
    return ddFc6.play.call(ddFc6, rotationParam, flag);
  } else if (windowType === 'ddFc7' && ddFc7) {
    return ddFc7.play.call(ddFc7, rotationParam, flag);
  } else if (windowType === 'ddFc8' && ddFc8) {
    return ddFc8.play.call(ddFc8, rotationParam, flag);
  } else if (windowType === 'sdFc1' && sdFc1) {
    return sdFc1.play.call(sdFc1, rotationParam, flag);
  } else if (windowType === 'sdFc3' && sdFc3) {
    return sdFc3.play.call(sdFc3, rotationParam, flag);
  } else if (windowType === 'sdFc4' && sdFc4) {
    return sdFc4.play.call(sdFc4, rotationParam, flag);
  } else if (windowType === 'sdFc2' && sdFc2) {
    return sdFc2.play.call(sdFc2, rotationParam, flag);
  } else if (windowType === 'sdFc5' && sdFc5) {
    return sdFc5.play.call(sdFc5, rotationParam, flag);
  } else if (windowType === 'threeFc8' && threeFc8) {
    return threeFc8.play(rotationParam, flag);
  } else if (windowType === 'singleXkWindow' && singleWindowXkObj) {
    return singleWindowXkObj.play.call(singleWindowXkObj, rotationParam, flag);
  }
};

// 切换风窗类型
export const setModelType = (type) => {
  // if (!model || !model.scene) return;
  windowType = type;
  const windowConfigurations = {
    sdFc1: {
      render: sdFc1 ? () => sdFc1.render() : null,
      group: sdFc1 ? sdFc1.group : null,
      newP: { x: 66.257, y: 57.539, z: 94.313 },
      newT: { x: 0, y: 0, z: 0 },
    },
    ddFc5: {
      render: ddFc5 ? () => ddFc5.render() : null,
      group: ddFc5 ? ddFc5.group : null,
      newP: { x: 66.257, y: 57.539, z: 94.313 },
      newT: { x: 0, y: 0, z: 0 },
    },
    ddFc6: {
      render: ddFc6 ? () => ddFc6.render() : null,
      group: ddFc6 ? ddFc6.group : null,
      newP: { x: 66.257, y: 57.539, z: 94.313 },
      newT: { x: 0, y: 0, z: 0 },
    },
    ddFc7: {
      render: ddFc7 ? () => ddFc7.render() : null,
      group: ddFc7 ? ddFc7.group : null,
      newP: { x: 66.257, y: 57.539, z: 94.313 },
      newT: { x: 0, y: 0, z: 0 },
    },
    ddFc8: {
      render: ddFc8 ? () => ddFc8.render() : null,
      group: ddFc8 ? ddFc8.group : null,
      newP: { x: 32.78, y: 64.88, z: 106.78 },
      newT: { x: -6.12, y: 13.27, z: -4.64 },
    },
    ddFc1: {
      render: ddFc1 ? () => ddFc1.render() : null,
      group: ddFc1 ? ddFc1.group : null,
      newP: { x: 34.294433107431956, y: 19.284123769585108, z: 47.717286013509835 },
      newT: { x: 12.311816240141978, y: -5.691930035759495, z: -5.57302688985693 },
    },
    ddFc2: {
      render: ddFc2 ? () => ddFc2.render() : null,
      group: ddFc2 ? ddFc2.group : null,
      newP: { x: 66.257, y: 57.539, z: 94.313 },
      newT: { x: 0, y: 0, z: 0 },
    },
    ddFc4: {
      render: ddFc4 ? () => ddFc4.render() : null,
      group: ddFc4 ? ddFc4.group : null,
      newP: { x: 66.257, y: 57.539, z: 94.313 },
      newT: { x: 0, y: 0, z: 0 },
    },
    sdFc3: {
      render: sdFc3 ? () => sdFc3.render() : null,
      group: sdFc3 ? sdFc3.group : null,
      newP: { x: 66.257, y: 57.539, z: 94.313 },
      newT: { x: 0, y: 0, z: 0 },
    },
    sdFc4: {
      render: sdFc4 ? () => sdFc4.render() : null,
      group: sdFc4 ? sdFc4.group : null,
      newP: { x: 66.257, y: 57.539, z: 94.313 },
      newT: { x: 0, y: 0, z: 0 },
    },
    sdFc2: {
      render: sdFc2 ? () => sdFc2.render() : null,
      group: sdFc2 ? sdFc2.group : null,
      newP: { x: 66.257, y: 57.539, z: 94.313 },
      newT: { x: 0, y: 0, z: 0 },
    },
    sdFc5: {
      render: sdFc5 ? () => sdFc5.render() : null,
      group: sdFc5 ? sdFc5.group : null,
      newP: { x: 34.294433107431956, y: 19.284123769585108, z: 47.717286013509835 },
      newT: { x: 12.311816240141978, y: -5.691930035759495, z: -5.57302688985693 },
    },
    threeFc8: {
      render: threeFc8 ? () => threeFc8.render() : null,
      group: threeFc8 ? threeFc8.group : null,
      newP: { x: 70.79925059068043, y: 61.89235869996884, z: 107.07997293517579 },
      newT: { x: 15.353809053159333, y: 8.712511207091119, z: -13.223119892513122 },
    },
    singleXkWindow: {
      render: singleWindowXkObj ? () => singleWindowXkObj.render() : null,
      group: singleWindowXkObj ? singleWindowXkObj.group : null,
      newP: { x: 116.08531358656566, y: 81.45510733175816, z: 193.00752046594465 },
      newT: { x: 23.446366480086372, y: -12.335134633777185, z: -5.63294282643405 },
    },
  };
  const oldCameraPosition = { x: 100, y: 0, z: 10 };
  model.scene?.remove(group);
  function handleWindowType(windowType: string, model: any) {
    const config = windowConfigurations[windowType];

    if (config && config.group) {
      model.startAnimation = config.render;
      group = config.group;
      return new Promise((resolve) => {
        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 {
      throw new Error(`Unsupported windowType: ${windowType}`);
    }
  }
  return handleWindowType(windowType, model);
};

export const mountedThree = () => {
  // const { sysOrgCode } = useGlobSetting();
  // const sysOrgCode = 'zmhjhzmy';
  return new Promise(async (resolve) => {
    model = new UseThree('#window3D');
    if (!model || !model.renderer || !model.camera) return;
    model.setEnvMap('royal_esplanade_1k.hdr');
    model.renderer.toneMappingExposure = 1.8;
    model.camera.position.set(100, 0, 1000);
    // 根据模型类型判断要初始化哪些模型
    const dictCodes = getDictItemsByCode('windowModalType');
    for (let i = 0; i < dictCodes.length; i++) {
      const dict = dictCodes[i];

      switch (dict.value) {
        case 'sdFc1':
          sdFc1 = new sdFc_1(model);
          await sdFc1.mountedThree();
          break;
        case 'ddFc5':
          ddFc5 = new ddFc_5(model);
          await ddFc5.mountedThree();
          break;
        case 'ddFc1':
          ddFc1 = new ddFc_1(model);
          await ddFc1.mountedThree();
          break;
        case 'ddFc2':
          ddFc2 = new ddFc_2(model);
          await ddFc2.mountedThree();
          break;
        case 'ddFc4':
          ddFc4 = new ddFc_4(model);
          await ddFc4.mountedThree();
          break;
        case 'ddFc6':
          ddFc6 = new ddFc_6(model);
          await ddFc6.mountedThree();
          break;
        case 'ddFc7':
          ddFc7 = new ddFc_7(model);
          await ddFc7.mountedThree();
          break;
        case 'ddFc8':
          ddFc8 = new ddFc_lt(model);
          await ddFc8.mountedThree();
          break;
        case 'sdFc3':
          sdFc3 = new sdFc_3(model);
          await sdFc3.mountedThree();
          break;
        case 'sdFc4':
          sdFc4 = new sdFc_4(model);
          await sdFc4.mountedThree();
          break;
        case 'sdFc2':
          sdFc2 = new sdFc_2(model);
          await sdFc2.mountedThree();
          break;
        case 'sdFc5':
          sdFc5 = new sdFc_5(model);
          await sdFc5.mountedThree();
          break;
        case 'threeFc8':
          threeFc8 = new threeFc_8(model);
          await threeFc8.mountedThree();
          break;
        case 'singleXkWindow':
          singleWindowXkObj = new singleWindowXk(model);
          await singleWindowXkObj.mountedThree();
          break;
      }
    }
    model.animate();
    addMouseEvent();
    resolve(null);
  });
};

export const destroy = () => {
  if (model) {
    model.isRender = false;
    console.log('场景销毁前信息----------->', model.renderer?.info);
    model.isRender = false;
    if (ddFc5) ddFc5.destroy();
    if (ddFc1) ddFc1.destroy();
    if (ddFc2) ddFc2.destroy();
    if (ddFc4) ddFc4.destroy();
    if (ddFc6) ddFc6.destroy();
    if (ddFc7) ddFc7.destroy();
    if (ddFc8) ddFc8.destroy();
    if (sdFc1) sdFc1.destroy();
    if (sdFc3) sdFc3.destroy();
    if (sdFc4) sdFc4.destroy();
    if (sdFc2) sdFc2.destroy();
    if (sdFc5) sdFc5.destroy();
    if (threeFc8) threeFc8.destroy();

    singleWindowXkObj.destroy();
    model.destroy();
    model = null;
    group = null;
    singleWindowXkObj = null;
    ddFc5 = null;
    ddFc1 = null;
    ddFc2 = null;
    ddFc4 = null;
    ddFc6 = null;
    ddFc7 = null;
    ddFc8 = null;
    sdFc1 = null;
    sdFc3 = null;
    sdFc4 = null;
    sdFc2 = null;
    sdFc5 = null;
    threeFc8 = null;
  }
};