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

import * as THREE from 'three';

import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
import gsap from 'gsap';
// import * as dat from 'dat.gui';
// const gui = new dat.GUI();
// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';

class fixedWindRect {
  model;
  modelName = 'fixedCf';
  group: THREE.Object3D = new THREE.Object3D();
  animationTimer;
  isLRAnimation = true;
  direction = 1;
  lineLight;
  constructor(model) {
    this.model = model;
    this.group.name = this.modelName;
  }

  addLight() {
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(64, 215, 500);
    directionalLight.target = this.group;
    this.group.add(directionalLight);

    const pointLight2 = new THREE.PointLight(0xffffff, 2, 300);
    pointLight2.position.set(-113, 29, 10);
    // light2.castShadow = true
    pointLight2.shadow.bias = -0.05;
    this.group.add(pointLight2);

    // gui.add(pointLight2.position, 'x', -1000, 1000);
    // gui.add(pointLight2.position, 'y', -1000, 1000);
    // gui.add(pointLight2.position, 'z', -1000, 1000);

    // gui.add(spotLight.position, 'x', -500, 500);
    // gui.add(spotLight.position, 'y', -500, 500);
    // gui.add(spotLight.position, 'z', -500, 500);
    // gui.add(spotLight, 'distance', 0, 1000);
  }

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

  addMonitorText(selectData) {
    if (!this.group) {
      return;
    }
    const screenDownText = VENT_PARAM['modalText']
      ? VENT_PARAM['modalText']
      : History_Type['type'] == 'remote'
      ? `国能神东煤炭集团监制`
      : '煤炭科学技术研究院有限公司研制';

    const screenDownTextX = 110 - (screenDownText.length - 10) * 6;
    const textArr = [
      {
        text: `测风实时数据`,
        font: 'normal 32px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 160,
        y: 75,
      },
      {
        text: `风量(m³/min):`,
        font: 'normal 29px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 10,
        y: 140,
      },
      {
        text: `${selectData.m3 ? selectData.m3 : '-'}`,
        font: 'normal 29px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 361,
        y: 140,
      },
      {
        text: `风速(m/s): `,
        font: 'normal 29px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 10,
        y: 202,
      },
      {
        text: `${selectData.va ? selectData.va : '-'}`,
        font: 'normal 29px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 360,
        y: 202,
      },
      {
        text: `断面积(㎡):`,
        font: 'normal 29px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 10,
        y: 272,
      },
      {
        text: `${selectData.fsectarea ? selectData.fsectarea : '-'}`,
        font: 'normal 29px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 360,
        y: 272,
      },
      {
        text: screenDownText,
        font: 'normal 28px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: screenDownTextX,
        y: 328,
      },
    ];

    getTextCanvas(560, 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(5.6, 3.46); // 平面3维几何体PlaneGeometry
        const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
        planeMesh.name = 'monitorText';
        planeMesh.scale.set(0.23, 0.23, 0.23);
        planeMesh.position.set(-2.38, 0.068, -0.4);
        this.group?.add(planeMesh);
      }
    });
  }

  initAnimation() {
    const line = this.group?.getObjectByName('line_');

    if (line) {
      line.material.side = THREE.DoubleSide;
      line.material.opacity = 1;
      line.material.depthWrite = true;

      this.lineLight = gsap.to(line.material, {
        opacity: 0,
        duration: 0.3,
        ease: 'easeQutQuad',
        repeat: -1,
        yoyo: true,
        paused: true,
      });
      this.lineLight.play();
    }
  }

  async initCamera(dom1?) {
    const videoPlayer1 = dom1;
    let monitorPlane: THREE.Mesh | null = null;
    const textArr = [
      {
        text: `无信号输入`,
        font: 'normal 40px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 170,
        y: 40,
      },
    ];
    const canvas = await getTextCanvas(320, 180, textArr, null);
    if (canvas) {
      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) {
      if (monitorPlane && !this.group.getObjectByName('noPlayer1')) {
        const planeMesh = monitorPlane.clone();
        planeMesh.name = 'noPlayer1';
        planeMesh.scale.set(0.011, 0.0053, 0.012);
        planeMesh.position.set(-4.3, 0.13, -0.23);
        this.group?.add(planeMesh.clone());
      }
    } else if (videoPlayer1) {
      try {
        const mesh = renderVideo(this.group, videoPlayer1, 'player1');
        if (mesh) {
          mesh?.scale.set(0.042, 0.036, 0.022);
          mesh?.position.set(2.552, 0.018, -0.4);
          this.group.add(mesh);
        }
      } catch (error) {
        console.log('视频信号异常');
      }
    }
  }
  /* 风门动画 */
  render() {
    if (!this.model) {
      return;
    }
  }

  /* 点击风窗，风窗全屏 */
  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
    if (this.animationTimer) {
      clearTimeout(this.animationTimer);
      this.animationTimer = null;
    }
    // 判断是否点击到视频
    intersects.find((intersect) => {
      intersect;
      return false;
    });
  }

  mouseUpModel() {}

  resetModel() {
    clearTimeout(this.animationTimer);
  }

  mountedThree(playerDom) {
    return new Promise((resolve) => {
      this.model
        .setGLTFModel([this.modelName], this.group)
        .then(() => {
          this.setModalPosition();
          this.addLight();
          this.initAnimation();
          // this.initCamera(playerDom);
          resolve(null);
        })
        .catch(() => {
          resolve(null);
        });
    });
  }

  destroy() {
    if (this.group) {
      this.model.clearGroup(this.group);
    }
    this.model = null;
    this.group = null;
  }
}

export default fixedWindRect;