[Mod 0000] 思山岭防火门盖板、卷帘门动画分离

src/views/vent/monitorManager/fireDoorMonitor/fireDoor.threejs.ssl.ts

@@ -5,8 +5,8 @@ import { useAppStore } from '/@/store/modules/app';
 // const gui = new dat.GUI();
 // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
 
-class FireDoor {
-  modelName = 'fireDoor';
+class FireDoorSsl {
+  modelName = 'fireDoorSsl';
   model; //
   group;
   isLRAnimation = true; // 是否开启左右摇摆动画
@@ -25,7 +25,10 @@ class FireDoor {
   damperClosedMesh;
 
   clipActionArr: Record<string, THREE.AnimationAction | undefined> = {
-    door: undefined,
+    /** 卷帘门动画 */
+    juanlianmen: undefined,
+    /** 盖板动画 */
+    gaiban: undefined,
   };
 
   constructor(model) {
@@ -78,41 +81,76 @@ class FireDoor {
 
   /* 提取风门序列帧，初始化前后门动画 */
   initAnimation() {
-    const fireGroup = this.group.children[0]?.getObjectByName('Fire-door');
-    if (fireGroup) {
-      const tracks = fireGroup.animations[0].tracks;
-
-      this.mixers = new THREE.AnimationMixer(fireGroup);
-
-      const door = new THREE.AnimationClip('door', 100, tracks);
-      const frontClipAction = this.mixers.clipAction(door, fireGroup);
-      frontClipAction.clampWhenFinished = true;
-      frontClipAction.loop = THREE.LoopOnce;
-      this.clipActionArr.door = frontClipAction;
+    const group = this.group.children[0];
+    /** 卷帘门的元素名称，pCude34-pCude73 */
+    const eleNames = new Array(40).fill(0).map((_, i) => `pCube${i + 34}`);
+    if (group) {
+      const tracksA: THREE.KeyframeTrack[] = [];
+      const tracksB: THREE.KeyframeTrack[] = [];
+
+      group.animations[0].tracks.forEach((track) => {
+        if (eleNames.some((e) => track.name.includes(e))) {
+          tracksA.push(track);
+        } else {
+          tracksB.push(track);
+        }
+      });
+      this.mixers = new THREE.AnimationMixer(group);
+
+      const juanlianmen = new THREE.AnimationClip('juanlianmen', 10, tracksA);
+      const clipA = this.mixers.clipAction(juanlianmen, group);
+      clipA.clampWhenFinished = true;
+      clipA.loop = THREE.LoopOnce;
+      this.clipActionArr.juanlianmen = clipA;
+
+      const gaiban = new THREE.AnimationClip('gaiban', 10, tracksB);
+      const clipB = this.mixers.clipAction(gaiban, group);
+      clipB.clampWhenFinished = true;
+      clipB.loop = THREE.LoopOnce;
+      this.clipActionArr.gaiban = clipB;
     }
   }
   resetAnimate() {
-    if (this.clipActionArr.door) {
-      this.clipActionArr.door.reset();
-      this.clipActionArr.door.time = 0.1;
-      this.clipActionArr.door.stop();
+    if (this.clipActionArr.juanlianmen) {
+      this.clipActionArr.juanlianmen.reset();
+      this.clipActionArr.juanlianmen.time = 0.1;
+      this.clipActionArr.juanlianmen.stop();
+      this.fmClock.stop();
+    }
+    if (this.clipActionArr.gaiban) {
+      this.clipActionArr.gaiban.reset();
+      this.clipActionArr.gaiban.time = 0.1;
+      this.clipActionArr.gaiban.stop();
       this.fmClock.stop();
     }
   }
 
   // 播放动画
+  /**
+   * 播放门开关动画的处理函数
+   * @param {number} handlerState - 处理状态，1表示开门，2表示关门
+   * @param {number} [timeScale=0.01] - 动画时间缩放因子，控制动画播放速度
+   */
   play(handlerState, timeScale = 0.01) {
+    console.log('debug rrr', handlerState);
     let handler = () => {};
     switch (handlerState) {
       case 1: // 打开门
         handler = () => {
-          if (!this.clipActionArr.door) return;
-          this.clipActionArr.door.paused = true;
-          this.clipActionArr.door.reset();
-          this.clipActionArr.door.time = 1.7;
-          this.clipActionArr.door.timeScale = -timeScale;
-          // this.clipActionArr.door.clampWhenFinished = true;
-          this.clipActionArr.door.play();
+          if (!this.clipActionArr.juanlianmen) return;
+          this.clipActionArr.juanlianmen.paused = true;
+          this.clipActionArr.juanlianmen.reset();
+          this.clipActionArr.juanlianmen.time = 0.1;
+          this.clipActionArr.juanlianmen.timeScale = timeScale;
+          // this.clipActionArr.juanlianmen.clampWhenFinished = true;
+          this.clipActionArr.juanlianmen.play();
+          if (!this.clipActionArr.gaiban) return;
+          this.clipActionArr.gaiban.paused = true;
+          this.clipActionArr.gaiban.reset();
+          this.clipActionArr.gaiban.time = 0.1;
+          this.clipActionArr.gaiban.timeScale = timeScale;
+          // this.clipActionArr.gaiban.clampWhenFinished = true;
+          this.clipActionArr.gaiban.play();
           this.fmClock.start();
 
           // 显示打开前门文字
@@ -121,13 +159,20 @@ class FireDoor {
         break;
       case 2: // 关闭门
         handler = () => {
-          if (!this.clipActionArr.door) return;
-          this.clipActionArr.door.paused = true;
-          this.clipActionArr.door.reset(); //
-          this.clipActionArr.door.time = 0;
-          this.clipActionArr.door.timeScale = timeScale;
-          // this.clipActionArr.door.clampWhenFinished = true;
-          this.clipActionArr.door.play();
+          if (!this.clipActionArr.juanlianmen) return;
+          this.clipActionArr.juanlianmen.paused = true;
+          this.clipActionArr.juanlianmen.reset(); //
+          this.clipActionArr.juanlianmen.time = 9;
+          this.clipActionArr.juanlianmen.timeScale = -timeScale;
+          // this.clipActionArr.juanlianmen.clampWhenFinished = true;
+          this.clipActionArr.juanlianmen.play();
+          if (!this.clipActionArr.gaiban) return;
+          this.clipActionArr.gaiban.paused = true;
+          this.clipActionArr.gaiban.reset(); //
+          this.clipActionArr.gaiban.time = 9;
+          this.clipActionArr.gaiban.timeScale = -timeScale;
+          // this.clipActionArr.gaiban.clampWhenFinished = true;
+          this.clipActionArr.gaiban.play();
           this.fmClock.start();
 
           if (this.damperOpenMesh) this.damperOpenMesh.visible = false;
@@ -164,19 +209,22 @@ class FireDoor {
 
   destroy() {
     if (!this.model) return;
-    if (this.mixers && this.clipActionArr.door) {
-      this.mixers.uncacheClip(this.clipActionArr.door.getClip());
-      this.mixers.uncacheAction(this.clipActionArr.door.getClip(), this.group);
+    if (this.mixers && this.clipActionArr.juanlianmen && this.clipActionArr.gaiban) {
+      this.mixers.uncacheClip(this.clipActionArr.juanlianmen.getClip());
+      this.mixers.uncacheAction(this.clipActionArr.juanlianmen.getClip(), this.group);
+      this.mixers.uncacheClip(this.clipActionArr.gaiban.getClip());
+      this.mixers.uncacheAction(this.clipActionArr.gaiban.getClip(), this.group);
       this.mixers.uncacheRoot(this.group);
 
       if (this.model.animations[0]) this.model.animations[0].tracks = [];
     }
     this.model.clearGroup(this.group);
-    this.clipActionArr.door = undefined;
+    this.clipActionArr.juanlianmen = undefined;
+    this.clipActionArr.gaiban = undefined;
 
     this.mixers = undefined;
 
     // document.getElementById('damper3D').parentElement.remove(document.getElementById('damper3D'))
   }
 }
-export default FireDoor;
+export default FireDoorSsl;