mky-vent-base/src/views/vent/monitorManager/fireDoorMonitor/fireDoor.threejs.fireF.ts

import * as THREE from 'three';
import { useAppStore } from '/@/store/modules/app';

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

class FireDoorF {
  modelName = 'fireDoorF';
  model; //
  group;
  isLRAnimation = true; // 是否开启左右摇摆动画
  direction = 1; // 摇摆方向
  animationTimer: NodeJS.Timeout | null = null; // 摇摆开启定时器
  player1;
  player2;
  deviceDetailCSS3D;
  playerStartClickTime1 = new Date().getTime();
  playerStartClickTime2 = new Date().getTime();

  fmClock = new THREE.Clock();
  mixers: THREE.AnimationMixer | undefined;
  appStore = useAppStore();
  damperOpenMesh;
  damperClosedMesh;

  clipActionArr = {
    door: null as unknown as THREE.AnimationAction,
  };

  constructor(model) {
    this.model = model;
  }

  addLight() {
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
    directionalLight.position.set(344, 690, 344);
    this.group?.add(directionalLight);
    directionalLight.target = this.group as THREE.Object3D;

    const pointLight2 = new THREE.PointLight(0xffeeee, 1, 300);
    pointLight2.position.set(-4, 10, 1.8);
    pointLight2.shadow.bias = 0.05;
    this.group?.add(pointLight2);

    const pointLight3 = new THREE.PointLight(0xffeeee, 1, 200);
    pointLight3.position.set(-0.5, -0.5, 0.75);
    pointLight3.shadow.bias = 0.05;
    this.group?.add(pointLight3);
  }
  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);
  }

  /* 风门动画 */
  render() {
    if (!this.model) {
      return;
    }
    if (this.mixers && this.fmClock.running) {
      this.mixers.update(2);
    }
  }

  /* 点击风门 */
  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
    console.log('摄像头控制信息', this.model?.orbitControls, this.model?.camera);
  }

  mouseUpModel() {}

  /* 提取风门序列帧，初始化前后门动画 */
  initAnimation() {
    const fireGroup = this.group.children[0]?.getObjectByName('Fire-doorf');
    if (fireGroup) {
      const tracks = fireGroup.animations[0].tracks;
      this.mixers = new THREE.AnimationMixer(fireGroup.children[0]);

      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;
    }
  }

  // 播放动画
  play(handlerState, timeScale = 0.01) {
    let handler = () => {};
    if (this.clipActionArr.door) {
      switch (handlerState) {
        case 1: // 打开门
          handler = () => {
            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();
            this.fmClock.start();

            // 显示打开前门文字
            if (this.damperOpenMesh) this.damperOpenMesh.visible = true;
          };
          break;
        case 2: // 关闭门
          handler = () => {
            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();
            this.fmClock.start();

            if (this.damperOpenMesh) this.damperOpenMesh.visible = false;
          };
          break;
        default:
      }
      handler();
    }
  }

  mountedThree() {
    this.group = new THREE.Object3D();
    this.group.name = this.modelName;

    return new Promise((resolve) => {
      if (!this.model) {
        resolve(null);
      }
      this.model.setGLTFModel(['Fire-doorf'], this.group).then(() => {
        this.setModalPosition();
        console.log(this.group);
        // 初始化左右摇摆动画;
        this.initAnimation();
      });
    });
  }

  destroy() {
    if (this.model) {
      if (this.mixers) {
        this.mixers.uncacheClip(this.clipActionArr.door.getClip());
        this.mixers.uncacheAction(this.clipActionArr.door.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.mixers = undefined;

      // document.getElementById('damper3D').parentElement.remove(document.getElementById('damper3D'))
    }
  }
}
export default FireDoorF;