mky-vent-5/src/views/vent/monitorManager/chamberMonitor/chamber.threejs.base.ts

import * as THREE from 'three';
import { setModalCenter } from '/@/utils/threejs/util';
// 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(-0.8, 23, 3.9);
    this.group?.add(directionalLight);
    directionalLight.target = this.group as THREE.Object3D;

    // gui.add(directionalLight.position, 'x', -10, 20).onChange(function (value) {
    //   directionalLight.position.x = Number(value);
    //   _this.render();
    // });
    // gui.add(directionalLight.position, 'y', -50, 50).onChange(function (value) {
    //   directionalLight.position.y = Number(value);
    //   _this.render();
    // });
    // gui.add(directionalLight.position, 'z', -20, 20).onChange(function (value) {
    //   directionalLight.position.z = Number(value);
    //   _this.render();
    // });
    // const pointLight5 = new THREE.PointLight(0xffffff, 0.8, 120);
    // pointLight5.position.set(-54, 30, 23.8);
    // pointLight5.shadow.bias = 0.05;
    // this.group.add(pointLight5);

    // const pointLight7 = new THREE.PointLight(0xffffff, 1, 1000);
    // pointLight7.position.set(45, 51, -4.1);
    // pointLight7.shadow.bias = 0.05;
    // this.model.scene.add(pointLight7);

    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(-7.19, 199, -68.1);
    // this.group.add(spotLight);

    // gui.add(directionalLight.position, 'x', -10, 20).onChange(function (value) {
    //   directionalLight.position.x = Number(value);
    //   _this.render();
    // });
    // gui.add(directionalLight.position, 'y', -50, 50).onChange(function (value) {
    //   directionalLight.position.y = Number(value);
    //   _this.render();
    // });
    // gui.add(directionalLight.position, 'z', -20, 20).onChange(function (value) {
    //   directionalLight.position.z = Number(value);
    //   _this.render();
    // });

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