mky-vent-5/src/views/vent/monitorManager/groutMonitor/grout.threejs.base.ts

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

class ChamberBase {
  model;
  modelName = 'grout';
  group: THREE.Object3D | null = null;

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

  addLight() {
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
    directionalLight.position.set(-0.88, 10, 42.4);
    this.group?.add(directionalLight);
    directionalLight.target = this.group as THREE.Object3D;

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

    const spotLight = new THREE.SpotLight();
    spotLight.angle = Math.PI / 2;
    spotLight.penumbra = 0;
    spotLight.castShadow = true;
    spotLight.intensity = 1;

    spotLight.shadow.camera.near = 0.5; // default
    spotLight.shadow.focus = 1.2;
    spotLight.shadow.bias = -0.000002;

    spotLight.position.set(89.8, 144, 314);
    this.group?.add(spotLight);

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

  addChamberText(selectData) {
    //
  }

  mountedThree() {
    return new Promise((resolve) => {
      this.model.setModel([this.modelName]).then((gltf) => {
        this.group = gltf[0];
        if (this.group) {
          this.group?.scale.set(12.5, 12.5, 12.5);
          this.group.position.y = 4;
          resolve(null);
          this.addLight();
        }
      });
    });
  }

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