* 更改能源管理大屏的使用的模型

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

@@ -0,0 +1,54 @@
+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;

ems-ui-cloud/src/views/largeScreen/three/renderModel.js

@@ -9,6 +9,7 @@ import {OutlinePass} from "three/examples/jsm/postprocessing/OutlinePass.js";
 import {UnrealBloomPass} from "three/examples/jsm/postprocessing/UnrealBloomPass.js";
 import * as TWEEN from '@tweenjs/tween.js';
 import {getBottomMaterial} from './material.js';
+import GltfModelManager from "@/views/largeScreen/three/GltfModelManager";
 
 // 定义一个 class类
 class renderModel {
@@ -361,8 +362,7 @@ class renderModel {
   }
 
   setGlbModel() {
-    var fbxLoader = new GLTFLoader();
-    fbxLoader.load('/models/model-road-pv.glb', object => {
+    new GltfModelManager().loadModel('model-road-pv', '/models/model-road-pv.glb').then(object => {
       this.calcMeshCenter(object.scene);
       this.model = object.scene;
       const selectedObjects = [];