gas-injection/src/views/vent/monitorManager/fireDoorMonitor/fireDoor.threejs.fire.redGate.ts

import * as THREE from 'three';

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

class FireDoor {
  modelName = 'fireDoor-redGate';
  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;
  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(1);
    }
  }

  /* 点击风门 */
  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('fireDoor-redGate');
    if (fireGroup) {
      // const doorGroup = new THREE.Object3D();
      // doorGroup.add(fireGroup.children[0].getObjectByName('men_1'));
      // doorGroup.add(fireGroup.children[0].getObjectByName('men2'));
      const tracks = fireGroup.animations[0].tracks;

      this.mixers = new THREE.AnimationMixer(fireGroup);

      const door = new THREE.AnimationClip('door', 2, tracks);
      const frontClipAction = this.mixers.clipAction(door, fireGroup.children[0]);
      frontClipAction.clampWhenFinished = true;
      frontClipAction.loop = THREE.LoopOnce;
      this.clipActionArr.door = frontClipAction;
    }
  }

  // 播放动画
  play(handlerState, timeScale = 0.1) {
    let handler = () => {};
    if (this.clipActionArr.door) {
      switch (handlerState) {
        case 1: // 打开门
          handler = () => {
            this.clipActionArr.door.paused = true;
            this.clipActionArr.door.reset();
            this.clipActionArr.door.time = 0.1;
            this.clipActionArr.door.timeScale = timeScale;
            this.clipActionArr.door.play();
            this.fmClock.start();
          };
          break;
        case 2: // 关闭门
          handler = () => {
            this.clipActionArr.door.paused = true;
            this.clipActionArr.door.reset(); //
            this.clipActionArr.door.time = 1.1;
            this.clipActionArr.door.timeScale = -timeScale;
            this.clipActionArr.door.play();
            this.fmClock.start();
          };
          break;
        default:
      }
      handler();
    }
  }

  resetAnimate() {
    this.clipActionArr.door.reset();
    this.clipActionArr.door.time = 0.1;
    this.clipActionArr.door.stop();
    this.fmClock.stop();
  }

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

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

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