gasInjection-project/src/views/vent/monitorManager/compressor/nitrogen.dixia.threejs.ts

import * as THREE from 'three';

import { getTextCanvas } from '/@/utils/threejs/util';
import { CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
// import * as dat from 'dat.gui';
// const gui = new dat.GUI();
// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';

class NitrogenUnderground {
  model;
  modelName = 'nitrogenUnderground';
  group: THREE.Object3D = new THREE.Object3D();
  animationTimer;
  isLRAnimation = true;
  direction = 1;
  nitrogenNum = 0;

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

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

  addCssText = () => {
    if (this.nitrogenNum > 0) {
      for (let i = 0; i < 2; i++) {
        if (this.group && !this.group.getObjectByName('monitorNitrogenText' + i)) {
          const element = document.getElementById('nitrogenMonitor' + (i + 1)) as HTMLElement;
          if (element) {
            const nitrogenMonitorCSS3D = new CSS3DSprite(element);
            nitrogenMonitorCSS3D.name = 'monitorNitrogenText' + i;
            nitrogenMonitorCSS3D.scale.set(0.005, 0.005, 0.005);
            if (i == 0) nitrogenMonitorCSS3D.position.set(-0.89, 0.31, 0);
            if (i == 1) nitrogenMonitorCSS3D.position.set(1.44, 0.31, 0.04);
            // if (i == 2) nitrogenMonitorCSS3D.position.set(-0.89, 0.31, 0.08);
            // if (i == 3) nitrogenMonitorCSS3D.position.set(-0.89, 0.31, 0.12);
            this.group.add(nitrogenMonitorCSS3D);
          } else {
          }
        }
      }
    }
    if (this.group && !this.group.getObjectByName('downWindMonitor')) {
      const element = document.getElementById('downWindMonitor') as HTMLElement;
      if (element) {
        const downWindMonitorCSS3D = new CSS3DSprite(element);
        downWindMonitorCSS3D.name = 'downWindMonitor';
        downWindMonitorCSS3D.scale.set(0.005, 0.005, 0.005);
        downWindMonitorCSS3D.position.set(-2.95, 0.57, 0);
        this.group.add(downWindMonitorCSS3D);
      }
    }
  };

  clearCssText = () => {
    if (this.nitrogenNum > 0) {
      for (let i = 0; i < 2; i++) {
        const mesh = this.group.getObjectByName('monitorNitrogenText' + i);
        if (this.group && mesh) {
          this.group.remove(mesh);
        }
      }
    }
  };

  mountedThree() {
    return new Promise((resolve) => {
      this.model.setGLTFModel([this.modelName]).then((gltf) => {
        this.group = gltf[0];
        this.setModalPosition();
        this.addLight();
        resolve(null);
      });
    });
  }

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

export default NitrogenUnderground;