From 138655d8be059dd5dcb75b0263969e9b577b0196 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq@163.com>
Date: Tue, 25 Jun 2024 13:35:03 +0800
Subject: [PATCH] feat: optimized login background

---
 package.json                    |  2 +-
 public/js/login-canvas-three.js | 44 ++++++++++++++++++++++++++++-----
 public/js/login-canvas.js       |  2 +-
 src/interfaces/global.d.ts      |  2 +-
 src/views/login/Login.vue       |  6 ++---
 5 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 4a566c47615b9..ea2b768392dea 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "crawlab-ui",
-  "version": "0.6.3-13",
+  "version": "0.6.3-14",
   "private": false,
   "author": {
     "name": "Marvin Zhang",
diff --git a/public/js/login-canvas-three.js b/public/js/login-canvas-three.js
index 487028776fab9..86d30429eea84 100644
--- a/public/js/login-canvas-three.js
+++ b/public/js/login-canvas-three.js
@@ -1,5 +1,9 @@
 class ThreeJSApp {
   constructor() {
+    this.frameId = null;
+    this.fps = 60;
+    this.fpsInterval = 1000 / this.fps;
+    this.then = Date.now();
     this.cameraRange = 3;
     this.scene = new THREE.Scene();
     this.renderer = new THREE.WebGLRenderer({ antialias: true });
@@ -208,7 +212,7 @@ class ThreeJSApp {
 
   animate() {
     const time = performance.now() * 0.0003;
-    requestAnimationFrame(() => this.animate());
+    this.frameId = requestAnimationFrame(() => this.animate());
 
     for (const object of this.particularGroup.children) {
       object.rotation.x += object.speedValue / 10;
@@ -233,7 +237,36 @@ class ThreeJSApp {
     this.modularGroup.rotation.x -=
       (-this.mouse.y * 4 + this.modularGroup.rotation.x) * this.uSpeed * ratio;
     this.camera.lookAt(this.scene.position);
-    this.renderer.render(this.scene, this.camera);
+
+    const now = Date.now();
+    const elapsed = now - this.then;
+    if (elapsed > this.fpsInterval) {
+      this.then = now - (elapsed % this.fpsInterval);
+      this.renderer.render(this.scene, this.camera);
+    }
+  }
+
+  stopAnimation() {
+    if (this.frameId) {
+      cancelAnimationFrame(this.frameId); // 使用frameId来停止动画
+      this.frameId = null; // 清空frameId
+    }
+  }
+
+  dispose() {
+    this.stopAnimation(); // 停止动画
+    this.scene.traverse(object => {
+      if (object.material) {
+        object.material.dispose();
+      }
+      if (object.geometry) {
+        object.geometry.dispose();
+      }
+    });
+    this.renderer.dispose();
+    document
+      .getElementById('login-canvas')
+      .removeChild(this.renderer.domElement);
   }
 }
 
@@ -241,9 +274,8 @@ window.initCanvas = function () {
   window.threeJSApp = new ThreeJSApp();
 };
 window.resetCanvas = function () {
-  window.threeJSApp = null;
-  const el = document.querySelector('#login-canvas');
-  if (el) {
-    el.innerHTML = '';
+  if (window.threeJSApp) {
+    window.threeJSApp.dispose();
+    window.threeJSApp = null;
   }
 };
diff --git a/public/js/login-canvas.js b/public/js/login-canvas.js
index 1ed0656bf0cdb..cee41edf732f9 100644
--- a/public/js/login-canvas.js
+++ b/public/js/login-canvas.js
@@ -288,5 +288,5 @@ function initCanvas() {
 
   init();
 
-  window.resetCanvas = reset;
+  window.disposeCanvas = reset;
 }
diff --git a/src/interfaces/global.d.ts b/src/interfaces/global.d.ts
index f710e9121fff6..89d4532715254 100644
--- a/src/interfaces/global.d.ts
+++ b/src/interfaces/global.d.ts
@@ -7,7 +7,7 @@ declare global {
     VUE_APP_INIT_BAIDU_TONGJI?: string;
     threeJSApp?: any;
     initCanvas?: () => void;
-    resetCanvas?: () => void;
+    disposeCanvas?: () => void;
     _hmt?: Array;
     'vue3-sfc-loader'?: { loadModule };
     aplus_queue: { action: string; arguments: any[] }[];
diff --git a/src/views/login/Login.vue b/src/views/login/Login.vue
index 06e42bcae487a..af84d6dccaad3 100644
--- a/src/views/login/Login.vue
+++ b/src/views/login/Login.vue
@@ -165,9 +165,9 @@ onMounted(() => {
   }
 });
 onUnmounted(() => {
-  // reset canvas
-  if (window.resetCanvas) {
-    window.resetCanvas();
+  // dispose canvas
+  if (window.disposeCanvas) {
+    window.disposeCanvas();
   }
 });
 </script>