gas-injection/src/views/vent/monitorManager/windrectMonitor/windrect.threejs.ts

import * as THREE from 'three';
import { animateCamera } from '/@/utils/threejs/util';
import UseThree from '../../../../utils/threejs/useThree';
import lmWindRect from './longmen.threejs';
import zdWindRect from './zhedie.threejs';
import dsWindRect from './duishe.threejs';
import ddWindRect from './dantou.threejs';
import lmWindRectSide from './longmenSide.threejs';
import fixedWindRect from './duisheFixed.threejs';
import useEvent from '../../../../utils/threejs/useEvent';
import gsap from 'gsap';
// 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, //
  group: THREE.Object3D,
  lmWindRectObj: lmWindRect,
  zdWindRectObj: zdWindRect,
  dsWindRectObj: dsWindRect,
  lmWindRectSideObj: lmWindRectSide,
  ddWindRectObj: ddWindRect,
  fixedWindRectObj: fixedWindRect,
  windRectType = 'lmWindRect';

const { mouseDownFn } = useEvent();

// 初始化左右摇摆动画
const startAnimation = () => {
  // 定义鼠标点击事件
  model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
  model.canvasContainer?.addEventListener('pointerup', (event) => {
    event.stopPropagation();
    // 单道、 双道
    if (windRectType === 'lmWindRect' && lmWindRectObj) {
      lmWindRectObj.mouseUpModel.call(lmWindRectObj);
    } else if (windRectType === 'zdWindRect' && zdWindRectObj) {
      zdWindRectObj.mouseUpModel.call(zdWindRectObj);
    } else if (windRectType.startsWith('dsWindRect') && dsWindRectObj) {
      dsWindRectObj.mouseUpModel.call(dsWindRectObj);
    } else if (windRectType === 'lmWindSide' && lmWindRectSideObj) {
      lmWindRectSideObj.mouseUpModel.call(lmWindRectSideObj);
    } else if ((windRectType === 'ddWindSide' || windRectType === 'ddWindSide_sensor') && ddWindRectObj) {
      ddWindRectObj.mouseUpModel.call(ddWindRectObj);
    } else if (windRectType === 'duisheFixed' && fixedWindRectObj) {
      fixedWindRectObj.mouseUpModel.call(fixedWindRectObj);
    }
  });
};

// 鼠标点击、松开事件
const mouseEvent = (event) => {
  if (event.button == 0) {
    mouseDownFn(model, group, event, (intersects) => {
      if (windRectType === 'lmWindRect' && lmWindRectObj) {
        lmWindRectObj.mousedownModel.call(lmWindRectObj, intersects);
      } else if (windRectType === 'zdWindRect' && zdWindRectObj) {
        zdWindRectObj.mousedownModel.call(zdWindRectObj, intersects);
      } else if (windRectType.startsWith('dsWindRect') && dsWindRectObj) {
        dsWindRectObj.mousedownModel.call(dsWindRectObj, intersects);
      } else if (windRectType === 'lmWindSide' && lmWindRectSideObj) {
        lmWindRectSideObj.mousedownModel.call(lmWindRectSideObj, intersects);
      } else if ((windRectType === 'ddWindSide' || windRectType === 'ddWindSide_sensor') && ddWindRectObj) {
        ddWindRectObj.mousedownModel.call(ddWindRectObj, intersects);
      } else if (windRectType === 'duisheFixed' && fixedWindRectObj) {
        fixedWindRectObj.mousedownModel.call(fixedWindRectObj, intersects);
      }
    });
    console.log('摄像头控制信息', model.orbitControls, model.camera);
  }
};

/* 添加监控数据 */
export const addMonitorText = (selectData) => {
  if (windRectType === 'lmWindRect' && lmWindRectObj) {
    return lmWindRectObj.addMonitorText.call(lmWindRectObj, selectData);
  } else if (windRectType === 'zdWindRect' && zdWindRectObj) {
    return zdWindRectObj.addMonitorText.call(zdWindRectObj, selectData);
  } else if (windRectType.startsWith('dsWindRect') && dsWindRectObj) {
    return dsWindRectObj.addMonitorText.call(dsWindRectObj, selectData);
  } else if (windRectType === 'lmWindSide' && lmWindRectSideObj) {
    return lmWindRectSideObj.addMonitorText.call(lmWindRectSideObj, selectData);
  } else if ((windRectType === 'ddWindSide' || windRectType === 'ddWindSide_sensor') && ddWindRectObj) {
    return ddWindRectObj.addMonitorText.call(ddWindRectObj, selectData);
  } else if (windRectType === 'duisheFixed' && fixedWindRectObj) {
    fixedWindRectObj.addMonitorText.call(fixedWindRectObj, selectData);
  }
};

export const play = (flag, isDirect = false) => {
  if (windRectType === 'lmWindRect' && lmWindRectObj) {
    return lmWindRectObj.play.call(lmWindRectObj, flag, isDirect);
  } else if (windRectType === 'zdWindRect' && zdWindRectObj) {
    return zdWindRectObj.play.call(zdWindRectObj, flag, isDirect);
  } else if (windRectType.startsWith('dsWindRect') && dsWindRectObj) {
    return dsWindRectObj.play.call(dsWindRectObj, flag, isDirect);
  } else if (windRectType === 'lmWindSide' && lmWindRectSideObj) {
    lmWindRectSideObj.play.call(lmWindRectSideObj, flag, isDirect);
  }
};

export const initCameraCanvas = async (playerVal1?) => {
  if (windRectType === 'lmWindRect' && lmWindRectObj) {
    return lmWindRectObj.initCamera.call(lmWindRectObj, playerVal1);
  } else if (windRectType === 'zdWindRect' && zdWindRectObj) {
    return zdWindRectObj.initCamera.call(zdWindRectObj, playerVal1);
  } else if (windRectType.startsWith('dsWindRect') && dsWindRectObj) {
    return dsWindRectObj.initCamera.call(dsWindRectObj, playerVal1);
  } else if (windRectType === 'lmWindSide' && lmWindRectSideObj) {
    lmWindRectSideObj.initCamera.call(lmWindRectSideObj, playerVal1);
  }
};

export const playCamera = (flag) => {
  if (windRectType === 'lmWindSide') {
    lmWindRectSideObj.playCamera.call(lmWindRectSideObj, flag);
  }
};

// 切换风窗类型
export const setModelType = (type) => {
  if (!model || !model.scene || !model.camera) return;
  windRectType = type;
  model.camera.position.set(-1000, 100, 500);

  // 暂停龙门动画
  const lmGsap = gsap.getById('lm') || null;
  if (lmGsap != null) {
    lmGsap.pause();
    lmGsap.kill();
  }
  lmWindRectObj.deviceRunState = '';
  dsWindRectObj.isRun = false;

  lmWindRectSideObj.deviceRunState = '';
  lmWindRectSideObj.tanTouRunState = '';
  debugger;
  return new Promise((resolve) => {
    if (windRectType === 'lmWindRect' && lmWindRectObj && lmWindRectObj.group) {
      // 显示双道风窗
      model.startAnimation = lmWindRectObj.render.bind(lmWindRectObj);
      group = lmWindRectObj.group;

      const cfTanTou = lmWindRectObj.group?.getObjectByName('lmTanTou') as THREE.Group;
      if (cfTanTou) cfTanTou.position.setY(0);

      if (model?.scene?.getObjectByName('zdcf')) {
        model.scene.remove(zdWindRectObj.group);
      }
      if (model.scene?.getObjectByName('dscf')) {
        model.scene.remove(dsWindRectObj.group);
      }
      if (model.scene?.getObjectByName('lmcfSide')) {
        model.scene.remove(lmWindRectSideObj.group);
      }
      if (model.scene?.getObjectByName('ddcf')) {
        model.scene.remove(ddWindRectObj.group);
      }
      if (model.scene?.getObjectByName('fixedCf')) {
        model.scene.remove(fixedWindRectObj.group);
      }
      const oldCameraPosition = { x: -1000, y: 100, z: 500 };
      model.scene?.add(lmWindRectObj.group);
      setTimeout(async () => {
        resolve(null);
        const position = { x: 0, y: 0, z: 0 };

        await animateCamera(
          oldCameraPosition,
          { x: 0, y: 0, z: 0 },
          { x: 46.257, y: 57.539, z: 94.313 },
          { x: position.x, y: position.y, z: position.z },
          model,
          0.8
        );
      }, 300);
    } else if (windRectType === 'zdWindRect' && zdWindRectObj && zdWindRectObj.group) {
      // 停用混合器上所有预定的动作
      zdWindRectObj.animationAction.time = 0;
      model.startAnimation = zdWindRectObj.render.bind(zdWindRectObj);
      group = zdWindRectObj.group;
      if (model.scene?.getObjectByName('lmcf')) {
        model.scene.remove(lmWindRectObj.group);
      }
      if (model.scene?.getObjectByName('dscf')) {
        model.scene.remove(dsWindRectObj.group);
      }
      if (model.scene?.getObjectByName('lmcfSide')) {
        model.scene.remove(lmWindRectSideObj.group);
      }
      if (model.scene?.getObjectByName('ddcf')) {
        model.scene.remove(ddWindRectObj.group);
      }
      if (model.scene?.getObjectByName('fixedCf')) {
        model.scene.remove(fixedWindRectObj.group);
      }
      model.scene?.add(zdWindRectObj.group);
      const oldCameraPosition = { x: -1000, y: 100, z: 500 };
      setTimeout(async () => {
        resolve(null);
        const position = { x: 0, y: 0, z: 0 };
        await animateCamera(
          oldCameraPosition,
          { x: 0, y: 0, z: 0 },
          { x: 66.257, y: 57.539, z: 104.313 },
          { x: position.x, y: position.y, z: position.z },
          model,
          0.8
        );
      }, 300);
    } else if (windRectType.startsWith('dsWindRect') && dsWindRectObj && dsWindRectObj.group) {
      const type = windRectType.split('_')[1];
      // dsWindRectObj.isRun = false;
      model.startAnimation = dsWindRectObj.render.bind(dsWindRectObj);
      group = dsWindRectObj.group;
      dsWindRectObj.setModelType(type); // 设置对射类型

      const dsmove = dsWindRectObj.group?.getObjectByName('dsmove') as THREE.Object3D;
      const dsTanTou = dsmove?.getObjectByName('probe') as THREE.Object3D;
      if (dsTanTou) dsTanTou.position.setY(0.45);

      if (model.scene?.getObjectByName('lmcf')) {
        model.scene.remove(lmWindRectObj.group);
      }
      if (model.scene?.getObjectByName('zdcf')) {
        model.scene.remove(zdWindRectObj.group);
      }
      if (model.scene?.getObjectByName('lmcfSide')) {
        model.scene.remove(lmWindRectSideObj.group);
      }
      if (model.scene?.getObjectByName('ddcf')) {
        model.scene.remove(ddWindRectObj.group);
      }
      if (model.scene?.getObjectByName('fixedCf')) {
        model.scene.remove(fixedWindRectObj.group);
      }
      model.scene?.add(dsWindRectObj.group);
      setTimeout(async () => {
        resolve(null);
        const oldCameraPosition = { x: -1020, y: 100, z: 500 };
        await animateCamera(
          oldCameraPosition,
          { x: 0, y: 0, z: 0 },
          { x: 46.257, y: 57.539, z: 104.313 },
          { x: 1.84, y: 0.98, z: -1.44 },
          model,
          0.8
        );
      }, 300);
    } else if (windRectType === 'lmWindSide' && lmWindRectSideObj && lmWindRectSideObj.group) {
      model.startAnimation = lmWindRectSideObj.render.bind(lmWindRectSideObj);
      group = lmWindRectSideObj.group;

      const cfTanTou = lmWindRectSideObj.group?.getObjectByName('probe_bar') as THREE.Group;
      if (cfTanTou) cfTanTou.position.setY(0.377);
      if (model.scene?.getObjectByName('lmcf')) {
        model.scene.remove(lmWindRectObj.group);
      }
      if (model.scene?.getObjectByName('zdcf')) {
        model.scene.remove(zdWindRectObj.group);
      }
      if (model.scene?.getObjectByName('dscf')) {
        model.scene.remove(dsWindRectObj.group);
      }
      if (model.scene?.getObjectByName('ddcf')) {
        model.scene.remove(ddWindRectObj.group);
      }
      if (model.scene?.getObjectByName('fixedCf')) {
        model.scene.remove(fixedWindRectObj.group);
      }
      const oldCameraPosition = { x: -1000, y: 100, z: 500 };
      model.scene?.add(lmWindRectSideObj.group);
      setTimeout(async () => {
        resolve(null);
        const position = lmWindRectSideObj.group.position;
        // const position = new THREE.Vector3(0, 0, 0)
        await animateCamera(
          oldCameraPosition,
          { x: 0, y: 0, z: 0 },
          { x: 46.257, y: 57.539, z: 94.313 },
          // { x: 1, y: 2, z: 4 },
          { x: position.x, y: position.y, z: position.z },
          model,
          0.8
        );
        // lmWindRectSideObj.playCamera(true);
      }, 300);
    } else if (windRectType.startsWith('ddWindSide') && ddWindRectObj && ddWindRectObj.group) {
      model.startAnimation = ddWindRectObj.render.bind(ddWindRectObj);
      group = ddWindRectObj.group;

      if (model.scene?.getObjectByName('lmcf')) {
        model.scene.remove(lmWindRectObj.group);
      }
      if (model.scene?.getObjectByName('zdcf')) {
        model.scene.remove(zdWindRectObj.group);
      }
      if (model.scene?.getObjectByName('lmcfSide')) {
        model.scene.remove(lmWindRectSideObj.group);
      }
      if (model.scene?.getObjectByName('dscf')) {
        model.scene.remove(dsWindRectObj.group);
      }
      if (model.scene?.getObjectByName('fixedCf')) {
        model.scene.remove(fixedWindRectObj.group);
      }
      model.scene?.add(ddWindRectObj.group);
      if (windRectType == 'ddWindSide_sensor') {
        // 显示传感器头
        ddWindRectObj.resetModalType('sensor');
      } else {
        // 显示单头测风
        ddWindRectObj.resetModalType('');
      }
      setTimeout(async () => {
        resolve(null);
        const oldCameraPosition = { x: -1020, y: 100, z: 500 };
        await animateCamera(
          oldCameraPosition,
          { x: 0, y: 0, z: 0 },
          { x: 22.839308656135486, y: 56.930433490209, z: 103.22614933268565 },
          { x: -4.4575304696469304, y: 0.26828436264018835, z: -0.7214855106998845 },
          model,
          0.8
        );
      }, 300);
    } else if (windRectType === 'duisheFixed' && fixedWindRectObj && fixedWindRectObj.group) {
      model.startAnimation = fixedWindRectObj.render.bind(fixedWindRectObj);
      group = fixedWindRectObj.group;

      if (model.scene?.getObjectByName('lmcf')) {
        model.scene.remove(lmWindRectObj.group);
      }
      if (model.scene?.getObjectByName('zdcf')) {
        model.scene.remove(zdWindRectObj.group);
      }
      if (model.scene?.getObjectByName('lmcfSide')) {
        model.scene.remove(lmWindRectSideObj.group);
      }
      if (model.scene?.getObjectByName('dscf')) {
        model.scene.remove(dsWindRectObj.group);
      }
      if (model.scene?.getObjectByName('ddcf')) {
        model.scene.remove(ddWindRectObj.group);
      }
      model.scene?.add(fixedWindRectObj.group);
      setTimeout(async () => {
        resolve(null);
        const oldCameraPosition = { x: -1020, y: 100, z: 500 };
        await animateCamera(
          oldCameraPosition,
          { x: 0, y: 0, z: 0 },
          { x: 22.839308656135486, y: 56.930433490209, z: 103.22614933268565 },
          { x: -4.4575304696469304, y: 0.26828436264018835, z: -0.7214855106998845 },
          model,
          0.8
        );
      }, 300);
    }
  });
};

export const mountedThree = (playerDom) => {
  return new Promise(async (resolve) => {
    model = new UseThree('#window3D');
    model.setEnvMap('test1');
    model.renderer.toneMappingExposure = 1.0;

    ddWindRectObj = new ddWindRect(model);
    await ddWindRectObj.mountedThree();

    fixedWindRectObj = new fixedWindRect(model);
    await fixedWindRectObj.mountedThree(playerDom);

    dsWindRectObj = new dsWindRect(model);
    await dsWindRectObj.mountedThree();

    zdWindRectObj = new zdWindRect(model);
    await zdWindRectObj.mountedThree();

    lmWindRectSideObj = new lmWindRectSide(model);
    await lmWindRectSideObj.mountedThree();

    lmWindRectObj = new lmWindRect(model);
    await lmWindRectObj.mountedThree();
    resolve(null);
    model.animate();
    startAnimation();
  });
};

export const destroy = () => {
  if (model) {
    model.isRender = false;
    console.log('场景销毁前信息----------->', model.renderer?.info);
    lmWindRectObj?.destroy();
    dsWindRectObj?.destroy();
    zdWindRectObj?.destroy();
    lmWindRectSideObj?.destroy();
    ddWindRectObj?.destroy();
    group = undefined;
    model.destroy();
    model = undefined;
  }
};