mky-vent-base/src/views/vent/gas/gasPumpMonitor/threejs/gasPump.threejs.under.ts

import * as THREE from 'three';
import { CSS3DObject } 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 gasPumpUnder {
  model;
  modelName = 'gasPumpUnder';
  group: THREE.Object3D | null = null;

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

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

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

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

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

  addCssText = () => {
    if (!this.group) return;
    if (!this.group.getObjectByName('text1')) {
      const element = document.getElementById('FlowSensor') as HTMLElement;
      if (element) {
        const parentElement = document.getElementById('gas3DCSS') as HTMLElement;
        parentElement.appendChild(element);
        const fanLocalCSS3D = new CSS3DObject(element);
        fanLocalCSS3D.name = 'text1';
        fanLocalCSS3D.scale.set(0.007, 0.007, 0.007);
        fanLocalCSS3D.position.set(0, 1.6, 0);
        this.group.add(fanLocalCSS3D);
      }
    }
  };

  clearCssText = () => {
    const fanLocalCSS3D = this.group?.getObjectByName('text1') as THREE.Object3D;
    this.group?.remove(fanLocalCSS3D);
  };

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

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