mky-vent-base/src/views/vent/monitorManager/balancePressMonitor/balancePress.threejs.tun.ts

import * as THREE from 'three';
import { setModalCenter, getTextCanvas, renderVideo } from '/@/utils/threejs/util';
import Smoke from '/@/views/vent/comment/threejs/Smoke';

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

class balancePressTun {
  model;
  modelName = 'balancePressTun';
  group: THREE.Object3D | null = null;
  topSmoke: Smoke | null = null;
  downSmoke: Smoke | null = null;
  outSmoke: Smoke | null = null;

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

  addLight() {
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(34, 7, -61);
    this.group?.add(directionalLight);
    directionalLight.target = this.group as THREE.Object3D;

    // gui.add(directionalLight.position, 'x', -200, 200);
    // gui.add(directionalLight.position, 'y', -200, 200);
    // gui.add(directionalLight.position, 'z', -200, 200);

    const pointLight5 = new THREE.PointLight(0xffffff, 0.8, 120);
    pointLight5.position.set(75, -44, 75);
    pointLight5.shadow.bias = 0.05;
    this.group?.add(pointLight5);

    const pointLight7 = new THREE.PointLight(0xffffff, 1, 1000);
    pointLight7.position.set(-7, 100, 8.5);
    pointLight7.shadow.bias = 0.05;
    this.group?.add(pointLight7);

    // gui.add(directionalLight.position, 'x', -100, 100);
    // gui.add(directionalLight.position, 'y', -100, 100);
    // gui.add(directionalLight.position, 'z', -100, 100);
    // gui.add(pointLight5.position, 'x', -500, 500);
    // gui.add(pointLight5.position, 'y', -500, 500);
    // gui.add(pointLight5.position, 'z', -500, 500);
  }

  /* 添加监控数据 */
  addText(selectData) {
    if (!this.group) {
      return;
    }
    const textArr = [
      {
        text: `煤矿巷道远程局部风机系统`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 50,
        y: 105,
      },
      {
        text: `进风量(m³/min):`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 0,
        y: 160,
      },
      {
        text: `${selectData.frontRearDP}`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 290,
        y: 160,
      },
      {
        text: `供风量(m³/min): `,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 0,
        y: 217,
      },
      {
        text: ` ${selectData.sourcePressure}`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 280,
        y: 217,
      },
      {
        text: `故障诊断:`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 0,
        y: 275,
      },
      {
        text: `${selectData.warnLevel_str ? selectData.warnLevel_str : '-'}`,
        font: 'normal 30px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 280,
        y: 275,
      },
      {
        text: `煤炭科学技术研究院有限公司研制`,
        font: 'normal 28px Arial',
        color: '#009900',
        strokeStyle: '#002200',
        x: 20,
        y: 325,
      },
    ];
    getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
      const textMaterial = new THREE.MeshBasicMaterial({
        // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
        map: textMap, // 设置纹理贴图
        transparent: true,
        side: THREE.FrontSide, // 这里是双面渲染的意思
      });
      textMaterial.blending = THREE.CustomBlending;
      const monitorPlane = this.group?.getObjectByName('monitorText') as THREE.Mesh;
      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.0135, 0.0135, 0.0135);
        planeMesh.position.set(57.66, 0.81, 18.19);
        this.group?.add(planeMesh);
      }
    });
  }

  mountedThree() {
    return new Promise((resolve) => {
      this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
        this.group = gltf[0];
        if (this.group) {
          this.group?.scale.set(0.1, 0.1, 0.1);
          setModalCenter(this.group);
          resolve(null);
          this.addLight();
        }
      });
    });
  }

  destroy() {
    this.model.clearGroup(this.group);
    this.model = null;
    this.group = null;
  }
}
export default balancePressTun;