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

import * as THREE from 'three';
import Smoke from '/@/views/vent/comment/threejs/Smoke';
import Smoke1 from '/@/views/vent/comment/threejs/Smoke1';
// 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;
  smoke: Smoke | undefined;
  smoke1: Smoke1 | undefined;

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

  async initSmoke() {
    // 喷雾
    const moveCurve = [
      {
        path0: new THREE.Vector3(0, 0, 0),
        path1: new THREE.Vector3(0, -8, 0),
        isSpread: true,
        spreadDirection: 1, // 1是由小变大，-1是由大变小
        spreadRang: 1,
      },
    ];
    this.smoke = new Smoke('/model/img/texture-smoke.png', '#ffffffaa', 10, 0.9, 0.4, 30);
    this.smoke.setPath(moveCurve);
    await this.smoke.setPoints();
    this.group?.add(this.smoke.points);
    this.smoke.points.scale.set(55, 100, 55);
    this.smoke.points.position.set(272.432, 547.837, 1174.679);

    // // 喷粉
    this.smoke1 = new Smoke1('/model/img/texture-smoke.png', '#ffffff', 0.1);
    await this.smoke1.setPoints();
    this.group?.add(this.smoke1.points);
  }

  changeSmoke() {
    // this.smoke?.startSmoke(0);
    this.smoke1?.startSmoke();
  }

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

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