zhny_ui/ems-ui-cloud/src/views/largeScreen/three/GltfModelManager.js

import * as THREE from 'three'; //导入整个 three.js核心库
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'

// 模型管理器
class GltfModelManager {
  constructor() {
    this.loader = new GLTFLoader();
    this.models = new Map();
    this.loadingManager = new THREE.LoadingManager();
    this.setupLoadingManager();
  }

  setupLoadingManager() {
    this.loadingManager.onProgress = (url, itemsLoaded, itemsTotal) => {
      console.log(`Loading: ${itemsLoaded}/${itemsTotal}`);
    };

    this.loadingManager.onError = (url) => {
      console.error('Error loading:', url);
    };
  }

  loadModel(name, url) {
    return new Promise((resolve, reject) => {
      this.loader.load(
        url,
        (gltf) => {
          this.models.set(name, gltf);
          resolve(gltf);
        },
        undefined,
        (error) => reject(error)
      );
    });
  }

  getModel(name) {
    return this.models.get(name);
  }

  dispose() {
    this.models.forEach(model => {
      model.scene.traverse((object) => {
        if (object.isMesh) {
          object.geometry.dispose();
          object.material.dispose();
        }
      });
    });
    this.models.clear();
  }
}

export default GltfModelManager;