1. 提交工作面模型文件

src/hooks/core/useThree copy.ts

@@ -6,12 +6,10 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import gsap from 'gsap';
 
 import ResourceTracker from '/@/utils/threejs/ResourceTracker';
-const resourceTracker = new ResourceTracker()
-const track = resourceTracker.track.bind(resourceTracker)
-
+const resourceTracker = new ResourceTracker();
+const track = resourceTracker.track.bind(resourceTracker);
 
 class UseThree {
-
   container: HTMLCanvasElement;
   camera: THREE.PerspectiveCamera | null = null;
   scene: THREE.Scene | null = null;
@@ -22,10 +20,10 @@ class UseThree {
   animationAction: THREE.AnimationAction | null = null;
   clock: THREE.Clock = new THREE.Clock(); // 计时器
   timeoutId: NodeJS.Timeout | null = null;
-  animationId: number = 0
+  animationId: number = 0;
 
   constructor(selector) {
-    this.animationId = 0
+    this.animationId = 0;
     this.container = document.querySelector(selector);
     //初始化
     this.init();
@@ -35,7 +33,6 @@ class UseThree {
     // window.addEventListener('wheel', this.wheelRenderer.bind(this));
   }
   init() {
-
     // 初始化场景
     this.initScene();
     // 初始化环境光
@@ -63,7 +60,6 @@ class UseThree {
     this.camera.position.set(0, 0.2, 0.3);
   }
   initRenderer() {
-
     this.renderer = new THREE.WebGLRenderer({ antialias: true });
     // 设置屏幕像素比
     this.renderer.setPixelRatio(window.devicePixelRatio);
@@ -91,15 +87,15 @@ class UseThree {
   }
 
   setGLTFModel(modalName) {
-    const a = new Date().getTime() / 1000
+    const a = new Date().getTime() / 1000;
     return new Promise(async (resolve, reject) => {
       try {
-        const db =  window['CustomDB']
-        const modalArr =  await db.modal.where('modalName').equals(modalName).toArray()
-        if(modalArr.length > 0) {
-          const modalValue = modalArr[0].modalVal
+        const db = window['CustomDB'];
+        const modalArr = await db.modal.where('modalName').equals(modalName).toArray();
+        if (modalArr.length > 0) {
+          const modalValue = modalArr[0].modalVal;
           new THREE.ObjectLoader().parse(modalValue, (e) => {
-            const group = e.children[0]
+            const group = e.children[0];
 
             const cityMaterial = new THREE.MeshBasicMaterial({
               color: new THREE.Color(0x0c016f),
@@ -111,19 +107,17 @@ class UseThree {
               }
             });
             this.scene?.add(e.children[0]);
-            console.log((new Date().getTime() / 1000) - a + " s")
+            console.log(new Date().getTime() / 1000 - a + ' s');
             resolve(this.scene);
-          })
-        } 
+          });
+        }
       } catch (error) {
-        reject('加载模型出错')
+        reject('加载模型出错');
       }
-      
-    })
+    });
   }
 
   setMaterial(obj) {
-
     obj.geometry.computeBoundingBox();
     const { max, min } = obj.geometry.boundingBox;
     const distance = max.y - min.y + 2;
@@ -341,9 +335,9 @@ class UseThree {
 
   animate() {
     // this.renderer?.setAnimationLoop(this.render.bind(this));
-    if(this.animationId != -1) {
-      this.render()
-      this.animationId = requestAnimationFrame(this.animate.bind(this))
+    if (this.animationId != -1) {
+      this.render();
+      this.animationId = requestAnimationFrame(this.animate.bind(this));
     }
   }
   resizeRenderer() {
@@ -367,26 +361,26 @@ class UseThree {
     }, 500);
   }
   clearScene() {
-    this.scene?.children.forEach((obj:any) => {
-      if(obj.type === 'Group'){
-        obj.traverse(function(item:any) {
+    this.scene?.children.forEach((obj: any) => {
+      if (obj.type === 'Group') {
+        obj.traverse(function (item: any) {
           if (item.type === 'Mesh') {
             item.geometry.dispose();
             item.material.dispose();
-            !!item.clear&&item.clear();
+            !!item.clear && item.clear();
           }
-        })
-      }else if (obj.material) {
+        });
+      } else if (obj.material) {
         obj.material.dispose();
-      }else if (obj.geometry) {
+      } else if (obj.geometry) {
         obj.geometry.dispose();
       }
-      this.scene?.remove(obj)
-      !!obj.clear??obj.clear()
+      this.scene?.remove(obj);
+      !!obj.clear ?? obj.clear();
       obj = null;
-    })
-    let gl = this.renderer?.domElement.getContext("webgl");
-    gl && gl?.getExtension("WEBGL_lose_context")?.loseContext();
+    });
+    const gl = this.renderer?.domElement.getContext('webgl');
+    gl && gl?.getExtension('WEBGL_lose_context')?.loseContext();
 
     this.renderer?.forceContextLoss();
     this.renderer?.dispose();
@@ -402,17 +396,15 @@ class UseThree {
     // model3D = null
     // css3D = null
 
-    !!this.scene?.clear??this.scene?.clear();
+    !!this.scene?.clear ?? this.scene?.clear();
     cancelAnimationFrame(this.animationId);
-    this.animationId = -1
+    this.animationId = -1;
     // this.stats = null
     // scene = null
 
-    THREE.Cache.clear();  
+    THREE.Cache.clear();
     console.log('3D环境已清理干净');
   }
-
-
 }
 
 export default UseThree;