From d1f4f961d138947e4dc1e040ed6aa1efbdd86f43 Mon Sep 17 00:00:00 2001
From: luoyifan <luoyifan@qq.com>
Date: Fri, 23 May 2025 18:25:17 +0800
Subject: [PATCH] =?UTF-8?q?Model3DView=20=E6=A8=A1=E5=9E=8B=E9=87=8A?=
 =?UTF-8?q?=E6=94=BE=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ShowDialogWrap.vue            |   1 +
 src/designer/Model3DView.vue                 | 117 ++++++++++++++++++++++-----
 src/designer/viewWidgets/alarm/AlarmView.vue |   1 -
 src/runtime/System.ts                        |   3 +
 4 files changed, 103 insertions(+), 19 deletions(-)

diff --git a/src/components/ShowDialogWrap.vue b/src/components/ShowDialogWrap.vue
index 413a301..509352e 100644
--- a/src/components/ShowDialogWrap.vue
+++ b/src/components/ShowDialogWrap.vue
@@ -24,6 +24,7 @@
   </div>
 </template>
 <script>
+import _ from 'lodash'
 import { markRaw } from 'vue'
 import ElementDialogResize from '@/components/element-dialog-resize'
 
diff --git a/src/designer/Model3DView.vue b/src/designer/Model3DView.vue
index 8c81791..6e03d30 100644
--- a/src/designer/Model3DView.vue
+++ b/src/designer/Model3DView.vue
@@ -70,7 +70,7 @@
 </template>
 <script setup>
 import TransformEdit from '@/components/propertyEdit/TransformEdit.vue'
-import { ref, onMounted, nextTick, reactive, watch } from 'vue'
+import { ref, onMounted, nextTick, reactive, watch, getCurrentInstance, onUnmounted, onBeforeUnmount } from 'vue'
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
@@ -92,7 +92,7 @@ const transformEditCtl = ref(null)
 // Three.js 场景相关
 let scene, camera, renderer, controls
 let statsControls, axesHelper, gridHelper
-let gui, tcontrols, modelGroup
+let gui, tcontrols, modelGroup, resizeObserver
 
 const restate = reactive({
   targetColor: '#ff0000',
@@ -116,9 +116,31 @@ onMounted(() => {
   nextTick(() => {
     initThree()
     initGUI()
+
+    const viewerDom = canvasContainer.value
+    if (resizeObserver) {
+      resizeObserver.unobserve(viewerDom)
+    }
+    resizeObserver = new ResizeObserver(handleResize)
+    resizeObserver.observe(viewerDom)
+
+    window['model3dView'] = getCurrentInstance()
+    window['model3dViewRenderer'] = renderer
   })
 })
 
+onBeforeUnmount(() => {
+  cleanupThree()
+
+  const viewerDom = canvasContainer.value
+  if (resizeObserver) {
+    resizeObserver.unobserve(viewerDom)
+  }
+
+  window['model3dView'] = null
+  window['model3dViewRenderer'] = null
+})
+
 watch(() => restate.targetColor, (newVal) => {
   if (modelGroup) {
     modelGroup.traverse((child) => {
@@ -221,11 +243,6 @@ function initThree() {
   // tcontrols.size = 1
   // tcontrols.space = 'local'
   scene.add(tcontrols.getHelper())
-
-  // 创建ResizeObserver实例并传入处理函数
-  const resizeObserver = new ResizeObserver(handleResize)
-  // 开始观察指定的DOM元素
-  resizeObserver.observe(viewerDom)
 }
 
 // 动画循环
@@ -397,6 +414,9 @@ function handleTextureUpload(file) {
 
   file = file.raw
 
+  // 移除旧模型
+  cleaupModel()
+
   const fileName = file.name.toLowerCase()
   const reader = new FileReader()
   reader.onerror = (error) => {
@@ -435,12 +455,7 @@ function handleMtlUpload(file) {
   file = file.raw
 
   // 移除旧模型
-  if (modelGroup) {
-    scene.remove(modelGroup)
-  }
-  tcontrols.detach()
-  transformEditCtl.value.detach()
-  modelGroup = null
+  cleaupModel()
 
   const fileName = file.name.toLowerCase()
   const reader = new FileReader()
@@ -528,11 +543,7 @@ function handleFileChange(file) {
   file = file.raw
 
   // 移除旧模型
-  if (modelGroup) {
-    scene.remove(modelGroup)
-  }
-  tcontrols.detach()
-  transformEditCtl.value.detach()
+  cleaupModel()
 
   const fileName = file.name.toLowerCase()
   const reader = new FileReader()
@@ -582,6 +593,76 @@ function handleFileChange(file) {
   }
 }
 
+
+function cleaupModel() {
+  if (modelGroup) {
+    scene.remove(modelGroup)
+  }
+  tcontrols.detach()
+  transformEditCtl.value.detach()
+}
+
+function cleanupThree() {
+  // 移除旧模型
+  if (scene) {
+    scene.traverse((obj) => {
+      // 释放几何体
+      if (obj.geometry) {
+        obj.geometry.dispose()
+      }
+
+      // 释放材质
+      if (obj.material) {
+        if (Array.isArray(obj.material)) {
+          obj.material.forEach(m => m.dispose())
+        } else {
+          obj.material.dispose()
+        }
+      }
+
+      // 释放纹理
+      if (obj.texture) {
+        obj.texture.dispose()
+      }
+
+      // 释放渲染目标
+      if (obj.renderTarget) {
+        obj.renderTarget.dispose()
+      }
+
+      // 移除事件监听（如 OrbitControls）
+      if (obj.dispose) {
+        obj.dispose()
+      }
+    })
+
+    if (modelGroup) {
+      scene.remove(modelGroup)
+    }
+    // 清空场景
+    scene.children = []
+
+    modelGroup = null
+  }
+
+  if (gui) {
+    gui.destroy()
+  }
+  if (tcontrols) {
+    tcontrols.dispose()
+  }
+  if (statsControls) {
+    statsControls.dom.remove()
+  }
+
+  if (renderer) {
+    renderer.dispose()
+    renderer.forceContextLoss()
+    console.log('WebGL disposed, memory:', renderer.info.memory)
+    renderer.domElement = null
+  }
+}
+
 </script>
 <style scoped lang="less">
 .model3d-view {
diff --git a/src/designer/viewWidgets/alarm/AlarmView.vue b/src/designer/viewWidgets/alarm/AlarmView.vue
index daa9431..0163ca9 100644
--- a/src/designer/viewWidgets/alarm/AlarmView.vue
+++ b/src/designer/viewWidgets/alarm/AlarmView.vue
@@ -59,7 +59,6 @@ import IWidgets from '../IWidgets.js'
 
 export default {
   name: 'AlarmView',
-  webSocketSubscribe: ['alarm'],
   emits: ['close'],
   mixins: [IWidgets],
   data() {
diff --git a/src/runtime/System.ts b/src/runtime/System.ts
index 8c54e64..7c37cf3 100644
--- a/src/runtime/System.ts
+++ b/src/runtime/System.ts
@@ -40,6 +40,9 @@ export default class System {
 
   constructor(app: App) {
     this.app = app
+    window['_'] = _
+    window['$'] = $
+    window['JSON5'] = JSON5
   }
 
   /**