gasInjection-project/src/views/vent/monitorManager/chamberMonitor/chamber.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 = 'chamber';
  group: THREE.Object3D | null = null;

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

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

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

    // gui.add(spotLight.position, 'x', -600, 600).onChange(function (value) {
    //   spotLight.position.x = Number(value);
    //   _this.render();
    // });
    // gui.add(spotLight.position, 'y', -600, 800).onChange(function (value) {
    //   spotLight.position.y = Number(value);
    //   _this.render();
    // });
    // gui.add(spotLight.position, 'z', -500, 1000).onChange(function (value) {
    //   spotLight.position.z = Number(value);
    //   _this.render();
    // });
  }

  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 ChamberBase;