[Mod 0000] 海石湾新增拱形三道风门

src/views/vent/monitorManager/gateMonitor/gate.threejs.three.hsw.ts

@@ -0,0 +1,531 @@
+import * as THREE from 'three';
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
+import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
+import { drawHot } from '/@/utils/threejs/util';
+
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:10px;right:10px;z-index:99999999999999';
+
+class FmHsw3 {
+  modelName = 'fmHsw3';
+  model; //
+  group;
+  isLRAnimation = true; // 是否开启左右摇摆动画
+  direction = 1; // 摇摆方向
+  animationTimer: NodeJS.Timeout | null = null; // 摇摆开启定时器
+  deviceDetailCSS3D;
+  playerStartClickTime1 = new Date().getTime();
+  playerStartClickTime2 = new Date().getTime();
+
+  fmClock = new THREE.Clock();
+  mixers: THREE.AnimationMixer | undefined;
+
+  clipActionArr = {
+    frontDoor: null as unknown as THREE.AnimationAction,
+    centerDoor: null as unknown as THREE.AnimationAction,
+    backDoor: null as unknown as THREE.AnimationAction,
+  };
+
+  constructor(model) {
+    this.model = model;
+  }
+
+  addLight() {
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+    directionalLight.position.set(-0.8, 23, 3.9);
+    this.group?.add(directionalLight);
+    directionalLight.target = this.group as THREE.Object3D;
+
+    // const pointLight2 = new THREE.PointLight(0xffeeee, 1, 310);
+    // pointLight2.position.set(-1.5, 2, -0.9);
+    // pointLight2.shadow.bias = 0.05;
+    // this.group?.add(pointLight2);
+
+    // const pointLight3 = new THREE.PointLight(0xffeeee, 1, 310);
+    // pointLight3.position.set(1.3, 2, -0.9);
+    // pointLight3.shadow.bias = 0.05;
+    // this.group?.add(pointLight3);
+
+    // const pointLight4 = new THREE.PointLight(0xffeeee, 1, 150);
+    // pointLight4.position.set(4.3, 1, -0.9);
+    // pointLight4.shadow.bias = 0.05;
+    // this.group?.add(pointLight4);
+
+    // const pointLight5 = new THREE.PointLight(0xffeeee, 1, 150);
+    // pointLight5.position.set(4.3, 1, -0.9);
+    // pointLight5.shadow.bias = 0.05;
+    // this.group?.add(pointLight5);
+
+    // const pointLight6 = new THREE.PointLight(0xffeeee, 1, 150);
+    // pointLight6.position.set(-4.4, 1, -0.9);
+    // pointLight6.shadow.bias = 0.05;
+    // this.group?.add(pointLight6);
+  }
+  // 重置摄像头
+  resetCamera() {
+    this.model.camera.far = 274;
+    this.model.orbitControls?.update();
+    this.model.camera.updateProjectionMatrix();
+  }
+  // 设置模型位置
+  setModalPosition() {
+    this.group?.scale.set(22, 22, 22);
+    this.group?.position.set(-20, 20, 9);
+  }
+
+  /* 添加监控数据 */
+  addMonitorText(selectData) {
+    if (!this.group) {
+      return;
+    }
+    const screenDownText = VENT_PARAM['modalText']
+      ? VENT_PARAM['modalText']
+      : History_Type['type'] == 'remote'
+      ? `国能神东煤炭集团监制`
+      : '煤炭科学技术研究院有限公司研制';
+
+    const screenDownTextX = 80 - (screenDownText.length - 11) * 6;
+    const textArr = [
+      {
+        text: `远程控制自动风门`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 120,
+        y: 100,
+      },
+      {
+        text: `净通行高度(m):`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 155,
+      },
+      {
+        text: `${selectData.fclearheight ? selectData.fclearheight : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 290,
+        y: 155,
+      },
+      {
+        text: `净通行宽度(m): `,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 215,
+      },
+      {
+        text: ` ${selectData.fclearwidth ? selectData.fclearwidth : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 280,
+        y: 215,
+      },
+      {
+        text: `故障诊断:`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 275,
+      },
+      {
+        text: `${selectData.warnLevel_str ? selectData.warnLevel_str : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 280,
+        y: 275,
+      },
+      {
+        text: screenDownText,
+        font: 'normal 28px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: screenDownTextX,
+        y: 325,
+      },
+    ];
+
+    //
+    getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
+      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
+      textMap.colorSpace = THREE.SRGBColorSpace;
+      const textMaterial = new THREE.MeshBasicMaterial({
+        // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
+        map: textMap, // 设置纹理贴图
+        transparent: true,
+        side: THREE.FrontSide, // 这里是双面渲染的意思
+      });
+      textMaterial.blending = THREE.CustomBlending;
+      const monitorPlane = this.group.getObjectByName('monitorText');
+      if (monitorPlane) {
+        monitorPlane.material = textMaterial;
+      } else {
+        const planeGeometry = new THREE.PlaneGeometry(526, 346); // 平面3维几何体PlaneGeometry
+        const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
+        planeMesh.name = 'monitorText';
+        planeMesh.scale.set(0.002, 0.002, 0.002);
+        planeMesh.position.set(4.205, 0.09, -0.39);
+        this.group.add(planeMesh);
+      }
+    });
+  }
+
+  /** 添加热点 */
+  drawHots() {
+    const hotPositions = [
+      { x: -0.37, y: 0.26, z: -0.32 },
+      { x: 0.28, y: -0.2, z: -0.43 },
+      { x: 0.55, y: -0.22, z: -0.38 },
+    ];
+    for (let i = 0; i < 3; i++) {
+      const hotPoint = drawHot(0.1);
+      const position = hotPositions[i];
+      // hotPoint.scale.set(0.3, 0.3, 0.3);
+      hotPoint.position.set(position.x, position.y, position.z);
+      hotPoint.name = 'hotPoint' + i;
+      this.group?.add(hotPoint);
+    }
+  }
+
+  /* 风门动画 */
+  render() {
+    if (!this.model) {
+      return;
+    }
+
+    // 风门开关动画
+    if (this.mixers && this.fmClock.running) this.mixers.update(2);
+  }
+
+  /* 点击风窗，风窗全屏 */
+  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
+    if (this.animationTimer) {
+      clearTimeout(this.animationTimer);
+      this.animationTimer = null;
+    }
+
+    // 判断是否点击到视频
+    intersects.find((intersect) => {
+      const mesh = intersect.object;
+      if (mesh.name === 'player1') {
+        if (new Date().getTime() - this.playerStartClickTime1 < 400) {
+          // model.orbitControls?.dispatchEvent.call(model.orbitControls, { type: 'end' })
+          // 双击，视频放大
+          // if (this.player1) {
+          //   this.player1.requestFullscreen();
+          // }
+        }
+        this.playerStartClickTime1 = new Date().getTime();
+        return true;
+      } else if (mesh.name === 'player2') {
+        if (new Date().getTime() - this.playerStartClickTime2 < 400) {
+          // model.orbitControls?.dispatchEvent.call(model.orbitControls, { type: 'end' })
+          // 双击，视频放大
+          // if (this.player2) {
+          //   this.player2.requestFullscreen();
+          // }
+        }
+        this.playerStartClickTime2 = new Date().getTime();
+        return true;
+      } else if (mesh.name.startsWith('hotPoint')) {
+        // if (this.deviceDetailCSS3D) {
+        //   this.deviceDetailCSS3D.position.set(mesh.position.x + 0.035, mesh.position.y + 0.66, mesh.position.z + 0.02);
+        //   console.log('[ deviceDetailCSS3D.position ] >', this.deviceDetailCSS3D.position);
+        //   this.deviceDetailCSS3D.visible = true;
+        //   return true;
+        // }
+      } else {
+        // this.deviceDetailCSS3D.visible = false;
+        console.log('[ 点击事件 ] >');
+      }
+      return false;
+    });
+  }
+
+  mouseUpModel() {}
+
+  /* 提取风门序列帧，初始化前后门动画 */
+  initAnimation() {
+    const fmHsw3 = this.group?.getObjectByName('fmHsw3');
+    const fmGroup = fmHsw3?.getObjectByName('fm');
+    if (fmGroup) {
+      const tracks = fmGroup.animations[0].tracks;
+      const fontTracks: any[] = [],
+        centerTracks: any[] = [],
+        backTracks: any[] = [];
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        if (track.name.startsWith('qianmen')) {
+          fontTracks.push(track);
+        } else if (track.name.startsWith('zhongmen')) {
+          centerTracks.push(track);
+        } else if (track.name.startsWith('houmen')) {
+          backTracks.push(track);
+        }
+      }
+      this.mixers = new THREE.AnimationMixer(fmGroup);
+
+      const frontDoor = new THREE.AnimationClip('frontDoor', 4, fontTracks);
+      const frontClipAction = this.mixers.clipAction(frontDoor, fmGroup);
+      frontClipAction.clampWhenFinished = true;
+      frontClipAction.loop = THREE.LoopOnce;
+      this.clipActionArr.frontDoor = frontClipAction;
+
+      const backDoor = new THREE.AnimationClip('backDoor', 4, backTracks);
+
+      const backClipAction = this.mixers.clipAction(backDoor, fmGroup);
+      backClipAction.clampWhenFinished = true;
+      backClipAction.loop = THREE.LoopOnce;
+      this.clipActionArr.backDoor = backClipAction;
+
+      const centerDoor = new THREE.AnimationClip('centerDoor', 4, centerTracks);
+      const centerClipAction = this.mixers.clipAction(centerDoor, fmGroup);
+      centerClipAction.clampWhenFinished = true;
+      centerClipAction.loop = THREE.LoopOnce;
+      this.clipActionArr.centerDoor = centerClipAction;
+    }
+  }
+
+  deviceDetailCard(position = { x: 0, y: 0, z: 0 }) {
+    const element = document.getElementById('deviceCard') as HTMLElement;
+    this.deviceDetailCSS3D = new CSS2DObject(element);
+    this.deviceDetailCSS3D.name = 'deviceCard';
+    this.deviceDetailCSS3D.position.set(position.x, position.y, position.z);
+    this.deviceDetailCSS3D.visible = false;
+    // this.model.scene.add(this.deviceDetailCSS3D);
+    this.group.add(this.deviceDetailCSS3D);
+  }
+
+  // 播放动画
+  play(handlerState, timeScale = 0.01) {
+    if (this.clipActionArr.frontDoor && this.clipActionArr.backDoor) {
+      let handler = () => {};
+      switch (handlerState) {
+        case 1: // 打开前门
+          handler = () => {
+            this.clipActionArr.frontDoor.paused = true;
+            this.clipActionArr.frontDoor.reset();
+            this.clipActionArr.frontDoor.time = 1.2;
+            this.clipActionArr.frontDoor.timeScale = timeScale;
+            this.clipActionArr.frontDoor.clampWhenFinished = true;
+            this.clipActionArr.frontDoor.play();
+            this.fmClock.start();
+          };
+          break;
+        case 2: // 关闭前门
+          handler = () => {
+            this.clipActionArr.frontDoor.paused = true;
+            this.clipActionArr.frontDoor.reset(); //
+            this.clipActionArr.frontDoor.time = 4;
+            this.clipActionArr.frontDoor.timeScale = -timeScale;
+            this.clipActionArr.frontDoor.clampWhenFinished = true;
+            this.clipActionArr.frontDoor.play();
+            this.fmClock.start();
+          };
+          break;
+        case 3: // 打开后门
+          handler = () => {
+            this.clipActionArr.backDoor.paused = true;
+            this.clipActionArr.backDoor.reset();
+            this.clipActionArr.backDoor.time = 1.2;
+            this.clipActionArr.backDoor.timeScale = timeScale;
+            this.clipActionArr.backDoor.clampWhenFinished = true;
+            this.clipActionArr.backDoor.play();
+            this.fmClock.start();
+          };
+          break;
+        case 4: // 关闭后门
+          handler = () => {
+            this.clipActionArr.backDoor.paused = true;
+            this.clipActionArr.backDoor.reset();
+            this.clipActionArr.backDoor.time = 4;
+            this.clipActionArr.backDoor.timeScale = -timeScale;
+            this.clipActionArr.backDoor.clampWhenFinished = true;
+            this.clipActionArr.backDoor.play();
+            this.fmClock.start();
+          };
+          break;
+
+        case 8: // 打开后门
+          handler = () => {
+            this.clipActionArr.centerDoor.paused = true;
+            this.clipActionArr.centerDoor.reset();
+            this.clipActionArr.centerDoor.time = 1.2;
+            this.clipActionArr.centerDoor.timeScale = timeScale;
+            this.clipActionArr.centerDoor.clampWhenFinished = true;
+            this.clipActionArr.centerDoor.play();
+            this.fmClock.start();
+          };
+          break;
+        case 9: // 关闭后门
+          handler = () => {
+            this.clipActionArr.centerDoor.paused = true;
+            this.clipActionArr.centerDoor.reset();
+            this.clipActionArr.centerDoor.time = 4;
+            this.clipActionArr.centerDoor.timeScale = -timeScale;
+            this.clipActionArr.centerDoor.clampWhenFinished = true;
+            this.clipActionArr.centerDoor.play();
+            this.fmClock.start();
+          };
+          break;
+        // case 5: // 打开前后门
+        //   handler = () => {
+        //     this.clipActionArr.backDoor.paused = true;
+        //     this.clipActionArr.frontDoor.paused = true;
+
+        //     this.clipActionArr.frontDoor.reset();
+        //     this.clipActionArr.frontDoor.time = 0;
+        //     this.clipActionArr.frontDoor.timeScale = 0.01;
+        //     this.clipActionArr.frontDoor.clampWhenFinished = true;
+        //     this.clipActionArr.frontDoor.play();
+
+        //     this.clipActionArr.backDoor.reset();
+        //     this.clipActionArr.backDoor.time = 0;
+        //     this.clipActionArr.backDoor.timeScale = 0.01;
+        //     this.clipActionArr.backDoor.clampWhenFinished = true;
+        //     this.clipActionArr.backDoor.play();
+        //     this.fmClock.start();
+        //   };
+        //   break;
+        // case 6: // 关闭前后门
+        //   handler = () => {
+        //     this.clipActionArr.backDoor.paused = true;
+        //     this.clipActionArr.frontDoor.paused = true;
+
+        //     this.clipActionArr.frontDoor.reset();
+        //     this.clipActionArr.frontDoor.time = 4;
+        //     this.clipActionArr.frontDoor.timeScale = -0.01;
+        //     this.clipActionArr.frontDoor.clampWhenFinished = true;
+        //     this.clipActionArr.frontDoor.play();
+        //     this.clipActionArr.backDoor.reset();
+        //     this.clipActionArr.backDoor.time = 4;
+        //     this.clipActionArr.backDoor.timeScale = -0.01;
+        //     this.clipActionArr.backDoor.clampWhenFinished = true;
+        //     this.clipActionArr.backDoor.play();
+        //     this.fmClock.start();
+        //   };
+        //   break;
+        default:
+      }
+
+      handler();
+      // model.clock.start();
+      // const honglvdeng = group.getObjectByName('honglvdeng');
+      // const material = honglvdeng.material;
+      // setTimeout(() => {
+      //   if (handlerState === 2 || handlerState === 4 || handlerState === 6) {
+      //     material.color = new THREE.Color(0x00ff00);
+      //   } else {
+      //     material.color = new THREE.Color(0xff0000);
+      //   }
+      // }, 1000);
+    }
+  }
+
+  async initCamera(dom1?) {
+    const videoPlayer1 = dom1;
+    let monitorPlane: THREE.Mesh | null = null;
+    const canvas = await getTextCanvas(320, 180, '', 'noSinge.png');
+    const textMap = new THREE.CanvasTexture(canvas); // 关键一步
+    const textMaterial = new THREE.MeshBasicMaterial({
+      map: textMap, // 设置纹理贴图
+      transparent: true,
+      side: THREE.DoubleSide, // 这里是双面渲染的意思
+    });
+    textMaterial.blending = THREE.CustomBlending;
+    monitorPlane = this.group?.getObjectByName('noPlayer');
+    if (monitorPlane) {
+      monitorPlane.material = textMaterial;
+    } else {
+      const planeGeometry = new THREE.PlaneGeometry(100, 100); // 平面3维几何体PlaneGeometry
+      monitorPlane = new THREE.Mesh(planeGeometry, textMaterial);
+      textMaterial.dispose();
+      planeGeometry.dispose();
+    }
+    const videoPlayer = this.group.getObjectByName('player1');
+    if (videoPlayer) {
+      this.model.clearMesh(videoPlayer);
+      this.group.remove(videoPlayer);
+    }
+    const noPlayer1 = this.group.getObjectByName('noPlayer1');
+    if (noPlayer1) {
+      this.model.clearMesh(noPlayer1);
+      this.group.remove(noPlayer1);
+    }
+    if (!videoPlayer1 && videoPlayer1 === null) {
+      monitorPlane.name = 'noPlayer1';
+      monitorPlane.scale.set(0.0085, 0.0056, 0.012);
+      monitorPlane.position.set(-4.23, 0.02, -0.39);
+      this.group?.add(monitorPlane);
+    } else if (videoPlayer1) {
+      const mesh = renderVideo(this.group, videoPlayer1, 'player1');
+      if (mesh) {
+        mesh?.scale.set(-0.028, 0.0285, 1);
+        mesh?.position.set(-4.238, 0.02, -0.4);
+        mesh.rotation.y = -Math.PI;
+        this.group.add(mesh);
+      }
+    }
+  }
+  resetModal() {
+    const fmThreeBase = this.group.getObjectByName('fmThreeBase');
+    if (fmThreeBase) {
+      const screenObj1 = fmThreeBase.getObjectByName('对象192');
+      const screenObj2 = fmThreeBase.getObjectByName('对象231');
+      if (screenObj1) screenObj1.visible = false;
+      if (screenObj2) screenObj2.visible = false;
+    }
+  }
+
+  mountedThree() {
+    this.group = new THREE.Object3D();
+    this.group.name = this.modelName;
+    return new Promise((resolve) => {
+      this.model.setGLTFModel('fmHsw3').then((gltf) => {
+        const fmModal = gltf[0];
+        fmModal.name = 'fm';
+        this.group?.add(fmModal);
+        console.log('fmHsw3', this.group);
+        this.setModalPosition();
+        this.resetModal();
+        // 初始化左右摇摆动画;
+        this.initAnimation();
+        // this.drawHots();
+        this.addLight();
+        // this.deviceDetailCard();
+        this.model.animate();
+        if (this.model.camera && this.model.camera.layers.mask == -1) this.model.camera.layers.toggle(1);
+        resolve(null);
+        // this.initCamera(playerDom);
+      });
+    });
+  }
+
+  destroy() {
+    if (this.model) {
+      if (this.mixers) {
+        const fmGroup = this.group?.getObjectByName('fmThree');
+        this.mixers.uncacheClip(this.clipActionArr.frontDoor.getClip());
+        this.mixers.uncacheClip(this.clipActionArr.backDoor.getClip());
+        this.mixers.uncacheAction(this.clipActionArr.frontDoor.getClip(), fmGroup);
+        this.mixers.uncacheAction(this.clipActionArr.backDoor.getClip(), fmGroup);
+        this.mixers.uncacheRoot(fmGroup);
+
+        if (this.model.animations[0]) this.model.animations[0].tracks = [];
+      }
+      this.model.clearGroup(this.group);
+      this.clipActionArr.backDoor = undefined;
+      this.clipActionArr.frontDoor = undefined;
+      this.mixers = undefined;
+    }
+  }
+}
+export default FmHsw3;

src/views/vent/monitorManager/gateMonitor/gate.threejs.three.tl.ts

@@ -7,8 +7,8 @@ import { drawHot } from '/@/utils/threejs/util';
 // const gui = new dat.GUI();
 // gui.domElement.style = 'position:absolute;top:10px;right:10px;z-index:99999999999999';
 
-class FmThreeTl {
-  modelName = 'fm2';
+class FmHsw3 {
+  modelName = 'fmHsw3';
   model; //
   group;
   isLRAnimation = true; // 是否开启左右摇摆动画
@@ -442,7 +442,7 @@ class FmThreeTl {
     this.group = new THREE.Object3D();
     this.group.name = this.modelName;
     return new Promise((resolve) => {
-      this.model.setGLTFModel(['fm-three-tl'], this.group).then(() => {
+      this.model.setGLTFModel(['fmHsw3'], this.group).then(() => {
         this.group.name = 'fm2';
         this.setModalPosition();
         this.resetModal();
@@ -493,4 +493,4 @@ class FmThreeTl {
     }
   }
 }
-export default FmThreeTl;
+export default FmHsw3;

src/views/vent/monitorManager/gateMonitor/gate.threejs.ts

@@ -9,6 +9,9 @@ import FmThreeTl from './gate.threejs.three.tl';
 import FmDc from './gate.threejs.window';
 import FmDcHJG from './gate.threejs.window.hjg';
 import FmDcZHQ from './gate.threejs.window.zhq';
+import FmHsw3 from './gate.threejs.three.hsw';
+import FmYjXr from './gate.threejs.two.yj'; // 窑街行人
+import FmYj from './gate.threejs.yj'; // 窑街
 import { animateCamera } from '/@/utils/threejs/util';
 import useEvent from '../../../../utils/threejs/useEvent';
 import { getDictItemsByCode } from '/@/utils/dict';
@@ -25,6 +28,9 @@ let model,
   fmWindowHjg, // 带风窗
   fmWindowZhq, // 带风窗 沼和泉
   fmWindow, // 带风窗
+  fmHsw3, // 海石湾拱形三道风门
+  fmYjXr, // 窑街拱形行人风门
+  fmYj, // 窑街拱形行车风门
   group: THREE.Object3D,
   fmType = '',
   windowType = 'singleWindow';
@@ -67,6 +73,12 @@ const startAnimation = () => {
       fmWindowHjg.mouseUpModel();
     } else if (fmType === 'fmWindowZhq') {
       fmWindowZhq.mouseUpModel();
+    } else if (fmType === 'fmHsw3') {
+      fmHsw3.mouseUpModel();
+    } else if (fmType === 'fmYjXr') {
+      fmYjXr.mouseUpModel();
+    } else if (fmType === 'fmYj') {
+      fmYj.mouseUpModel();
     }
   });
 };
@@ -93,6 +105,12 @@ const mouseEvent = (event) => {
         fmWindowHjg.mousedownModel(intersects);
       } else if (fmType === 'fmWindowZhq' && fmWindowZhq) {
         fmWindowZhq.mousedownModel(intersects);
+      } else if (fmType === 'fmHsw3' && fmHsw3) {
+        fmHsw3.mousedownModel(intersects);
+      } else if (fmType === 'fmYjXr' && fmYjXr) {
+        fmYjXr.mousedownModel(intersects);
+      } else if (fmType === 'fmYj' && fmYj) {
+        fmYj.mousedownModel(intersects);
       }
     });
     console.log('摄像头控制信息', model.orbitControls, model.camera);
@@ -118,6 +136,12 @@ export const addMonitorText = (selectData) => {
     fmWindowHjg.addMonitorText(selectData);
   } else if (fmType === 'fmWindowZhq' && fmWindowZhq) {
     fmWindowZhq.addMonitorText(selectData);
+  } else if (fmType === 'fmHsw3' && fmHsw3) {
+    fmHsw3.addMonitorText(selectData);
+  } else if (fmType === 'fmYjXr' && fmYjXr) {
+    fmYjXr.addMonitorText(selectData);
+  } else if (fmType === 'fmYj' && fmYj) {
+    fmYj.addMonitorText(selectData);
   }
 };
 
@@ -151,7 +175,13 @@ export const play = (handlerState, flag?) => {
   } else if (fmType === 'fmTwoSs' && fmTwoSs) {
     return fmTwoSs.play.call(fmTwoSs, handlerState, flag);
   } else if (fmType === 'fmThreeTl') {
-    fmThreeTl?.play.call(fmThreeTl, handlerState, flag);
+    return fmThreeTl?.play.call(fmThreeTl, handlerState, flag);
+  } else if (fmType === 'fmHsw3') {
+    return fmHsw3?.play.call(fmHsw3, handlerState, flag);
+  } else if (fmType === 'fmYjXr') {
+    return fmYjXr?.play.call(fmYjXr, handlerState, flag);
+  } else if (fmType === 'fmYj') {
+    return fmYj?.play.call(fmYj, handlerState, flag);
   }
 };
 
@@ -508,6 +538,105 @@ export const setModelType = (type) => {
           0.8
         );
       }, 300);
+    } else if (fmType === 'fmHsw3' && fmHsw3 && fmHsw3.group) {
+      if (fmHsw3.clipActionArr.frontDoor && fmHsw3.clipActionArr.backDoor) {
+        fmHsw3.clipActionArr.frontDoor.reset();
+        fmHsw3.clipActionArr.frontDoor.time = 0.5;
+        fmHsw3.clipActionArr.backDoor.reset();
+        fmHsw3.clipActionArr.backDoor.time = 0.5;
+        fmHsw3.clipActionArr.frontDoor.stop();
+        fmHsw3.clipActionArr.backDoor.stop();
+      }
+
+      if (fmHsw3.frontDamperOpenMesh) fmHsw3.frontDamperOpenMesh.visible = false;
+      if (fmHsw3.frontDamperClosedMesh) fmHsw3.frontDamperClosedMesh.visible = true;
+      if (fmHsw3.backDamperOpenMesh) fmHsw3.backDamperOpenMesh.visible = false;
+      if (fmHsw3.backDamperClosedMesh) fmHsw3.backDamperClosedMesh.visible = true;
+
+      model.startAnimation = fmHsw3.render.bind(fmHsw3);
+      model.scene.remove(group);
+      group = fmHsw3.group;
+      group.rotation.y = 0;
+
+      const oldCameraPosition = { x: -1000, y: 100, z: 500 };
+      setTimeout(async () => {
+        resolve(null);
+        model.scene.add(fmHsw3.group);
+        await animateCamera(
+          oldCameraPosition,
+          { x: 0, y: 0, z: 0 },
+          { x: 50.99, y: 69.32, z: 93.61 },
+          { x: -10.04, y: -14.38, z: -31.4 },
+          model,
+          0.8
+        );
+      }, 300);
+    } else if (fmType === 'fmYjXr' && fmYjXr && fmYjXr.group) {
+      if (fmYjXr.clipActionArr.frontDoor && fmYjXr.clipActionArr.backDoor) {
+        fmYjXr.clipActionArr.frontDoor.reset();
+        fmYjXr.clipActionArr.frontDoor.time = 0.5;
+        fmYjXr.clipActionArr.backDoor.reset();
+        fmYjXr.clipActionArr.backDoor.time = 0.5;
+        fmYjXr.clipActionArr.frontDoor.stop();
+        fmYjXr.clipActionArr.backDoor.stop();
+      }
+
+      if (fmYjXr.frontDamperOpenMesh) fmYjXr.frontDamperOpenMesh.visible = false;
+      if (fmYjXr.frontDamperClosedMesh) fmYjXr.frontDamperClosedMesh.visible = true;
+      if (fmYjXr.backDamperOpenMesh) fmYjXr.backDamperOpenMesh.visible = false;
+      if (fmYjXr.backDamperClosedMesh) fmYjXr.backDamperClosedMesh.visible = true;
+
+      model.startAnimation = fmYjXr.render.bind(fmYjXr);
+      model.scene.remove(group);
+      group = fmYjXr.group;
+      group.rotation.y = 0;
+
+      const oldCameraPosition = { x: -1000, y: 100, z: 500 };
+      setTimeout(async () => {
+        resolve(null);
+        model.scene.add(fmYjXr.group);
+        await animateCamera(
+          oldCameraPosition,
+          { x: 0, y: 0, z: 0 },
+          { x: 50.99, y: 69.32, z: 93.61 },
+          { x: -10.04, y: -14.38, z: -31.4 },
+          model,
+          0.8
+        );
+      }, 300);
+    } else if (fmType === 'fmYj' && fmYj && fmYj.group) {
+      if (fmYj.clipActionArr.frontDoor && fmYj.clipActionArr.backDoor) {
+        fmYj.clipActionArr.frontDoor.reset();
+        fmYj.clipActionArr.frontDoor.time = 0.5;
+        fmYj.clipActionArr.backDoor.reset();
+        fmYj.clipActionArr.backDoor.time = 0.5;
+        fmYj.clipActionArr.frontDoor.stop();
+        fmYj.clipActionArr.backDoor.stop();
+      }
+
+      if (fmYj.frontDamperOpenMesh) fmYj.frontDamperOpenMesh.visible = false;
+      if (fmYj.frontDamperClosedMesh) fmYj.frontDamperClosedMesh.visible = true;
+      if (fmYj.backDamperOpenMesh) fmYj.backDamperOpenMesh.visible = false;
+      if (fmYj.backDamperClosedMesh) fmYj.backDamperClosedMesh.visible = true;
+
+      model.startAnimation = fmYj.render.bind(fmYj);
+      model.scene.remove(group);
+      group = fmYj.group;
+      group.rotation.y = 0;
+
+      const oldCameraPosition = { x: -1000, y: 100, z: 500 };
+      setTimeout(async () => {
+        resolve(null);
+        model.scene.add(fmYj.group);
+        await animateCamera(
+          oldCameraPosition,
+          { x: 0, y: 0, z: 0 },
+          { x: 50.99, y: 69.32, z: 93.61 },
+          { x: -10.04, y: -14.38, z: -31.4 },
+          model,
+          0.8
+        );
+      }, 300);
     }
   });
 };
@@ -525,7 +654,7 @@ export const initCameraCanvas = async (playerVal1) => {
 };
 
 export const mountedThree = (playerDom) => {
-  const { sysOrgCode } = useGlobSetting();
+  // const { sysOrgCode } = useGlobSetting();
   debugger;
   // const sysOrgCode = 'gsgszdek';
   return new Promise(async (resolve) => {
@@ -533,84 +662,78 @@ export const mountedThree = (playerDom) => {
     model.setEnvMap('test1.hdr');
     model.renderer.toneMappingExposure = 0.9;
     model.camera.position.set(100, 0, 1000);
-    switch (sysOrgCode) {
-      case 'yjmdsankuang': //窑街三矿
-      case 'yjmdhswmk': //窑街海石湾
-      case 'yjmdjhmk': //窑街金河矿
-        const FmYj = await import('./gate.threejs.yj');
-        if (FmYj) fm3 = new FmYj.default(model);
-        if (fm3) fm3.mountedThree(playerDom);
-        const FmTwoYj = await import('./gate.threejs.two.yj');
-        if (FmTwoYj) fmTwoSs = new FmTwoYj.default(model);
-        fmTwoSs.mountedThree(playerDom);
-        fmXr = new FmXR(model);
-        fmXr.mountedThree(playerDom);
-        resolve(null);
-        break;
-      default:
-        // 根据字典加载模型
-        const dictCodes = getDictItemsByCode('gateStyle');
-        if (dictCodes && dictCodes.length > 0) {
-          for (let i = 0; i < dictCodes.length; i++) {
-            const dict = dictCodes[i];
-            switch (dict.value) {
-              case 'fmXr':
-                fmXr = new FmXR(model);
-                fmXr.mountedThree(playerDom);
-                break;
-              case 'fmYy':
-                fm1 = new Fm1(model);
-                fm1.mountedThree(playerDom);
-                break;
-              case 'gate_qd':
-                fm3 = new Fm3(model);
-                await fm3.mountedThree();
-                break;
-              case 'fmSs':
-                fmTwoSs = new FmTwoSs(model);
-                await fmTwoSs.mountedThree();
-                break;
-              case 'fmtl3':
-                fmThreeTl = new FmThreeTl(model);
-                await fmThreeTl.mountedThree();
-                break;
-              case 'fmSs3':
-                fm2 = new Fm2(model);
-                await fm2.mountedThree();
-                break;
-              case 'fm_fc_hjg':
-                fmWindowHjg = new FmDcHJG(model);
-                await fmWindowHjg.mountedThree();
-                break;
-              case 'fm_fc':
-                fmWindow = new FmDc(model);
-                await fmWindow.mountedThree();
-                break;
-              case 'fm_fc_zhq': //fmWindowZhq
-                fmWindowZhq = new FmDcZHQ(model);
-                await fmWindowZhq.mountedThree();
-                break;
-            }
-          }
-          resolve(null);
-        } else {
-          fm3 = new Fm3(model);
-          fm3.mountedThree(playerDom);
-          fmTwoSs = new FmTwoSs(model);
-          fmTwoSs.mountedThree(playerDom);
-          fm2 = new Fm2(model);
-          fm2.mountedThree(playerDom);
-          // 三道门
-          fmThreeTl = new FmThreeTl(model);
-          if (fmThreeTl) fmThreeTl.mountedThree(playerDom);
-          fmXr = new FmXR(model);
-          fmXr.mountedThree(playerDom);
-          // 液压风门
-          fm1 = new Fm1(model);
-          fm1.mountedThree(playerDom);
-          resolve(null);
-          break;
+    const dictCodes = getDictItemsByCode('gateStyle');
+    if (dictCodes && dictCodes.length > 0) {
+      for (let i = 0; i < dictCodes.length; i++) {
+        const dict = dictCodes[i];
+        switch (dict.value) {
+          case 'fmXr':
+            fmXr = new FmXR(model);
+            fmXr.mountedThree(playerDom);
+            break;
+          case 'fmYy':
+            fm1 = new Fm1(model);
+            fm1.mountedThree(playerDom);
+            break;
+          case 'gate_qd':
+            fm3 = new Fm3(model);
+            await fm3.mountedThree();
+            break;
+          case 'fmSs':
+            fmTwoSs = new FmTwoSs(model);
+            await fmTwoSs.mountedThree();
+            break;
+          case 'fmtl3':
+            fmThreeTl = new FmThreeTl(model);
+            await fmThreeTl.mountedThree();
+            break;
+          case 'fmSs3':
+            fm2 = new Fm2(model);
+            await fm2.mountedThree();
+            break;
+          case 'fm_fc_hjg':
+            fmWindowHjg = new FmDcHJG(model);
+            await fmWindowHjg.mountedThree();
+            break;
+          case 'fm_fc':
+            fmWindow = new FmDc(model);
+            await fmWindow.mountedThree();
+            break;
+          case 'fm_fc_zhq': //fmWindowZhq
+            fmWindowZhq = new FmDcZHQ(model);
+            await fmWindowZhq.mountedThree();
+            break;
+          case 'fmHsw3':
+            fmHsw3 = new FmHsw3(model);
+            await fmHsw3.mountedThree();
+            break;
+          case 'fmYjXr':
+            fmYjXr = new FmYjXr(model);
+            await fmYjXr.mountedThree();
+            break;
+          case 'fmYj':
+            fmYj = new FmYj(model);
+            await fmYj.mountedThree();
+            break;
         }
+      }
+      resolve(null);
+    } else {
+      fm3 = new Fm3(model);
+      fm3.mountedThree(playerDom);
+      fmTwoSs = new FmTwoSs(model);
+      fmTwoSs.mountedThree(playerDom);
+      fm2 = new Fm2(model);
+      fm2.mountedThree(playerDom);
+      // 三道门
+      fmThreeTl = new FmThreeTl(model);
+      if (fmThreeTl) fmThreeTl.mountedThree(playerDom);
+      fmXr = new FmXR(model);
+      fmXr.mountedThree(playerDom);
+      // 液压风门
+      fm1 = new Fm1(model);
+      fm1.mountedThree(playerDom);
+      resolve(null);
     }
 
     model.animate();
@@ -630,6 +753,9 @@ export const destroy = () => {
     if (fmWindowZhq) fmWindowZhq.destroy();
     if (fmWindow) fmWindow.destroy();
     if (fmThreeTl) fmThreeTl.destroy();
+    if (fmHsw3) fmHsw3.destroy();
+    if (fmYjXr) fmYjXr.destroy();
+    if (fmYj) fmYj.destroy();
     fm1 = null;
     fm2 = null;
     fm3 = null;
@@ -639,6 +765,9 @@ export const destroy = () => {
     fmWindowZhq = null;
     fmThreeTl = null;
     fmTwoSs = null;
+    fmHsw3 = null;
+    fmYjXr = null;
+    fmYj = null;
     group = null;
     model.mixers = [];
     model.destroy();

src/views/vent/monitorManager/gateMonitor/gate.threejs.two.yj.ts

@@ -8,7 +8,7 @@ import { useAppStore } from '/@/store/modules/app';
 // const gui = new dat.GUI();
 // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
 
-class FmTwoYj {
+class FmYjXr {
   modelName = 'FmTwoYj';
   model; //
   group;
@@ -485,4 +485,4 @@ class FmTwoYj {
     }
   }
 }
-export default FmTwoYj;
+export default FmYjXr;

src/views/vent/monitorManager/gateMonitor/index.vue

@@ -514,6 +514,15 @@
         case 'fm_fc_zhq':
           type = 'fmWindowZhq';
           break;
+        case 'fmHsw3':
+          type = 'fmHsw3';
+          break;
+        case 'fmYjXr':
+          type = 'fmYjXr';
+          break;
+        case 'fmYj':
+          type = 'fmYj';
+          break;
       }
     } else {
       type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';