mky-vent-base/src/views/vent/monitorManager/windrectMonitor/zhedie.threejs.ts

import * as THREE from 'three';

import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
import gsap from 'gsap';
import { log } from 'console';

class zdWindRect {
  model;
  modelName = 'zdcf';
  group: THREE.Group | null = null;
  mixers: THREE.AnimationMixer[] = [];
  animations: THREE.AnimationClip[] = [];
  animationAction = null as unknown as THREE.AnimationAction;
  animationTimer;
  isLRAnimation = true;
  direction = 1;
  player1;
  playerStartClickTime1 = new Date().getTime();

  constructor(model, playerVal1) {
    this.model = model;
    this.player1 = playerVal1;
  }

  addLight() {
    const pointLight2 = new THREE.PointLight(0xffeeee, 1, 0);
    pointLight2.position.set(317, 41, -21);
    pointLight2.shadow.bias = 0.05;
    this.model.add(pointLight2);
    //
    const pointLight3 = new THREE.PointLight(0xffffff, 1, 138);
    pointLight3.position.set(-202, 50, 27.8);
    pointLight3.shadow.bias = 0.05;
    this.model.add(pointLight3);
    //
    const pointLight4 = new THREE.PointLight(0xffeeee, 1, 162);
    pointLight4.position.set(83, 62, -14);
    pointLight4.shadow.bias = 0.05;
    this.model.add(pointLight4);
    //
    const pointLight5 = new THREE.PointLight(0xffffff, 0.8, 176);
    pointLight5.position.set(-123, 61.6, -18);
    pointLight5.shadow.bias = 0.05;
    this.model.add(pointLight5);
    //
    const pointLight6 = new THREE.PointLight(0xffffff, 1.5, 64);
    pointLight6.position.set(-76, 48, 18);
    pointLight6.shadow.bias = 0.05;
    this.model.add(pointLight6);

    const pointLight7 = new THREE.PointLight(0xffffff, 1, 302);
    pointLight7.position.set(-220, -177, -3.5);
    pointLight7.shadow.bias = -0.05;
    this.model.add(pointLight7);

    const spotLight = new THREE.SpotLight();
    spotLight.angle = Math.PI / 16;
    spotLight.penumbra = 0;
    spotLight.castShadow = true;
    spotLight.distance = 0;
    spotLight.position.set(-470, -500, 500);
    this.model.add(spotLight);

    spotLight.shadow.camera.near = 0.5; // default
    spotLight.shadow.camera.far = 1000; // default
    spotLight.shadow.focus = 1;
    spotLight.shadow.bias = -0.000002;

    this.model.scene.add(this.model);
  }

  // 设置模型位置
  setModalPosition() {
    this.group?.scale.set(22, 22, 22);
    this.group?.position.set(-35, 25, 15);
  }

  addFmText(selectData) {
    if (!this.group) {
      return;
    }
    const textArr = [
      {
        text: `煤矿巷道远程风窗系统`,
        font: 'normal 2.2rem Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 90,
        y: 95,
      },
      {
        text: `过风量(m3/min):`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 5,
        y: 150,
      },
      {
        text: `${
          selectData.frontRearDifference && selectData.rearPresentValue
            ? Math.min(selectData.frontRearDifference, selectData.rearPresentValue)
            : selectData.frontRearDifference || selectData.rearPresentValue || '-'
        }`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 235,
        y: 150,
      },
      {
        text: `过风面积(m2): `,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 5,
        y: 205,
      },
      {
        text: `${
          selectData.forntArea && selectData.rearArea
            ? Math.min(selectData.forntArea, selectData.rearArea)
            : selectData.forntArea || selectData.rearArea || '-'
        }`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 200,
        y: 205,
      },
      {
        text: `风窗压差(Pa):`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 5,
        y: 256,
      },
      {
        text: `${selectData.dataDh}`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 200,
        y: 256,
      },
      {
        text: `调节精度:`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 320,
        y: 150,
      },
      {
        text: `1% FS`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 460,
        y: 150,
      },
      {
        text: `调节范围:`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 320,
        y: 205,
      },
      {
        text: `${selectData.maxarea}`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 460,
        y: 205,
      },
      {
        text: `煤炭科学技术研究院有限公司研制`,
        font: 'normal 28px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 60,
        y: 302,
      },
    ];

    getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
      const textMaterial = new THREE.MeshBasicMaterial({
        map: textMap, // 设置纹理贴图
        transparent: true,
        side: THREE.DoubleSide, // 这里是双面渲染的意思
      });
      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(-3.6, -0.123, -0.41);
        this.group?.add(planeMesh);
      }
    });
  }

  /* 风门动画 */
  render() {
    if (!this.model) {
      return;
    }
    if (this.isLRAnimation && this.group) {
      // 左右摇摆动画
      if (Math.abs(this.group.rotation.y) >= 0.2) {
        this.direction = -this.direction;
        this.group.rotation.y += 0.00002 * 30 * this.direction;
      } else {
        this.group.rotation.y += 0.00002 * 30 * this.direction;
      }
    }

    if (this.mixers[0]) this.mixers[0]?.update(1 / 25);
  }

  /* 提取风门序列帧，初始化前后门动画 */
  initAnimation() {
    this.animationAction = this.mixers[0].clipAction(this.animations[0]);
    this.animationAction.clampWhenFinished = true;
    this.animationAction.loop = THREE.LoopOnce;
    debugger;
    console.log('模型动画-------------->', this.animationAction);
  }

  /* 点击风窗，风窗全屏 */
  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
    this.isLRAnimation = false;
    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) {
          // 双击，视频放大
          if (this.player1) {
            this.player1.requestFullscreen();
          }
        }
        this.playerStartClickTime1 = new Date().getTime();
        return true;
      }
      return false;
    });
  }

  mouseUpModel() {
    // 10s后开始摆动
    if (!this.animationTimer && !this.isLRAnimation) {
      this.animationTimer = setTimeout(() => {
        this.isLRAnimation = true;
      }, 10000);
    }
  }

  resetModel() {
    clearTimeout(this.animationTimer);
    this.isLRAnimation = false;
  }

  // 播放动画
  play(flag, isDirect = false) {
    if (flag === 'up' && this.animationAction.time <= 0) {
      this.animationAction?.reset();
      // @ts-ignore
      this.animationAction.time = 0;
      this.animations[0].duration = 200 / 25;
      this.mixers[0].timeScale = 0.15;
      this.animationAction?.play();
    } else if (flag === 'center' && this.animationAction.time <= 8) {
      this.animationAction?.reset();
      // @ts-ignore
      this.animationAction.time = 200 / 25; // 8
      this.animations[0].duration = 350 / 25;
      this.mixers[0].timeScale = 0.15;
      this.animationAction?.play();
    } else if (flag === 'down' && this.animationAction.time <= 14) {
      this.animationAction?.reset();
      // @ts-ignore
      this.animationAction.time = 350 / 25; // 14
      this.animations[0].duration = 530 / 25;
      this.mixers[0].timeScale = 0.12;
      this.animationAction?.play();
    } 
    // else if ((flag === 'reset' && this.animationAction.time != 0 && this.animationAction.time <= 18) || (flag === 'up' && this.animationAction.time == 18)) {
    //   debugger;
    //   this.animationAction?.reset();
    //   // @ts-ignore
    //   this.animationAction.time = 450 / 25; //
    //   this.animations[0].duration = 530 / 25;
    //   this.mixers[0].timeScale = 0.15;
    //   this.animationAction?.play();
    // }
  }

  mountedThree() {
    return new Promise((resolve) => {
      this.model.setModel(this.modelName).then((gltf) => {
        this.group = gltf.scene;
        if (gltf.animations && gltf.animations.length > 0) {
          console.log('[ 解析后的模型动画 ] >', gltf.animations);
          gltf.animations.forEach((animation) => {
            const mixer = new THREE.AnimationMixer(gltf.scene);
            this.mixers.push(mixer);
            this.animations.push(animation);
          });
        }
        this.setModalPosition();
        this.initAnimation();

        setTimeout(async () => {
          const videoPlayer1 = document.getElementById('cf-player1')?.getElementsByClassName('vjs-tech')[0];
          if (videoPlayer1) {
            const mesh = renderVideo(this.group, videoPlayer1, 'player1');
            mesh?.scale.set(0.0385, 0.028, 0.022);
            mesh?.position.set(4.792, -0.16, -0.4);
            this.group?.add(mesh);
          }
          resolve(null);
        }, 0);
      });
    });
  }

  destroy() {
    if (this.mixers[0] && this.group) {
      this.mixers[0].uncacheClip(this.animationAction.getClip());
      this.mixers[0].uncacheAction(this.animationAction.getClip(), this.group);
      this.mixers[0].uncacheRoot(this.group as THREE.Group);
      this.model.clearGroup(this.group);
    }
    this.model = null;
    this.group = null;
  }
}

export default zdWindRect;