From 9d4d06ec1ae8c79b69f8bc07f2e9b7e7b346e165 Mon Sep 17 00:00:00 2001
From: luoyifan <luoyifan@qq.com>
Date: Fri, 23 May 2025 21:11:16 +0800
Subject: [PATCH] Model2DEditor

---
 src/designer/Designer.ts                      |   8 +
 src/designer/Model2DEditor.vue                |  68 ---
 src/designer/Model3DView.vue                  | 744 --------------------------
 src/designer/menus/Model3DView.ts             |   4 +-
 src/designer/model2DEditor/Model2DEditor.vue  |  63 +++
 src/designer/model2DEditor/Model2DEditorJs.ts |  40 ++
 src/designer/model2DEditor/ThreeJsEditor.vue  | 330 ++++++++++++
 src/designer/model3DView/Model3DView.vue      | 744 ++++++++++++++++++++++++++
 src/views/ModelMain.less                      | 292 ++++++----
 src/views/ModelMain.vue                       |   8 +-
 10 files changed, 1367 insertions(+), 934 deletions(-)
 delete mode 100644 src/designer/Model2DEditor.vue
 delete mode 100644 src/designer/Model3DView.vue
 create mode 100644 src/designer/model2DEditor/Model2DEditor.vue
 create mode 100644 src/designer/model2DEditor/Model2DEditorJs.ts
 create mode 100644 src/designer/model2DEditor/ThreeJsEditor.vue
 create mode 100644 src/designer/model3DView/Model3DView.vue

diff --git a/src/designer/Designer.ts b/src/designer/Designer.ts
index 1c91c3b..58c78f7 100644
--- a/src/designer/Designer.ts
+++ b/src/designer/Designer.ts
@@ -10,6 +10,14 @@ export default class Designer {
   allLevels: any = null
   currentFloor: string = null
 
+  editorState = reactive({
+    ready: false,
+    camera: {
+      position: { x: 0, y: 0, z: 0 },
+      rotation: { x: 0, y: 0, z: 0 }
+    }
+  })
+
   constructor() {
     this.init()
     this.open()
diff --git a/src/designer/Model2DEditor.vue b/src/designer/Model2DEditor.vue
deleted file mode 100644
index 69f54d1..0000000
--- a/src/designer/Model2DEditor.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <div class="section-canvas">
-    <div class="section-top-toolbar section-toolbar">
-      <el-button type="primary" :icon="renderIcon('element TopLeft')" link></el-button>
-      <span class="section-toolbar-line"></span>
-      <el-cascader placeholder="选择楼层" size="small" v-model="currentLevel" :options="allLevels" filterable />
-    </div>
-    <div class="section-content"></div>
-    <div class="section-bottom-toolbar section-toolbar">
-      <div class="section-toolbar-left">
-        <el-button type="primary" :icon="renderIcon('fa MousePointer')" link></el-button>
-        <span class="section-toolbar-line"></span>
-        <el-button type="primary" :icon="renderIcon('element Aim')" link></el-button>
-        <span class="section-toolbar-line"></span>
-        <el-button type="primary" :icon="renderIcon('antd LineOutlined')" link></el-button>
-        <span class="section-toolbar-line"></span>
-        <el-button type="primary" :icon="renderIcon('icon5 BandageSharp')" link></el-button>
-        <span class="section-toolbar-line"></span>
-        <el-button type="primary" :icon="renderIcon('antd InsertRowLeftOutlined')" link></el-button>
-      </div>
-      <div class="section-toolbar-right">
-        <el-input v-model="searchKeyword" size="small" style="width: 110px" placeholder="Search">
-          <template #prefix>
-            <component :is="renderIcon('element Search')"></component>
-          </template>
-        </el-input>
-        <span class="section-toolbar-line"></span>
-        <el-text type="warning">1</el-text>
-        <span class="section-toolbar-line"></span>
-        <el-text type="danger">0</el-text>
-        <div class="infor">
-          X=14.091,Y=12.397
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { renderIcon } from '@/utils/webutils.ts'
-
-export default {
-  name: 'Model2DEditor',
-  components: {
-    renderIcon
-  },
-  data() {
-    return {
-      currentLevel: '',
-      searchKeyword: '',
-      sectionLeftSearch: '',
-      sectionRightSize: 0,
-      sectionBottomSize: 0,
-      hideRight: false,
-      hideBottom: false,
-      calcRightPanel: null,
-      calcBottomPanel: null
-    }
-  },
-  methods: {
-    renderIcon
-  },
-  computed: {
-    allLevels() {
-      return designer.allLevels
-    }
-  }
-}
-</script>
\ No newline at end of file
diff --git a/src/designer/Model3DView.vue b/src/designer/Model3DView.vue
deleted file mode 100644
index 6e03d30..0000000
--- a/src/designer/Model3DView.vue
+++ /dev/null
@@ -1,744 +0,0 @@
-<template>
-  <div class="model3d-view">
-    <el-space :gutter="10" class="toolbar">
-      <el-upload :on-change="handleFileChange"
-                 :show-file-list="false" accept=".fbx,.obj,.mtl,.3ds" action="" :auto-upload="false">
-        <el-button type="primary">打开模型</el-button>
-      </el-upload>
-      <el-upload :on-change="handleTextureUpload"
-                 :show-file-list="false" accept=".png,.jpg,.jpeg" action="" :auto-upload="false"
-                 list-type="picture">
-        <el-button>打开贴图</el-button>
-      </el-upload>
-      <el-upload :on-change="handleMtlUpload"
-                 :show-file-list="false" accept=".mtl" action="" :auto-upload="false"
-                 list-type="picture">
-        <el-button>打开材质</el-button>
-      </el-upload>
-      <div class="demo-color-block">
-        <span class="demonstration">材质颜色</span>
-        <el-color-picker v-model="restate.targetColor" />
-      </div>
-      <!-- 按 1:1 / 1:0.001 比例 -->
-      <div class="demo-color-block">
-        <span class="demonstration">默认比例</span>
-        <el-radio-group v-model="restate.loadScale">
-          <el-radio-button label="1" :value="1" />
-          <el-radio-button label="0.01" :value="0.01" />
-          <el-radio-button label="0.001" :value="0.001" />
-        </el-radio-group>
-      </div>
-      <div class="demo-color-block">
-        <span class="demonstration">物体数:<el-text type="danger">{{ restate.objects }}</el-text></span>
-        <span class="demonstration"> 顶点数:<el-text type="danger">{{ restate.vertices }}</el-text></span>
-        <span class="demonstration"> 三角形数:<el-text type="danger">{{ restate.faces }}</el-text></span>
-      </div>
-    </el-space>
-    <div class="main-content">
-      <Split class="model3d-content" :direction="'horizontal'">
-        <SplitArea class="model3d-canvas" :size="70">
-          <!-- Three.js 渲染画布 -->
-          <div class="canvas-container" ref="canvasContainer">
-            <div class="canvas-left-toolbar">
-              <button class="Button" :class="{selected:(restate.mode==='translate')}" title="平移"
-                      @mousedown="restate.mode='translate'">
-                <component :is="renderIcon('element Rank')" />
-              </button>
-              <button class="Button" :class="{selected:(restate.mode==='rotate')}" title="旋转"
-                      @mousedown="restate.mode='rotate'">
-                <component :is="renderIcon('element RefreshLeft')" />
-              </button>
-              <button class="Button" :class="{selected:(restate.mode==='scale')}" title="缩放"
-                      @mousedown="restate.mode='scale'">
-                <component :is="renderIcon('element ScaleToOriginal')" />
-              </button>
-            </div>
-          </div>
-        </SplitArea>
-        <SplitArea class="model3d-gui" :size="30">
-          <div class="model3d-gui-wrap">
-            <!-- 右侧面板 -->
-            <div class="gui-toolbar">
-              <TransformEdit ref="transformEditCtl" />
-            </div>
-            <div class="gui-panel" ref="guiPanel"></div>
-          </div>
-        </SplitArea>
-      </Split>
-    </div>
-  </div>
-</template>
-<script setup>
-import TransformEdit from '@/components/propertyEdit/TransformEdit.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'
-import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
-import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
-import { TDSLoader } from 'three/examples/jsm/loaders/TDSLoader'
-import * as dat from 'three/examples/jsm/libs/lil-gui.module.min.js'
-import Stats from 'three/examples/jsm/libs/stats.module'
-import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js'
-import Split from '@/components/split/split.vue'
-import SplitArea from '@/components/split/split-area.vue'
-import { renderIcon } from '@/utils/webutils.js'
-
-// DOM refs
-const canvasContainer = ref(null)
-const guiPanel = ref(null)
-const transformEditCtl = ref(null)
-
-// Three.js 场景相关
-let scene, camera, renderer, controls
-let statsControls, axesHelper, gridHelper
-let gui, tcontrols, modelGroup, resizeObserver
-
-const restate = reactive({
-  targetColor: '#ff0000',
-  loadScale: 1,
-  mode: 'translate',
-  objects: 0,
-  vertices: 0,
-  faces: 0
-})
-
-// 状态变量
-const state = {
-  showAxesHelper: true,
-  showGridHelper: true,
-  camera: {
-    position: { x: 0, y: 5, z: 10 },
-    rotation: { x: 0, y: 0, z: 0 }
-  }
-}
-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) => {
-      if (child.isMesh && child.material?.color) {
-        child.material.color.set(newVal)
-        child.material.needsUpdate = true
-      }
-    })
-  }
-})
-
-watch(() => restate.mode, (newVal) => {
-  if (tcontrols) {
-    tcontrols.setMode(newVal)
-  }
-})
-
-function initThree() {
-  const viewerDom = canvasContainer.value
-
-  // 场景
-  scene = new THREE.Scene()
-  scene.background = new THREE.Color(0xeeeeee)
-
-  // 渲染器
-  renderer = new THREE.WebGLRenderer({
-    logarithmicDepthBuffer: true,
-    antialias: true,
-    physicallyCorrectLights: true,
-    outputEncoding: THREE.SRGBColorSpace,
-    alpha: true,
-    precision: 'mediump',
-    premultipliedAlpha: true,
-    preserveDrawingBuffer: false,
-    powerPreference: 'high-performance'
-  })
-  renderer.clearDepth()
-  renderer.shadowMap.enabled = true
-  renderer.toneMapping = THREE.ACESFilmicToneMapping
-  renderer.setPixelRatio(window.devicePixelRatio)
-  renderer.setSize(viewerDom.getBoundingClientRect().width, viewerDom.getBoundingClientRect().height)
-  viewerDom.appendChild(renderer.domElement)
-
-  // 摄像机
-  initMode3DCamera()
-
-  // 辅助线
-  axesHelper = new THREE.AxesHelper(5)
-  scene.add(axesHelper)
-
-  gridHelper = new THREE.GridHelper(40, 40)
-  scene.add(gridHelper)
-
-  // 光照
-  const ambientLight = new THREE.AmbientLight(0xffffff, 1.5)
-  scene.add(ambientLight)
-
-  const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5)
-  directionalLight.position.set(5, 5, 5).multiplyScalar(3)
-  directionalLight.castShadow = true
-  scene.add(directionalLight)
-
-  const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1)
-  scene.add(hemisphereLight)
-
-
-  // 性能监控
-  statsControls = new Stats()
-  statsControls.showPanel(0)
-  statsControls.dom.style.position = 'absolute'
-  statsControls.dom.style.bottom = '5px'
-  statsControls.dom.style.left = '5px'
-  statsControls.dom.style.top = 'unset'
-  viewerDom.appendChild(statsControls.dom)
-
-  // // 创建几何体和材质
-  // const geometry = new THREE.BoxGeometry(1, 1, 1)
-  // const material = new THREE.MeshStandardMaterial({
-  //   color: 0xcccccc,
-  //   metalness: 0.9,
-  //   roughness: 0.1
-  // })
-  //
-  // const cube = new THREE.Mesh(geometry, material)
-  // scene.add(cube)
-  // camera.position.z = 5
-
-  animate()
-
-  // 转换控制器 TransformControls
-  tcontrols = new TransformControls(camera, renderer.domElement)
-  tcontrols.addEventListener('change', () => {
-    renderer.render(scene, camera)
-    transformEditCtl.value?.refreshData()
-  })
-  tcontrols.addEventListener('dragging-changed', function(event) {
-    controls.enabled = !event.value
-  })
-  tcontrols.setMode('translate')
-  // tcontrols.size = 1
-  // tcontrols.space = 'local'
-  scene.add(tcontrols.getHelper())
-}
-
-// 动画循环
-function animate() {
-  requestAnimationFrame(animate)
-  renderView()
-}
-
-function initGUI() {
-  const guiDom = guiPanel.value
-
-  gui = new dat.GUI({ autoPlace: false })
-  guiDom.appendChild(gui.domElement)
-
-  // 显示辅助线
-  gui.add(state, 'showAxesHelper').name('显示坐标轴').onChange(val => {
-    axesHelper.visible = val
-  })
-
-  gui.add(state, 'showGridHelper').name('显示网格').onChange(val => {
-    gridHelper.visible = val
-  })
-
-  // Position
-  const cameraPosFolder = gui.addFolder('摄像机位置')
-  cameraPosFolder.add(state.camera.position, 'x', -100, 100).step(0.1).listen().onChange(val => {
-    camera.position.x = val
-  })
-  cameraPosFolder.add(state.camera.position, 'y', -100, 100).step(0.1).listen().onChange(val => {
-    camera.position.y = val
-  })
-  cameraPosFolder.add(state.camera.position, 'z', -100, 100).step(0.1).listen().onChange(val => {
-    camera.position.z = val
-  })
-  cameraPosFolder.close()
-
-  // Rotation (in radians)
-  const cameraRotationFolder = gui.addFolder('摄像机旋转角')
-  cameraRotationFolder.add(state.camera.rotation, 'x', -Math.PI, Math.PI).listen().onChange(val => {
-    camera.rotation.x = val
-  })
-  cameraRotationFolder.add(state.camera.rotation, 'y', -Math.PI, Math.PI).listen().onChange(val => {
-    camera.rotation.y = val
-  })
-  cameraRotationFolder.add(state.camera.rotation, 'z', -Math.PI, Math.PI).listen().onChange(val => {
-    camera.rotation.z = val
-  })
-  cameraRotationFolder.close()
-
-  // 相机位置
-  // const cameraFolder = gui.addFolder('相机位置')
-  // cameraFolder.add(state.cameraPosition, 0, -10, 10).name('X')
-  // cameraFolder.add(state.cameraPosition, 1, -10, 10).name('Y')
-  // cameraFolder.add(state.cameraPosition, 2, 5, 30).name('Z').onChange(() => {
-  //   camera.position.set(...state.cameraPosition)
-  // })
-  // cameraFolder.open()
-}
-
-function handleResize(entries) {
-  for (let entry of entries) {
-    // entry.contentRect包含了元素的尺寸信息
-    console.log('Element size changed:', entry.contentRect)
-
-    const width = entry.contentRect.width
-    const height = entry.contentRect.height
-
-    if (camera instanceof THREE.PerspectiveCamera) {
-      camera.aspect = width / height
-      camera.updateProjectionMatrix()
-
-    } else if (camera instanceof THREE.OrthographicCamera) {
-      camera.left = width / -2
-      camera.right = width / 2
-      camera.top = height / 2
-      camera.bottom = height / -2
-      camera.updateProjectionMatrix()
-    }
-    renderer.setSize(width, height)
-    break
-  }
-}
-
-function initMode2DCamera() {
-  // const controlsNew = new OrbitControls(
-  //   cameraNew,
-  //   renderer?.domElement
-  // )
-  // controlsNew.enableDamping = false
-  // controlsNew.enableZoom = true
-  // controlsNew.enableRotate = false
-  // controlsNew.mouseButtons = { LEFT: THREE.MOUSE.PAN, RIGHT: THREE.MOUSE.ROTATE } // 鼠标中键平移
-  // controlsNew.screenSpacePanning = false // 定义平移时如何平移相机的位置 控制不上下移动
-  // controlsNew.keys = { LEFT: 'KeyA', UP: 'KeyW', RIGHT: 'KeyD', BOTTOM: 'KeyS' }
-  // controlsNew.listenToKeyEvents(viewerDom) // 监听键盘事件
-  // controlsNew.panSpeed = 1
-  // controlsNew.keyPanSpeed = 20 // normal 7
-  // controlsNew.minDistance = 0.1
-  // controlsNew.maxDistance = 1000
-}
-
-function initMode3DCamera() {
-  if (camera) {
-    scene.remove(camera)
-  }
-
-  const viewerDom = canvasContainer.value
-
-  // 渲染相机
-  const cameraNew = new THREE.PerspectiveCamera(25, viewerDom.clientWidth / viewerDom.clientHeight, 0.1, 2000)
-  //设置相机位置
-  // cameraNew.position.set(4, 2, -3);
-  // cameraNew.position.set(30, 30, 30)
-  cameraNew.position.set(5, 5, 5)
-  // 2.4,30,1.5;
-  // cameraNew.position.set(2.4, 20, 1.5)
-  //设置相机方向
-  cameraNew.lookAt(0, 0, 0)
-  // -1.57,0,1.57
-  // cameraNew.rotation.set(-1.57, 0, 1.57)
-
-  camera = cameraNew
-  scene.add(camera)
-
-  const controlsNew = new OrbitControls(camera, viewerDom)
-  controlsNew.mouseButtons = { LEFT: THREE.MOUSE.PAN, RIGHT: THREE.MOUSE.ROTATE } // 鼠标中键平移
-  controlsNew.enableDamping = false
-  controlsNew.screenSpacePanning = false // 定义平移时如何平移相机的位置 控制不上下移动
-  controlsNew.minDistance = 2
-  controls = controlsNew
-  controls.update()
-
-  camera.updateProjectionMatrix()
-
-  reloadState()
-}
-
-function reloadState() {
-  if (camera) {
-    state.camera.position.x = camera.position.x
-    state.camera.position.y = camera.position.y
-    state.camera.position.z = camera.position.z
-
-    state.camera.rotation.x = camera.rotation.x
-    state.camera.rotation.y = camera.rotation.y
-    state.camera.rotation.z = camera.rotation.z
-  }
-}
-
-function renderView() {
-  statsControls?.update()
-  renderer?.render(scene, camera)
-
-  if (camera) {
-    // 同步相机位置和旋转到 cameraTransform 对象
-    state.camera.position.x = camera.position.x
-    state.camera.position.y = camera.position.y
-    state.camera.position.z = camera.position.z
-
-    state.camera.rotation.x = camera.rotation.x
-    state.camera.rotation.y = camera.rotation.y
-    state.camera.rotation.z = camera.rotation.z
-  }
-}
-
-function handleTextureUpload(file) {
-  console.log('file', file)
-  if (!file) return
-
-  file = file.raw
-
-  // 移除旧模型
-  cleaupModel()
-
-  const fileName = file.name.toLowerCase()
-  const reader = new FileReader()
-  reader.onerror = (error) => {
-    system.showErrorDialog('加载文件失败', error.toString())
-    system.clearLoading()
-  }
-
-  if (fileName.endsWith('.png') || fileName.endsWith('.jpg') || fileName.endsWith('.jpeg')) {
-    reader.onload = () => {
-      // const textureLoader = new THREE.TextureLoader()
-      // const texture = textureLoader.load(reader.result)
-      // tcontrols.setTexture(texture)
-      // system.clearLoading()
-      const texture = new THREE.TextureLoader().load(reader.result)
-
-      // 假设模型的所有网格都应用相同的材质
-      modelGroup.traverse(function(child) {
-        if (child.isMesh) {
-          child.material.map = texture
-          child.material.needsUpdate = true
-        }
-      })
-    }
-    reader.readAsDataURL(file)
-  } else {
-    alert('不支持的文件类型！')
-  }
-}
-
-let lastObjfile = undefined
-
-function handleMtlUpload(file) {
-  console.log('file', file)
-  if (!file) return
-
-  file = file.raw
-
-  // 移除旧模型
-  cleaupModel()
-
-  const fileName = file.name.toLowerCase()
-  const reader = new FileReader()
-  reader.onerror = (error) => {
-    system.showErrorDialog('加载文件失败', error.toString())
-    system.clearLoading()
-  }
-
-  if (fileName.endsWith('.mtl')) {
-    reader.onload = () => {
-      const mtlLoader = new MTLLoader()
-      mtlLoader.load(reader.result, (materials) => {
-        materials.preload()
-
-        const objLoader = new OBJLoader()
-        objLoader.setMaterials(materials)
-        const content = objLoader.parse(lastObjfile)
-        addGroupToScene(content)
-      })
-    }
-    reader.readAsText(file)
-  } else {
-    alert('不支持的文件类型！')
-  }
-}
-
-function addGroupToScene(group) {
-  modelGroup = group
-  if (restate.loadScale) {
-    // 设置默认模型缩放
-    modelGroup.scale.set(restate.loadScale, restate.loadScale, restate.loadScale)
-  }
-  scene.add(modelGroup)
-  tcontrols.attach(modelGroup)
-  transformEditCtl.value?.attachObject3D(modelGroup)
-
-  controls.target.copy(modelGroup.position)
-  controls.update()
-
-  // 遍历场景中的所有对象
-  let totalObjects = 0
-  let totalVertices = 0
-  let totalFaces = 0
-  modelGroup.traverse(function(child) {
-    if (child.isMesh) {
-      totalObjects++
-
-      // 获取几何体
-      const geometry = child.geometry
-
-      // 如果几何体是 BufferGeometry 类型
-      if (geometry.isBufferGeometry) {
-        // 计算顶点数
-        if (geometry.attributes.position) {
-          totalVertices += geometry.attributes.position.count
-        }
-
-        // 计算面数（假设每个面都是由三个顶点组成的三角形）
-        if (geometry.index) {
-          totalFaces += geometry.index.count / 3
-        } else if (geometry.attributes.position) {
-          // 如果没有索引，计算非索引几何体的面数
-          totalFaces += geometry.attributes.position.count / 3
-        }
-      }
-      // 如果几何体是 Geometry 类型（较旧的版本使用）
-      else if (geometry.isGeometry) {
-        // 计算顶点数
-        totalVertices += geometry.vertices.length
-
-        // 计算面数
-        totalFaces += geometry.faces.length
-      }
-    }
-  })
-  restate.objects = totalObjects
-  restate.vertices = totalVertices
-  restate.faces = totalFaces
-}
-
-function handleFileChange(file) {
-  console.log('file', file)
-  if (!file) return
-
-  file = file.raw
-
-  // 移除旧模型
-  cleaupModel()
-
-  const fileName = file.name.toLowerCase()
-  const reader = new FileReader()
-  reader.onerror = (error) => {
-    system.showErrorDialog('加载文件失败', error.toString())
-    system.clearLoading()
-  }
-
-  if (fileName.endsWith('.fbx')) {
-    system.showLoading()
-    reader.onload = () => {
-      const loader = new FBXLoader()
-      const arrayBuffer = reader.result
-      const content = loader.parse(arrayBuffer, '')
-      addGroupToScene(content)
-
-      system.clearLoading()
-    }
-    reader.readAsArrayBuffer(file)
-
-  } else if (fileName.endsWith('.obj')) {
-    reader.readAsText(file)
-    reader.onload = () => {
-      const loader = new OBJLoader()
-      lastObjfile = reader.result
-      //@ts-ignore
-      const content = loader.parse(reader.result)
-      addGroupToScene(content)
-
-      system.clearLoading()
-    }
-
-  } else if (fileName.endsWith('.3ds')) {
-    reader.onload = () => {
-      const loader = new TDSLoader()
-      const arrayBuffer = reader.result
-      //@ts-ignore
-      const content = loader.parse(arrayBuffer, '')
-      addGroupToScene(content)
-
-      system.clearLoading()
-    }
-    reader.readAsArrayBuffer(file)
-
-  } else {
-    alert('不支持的文件类型！')
-  }
-}
-
-
-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 {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  overflow: hidden;
-
-  .canvas-left-toolbar {
-    position: absolute;
-    left: 5px;
-    top: 5px;
-    width: 32px;
-    background: #eee;
-    text-align: center;
-
-    button {
-      color: #555;
-      background-color: #ddd;
-      border: 0;
-      margin: 0;
-      padding: 5px 8px;
-      font-size: 12px;
-      text-transform: uppercase;
-      cursor: pointer;
-      outline: none;
-    }
-
-    button.selected {
-      background-color: #fff;
-    }
-  }
-
-  .toolbar {
-    padding: 10px;
-    background: #f5f5f5;
-    border-bottom: 1px solid #ccc;
-  }
-
-  .dialog-container {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-  }
-
-  .main-content {
-    display: flex;
-    flex: 1;
-    overflow: hidden;
-
-    .model3d-content {
-      height: 100%;
-      display: flex;
-      flex-direction: row;
-    }
-  }
-
-  .canvas-container {
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-
-  .model3d-gui-wrap {
-    border-left: 1px solid #ccc;
-    background: #111;
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-  }
-
-  .gui-panel {
-    :deep(.lil-gui.root) {
-      width: 100%;
-    }
-  }
-}
-
-</style>
\ No newline at end of file
diff --git a/src/designer/menus/Model3DView.ts b/src/designer/menus/Model3DView.ts
index 8594f87..8de6eca 100644
--- a/src/designer/menus/Model3DView.ts
+++ b/src/designer/menus/Model3DView.ts
@@ -1,5 +1,5 @@
 import { defineMenu } from '@/runtime/DefineMenu.ts'
-import Model3DView from '@/designer/Model3DView.vue'
+import Model3DView from '@/designer/model3DView/Model3DView.vue'
 
 export default defineMenu((menus) => {
   menus.insertChildren('tool',
@@ -18,7 +18,7 @@ export default defineMenu((menus) => {
             showMax: true,
             showCancelButton: false,
             showOkButton: false,
-            dialogClass:'model-3d-view-wrap',
+            dialogClass: 'model-3d-view-wrap'
           })
         }
       }
diff --git a/src/designer/model2DEditor/Model2DEditor.vue b/src/designer/model2DEditor/Model2DEditor.vue
new file mode 100644
index 0000000..aa39203
--- /dev/null
+++ b/src/designer/model2DEditor/Model2DEditor.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="section-canvas">
+    <div class="section-top-toolbar section-toolbar">
+      <span class="section-toolbar-line" style="margin-left: 85px;"></span>
+      <el-button :icon="renderIcon('antd ClusterOutlined')" link></el-button>
+      <span class="section-toolbar-line"></span>
+      <el-cascader placeholder="选择楼层" size="small" v-model="view.currentLevel" :options="allLevels" filterable />
+    </div>
+    <div class="section-content">
+      <ThreeJsEditor v-if="view.currentLevel" :key="view.currentLevel" />
+    </div>
+    <div class="section-bottom-toolbar section-toolbar">
+      <div class="section-toolbar-left">
+        <el-button title="鼠标状态 (ESC)" :icon="renderIcon('fa MousePointer')" link
+                   :type="oper.currentMode==='normal'?'primary':''"
+                   @click="()=>oper.currentMode = 'normal'"></el-button>
+
+        <span class="section-toolbar-line"></span>
+        <el-button title="框选模式 (T)" :icon="renderIcon('FullScreen')" link
+                   :type="oper.currentMode==='selectByRec'?'primary':''"
+                   @click="()=>oper.currentMode = 'selectByRec'"></el-button>
+
+        <span class="section-toolbar-line"></span>
+        <el-button title="物理流动线 (Z)" :icon="renderIcon('antd EnterOutlined')" link
+                   :type="oper.currentMode==='ALink'?'primary':''"
+                   @click="()=>oper.currentMode = 'ALink'"></el-button>
+
+        <span class="section-toolbar-line"></span>
+        <el-button title="逻辑关联 (X)" :icon="renderIcon('antd LinkOutlined')" link
+                   :type="oper.currentMode==='SLink'?'primary':''"
+                   @click="()=>oper.currentMode = 'SLink'"></el-button>
+
+        <span class="section-toolbar-line"></span>
+        <el-button title="测量工具" :icon="renderIcon('fa Ruler')" link
+                   :type="oper.currentMode==='Ruler'?'primary':''"
+                   @click="()=>oper.currentMode = 'Ruler'"></el-button>
+      </div>
+      <div class="section-toolbar-right">
+        <el-input v-model="view.searchKeyword" size="small" style="width: 110px; margin-right: 5px;"
+                  placeholder="Search">
+          <template #prefix>
+            <component :is="renderIcon('element Search')"></component>
+          </template>
+        </el-input>
+        <el-text type="warning">00001</el-text>
+        <span class="section-toolbar-line"></span>
+        <el-text type="danger">00011</el-text>
+        <div v-if="editorState.ready">
+          {{ editorState.camera.position.x.toFixed(2) }},{{ editorState.camera.position.y.toFixed(2) }},{{ editorState.camera.position.z.toFixed(2)
+          }}
+        </div>
+        <div class="infor">
+          X=14.091,Y=12.397
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Model2DEditorJs from './Model2DEditorJs.js'
+
+export default Model2DEditorJs
+</script>
\ No newline at end of file
diff --git a/src/designer/model2DEditor/Model2DEditorJs.ts b/src/designer/model2DEditor/Model2DEditorJs.ts
new file mode 100644
index 0000000..c98b45a
--- /dev/null
+++ b/src/designer/model2DEditor/Model2DEditorJs.ts
@@ -0,0 +1,40 @@
+import { renderIcon } from '@/utils/webutils.ts'
+import { defineComponent } from 'vue'
+import ThreeJsEditor from './ThreeJsEditor.vue'
+
+export default defineComponent({
+  name: 'Model2DEditor',
+  components: { ThreeJsEditor },
+  data() {
+    return {
+      oper: {
+        currentMode: 'normal'
+      },
+      view: {
+        currentLevel: '',
+        searchKeyword: ''
+      }
+    } as IData
+  },
+  methods: {
+    renderIcon
+  },
+  computed: {
+    editorState() {
+      return designer.editorState
+    },
+    allLevels() {
+      return designer.allLevels
+    }
+  }
+})
+
+export interface IData {
+  oper: {
+    currentMode: 'normal' | 'ALink' | 'SLink' | 'PointCallback' | 'PointAdd' | 'LinkAdd' | 'LinkAdd2' | 'Ruler' | 'selectByRec',
+  },
+  view: {
+    currentLevel: string,
+    searchKeyword: string,
+  },
+}
\ No newline at end of file
diff --git a/src/designer/model2DEditor/ThreeJsEditor.vue b/src/designer/model2DEditor/ThreeJsEditor.vue
new file mode 100644
index 0000000..8dd8709
--- /dev/null
+++ b/src/designer/model2DEditor/ThreeJsEditor.vue
@@ -0,0 +1,330 @@
+<template>
+  <div class="canvas-container" ref="canvasContainer" tabindex="1" />
+</template>
+<script setup lang="ts">
+import * as THREE from 'three'
+import $ from 'jquery'
+import Stats from 'three/examples/jsm/libs/stats.module'
+import {
+  ref,
+  onMounted,
+  nextTick,
+  reactive,
+  watch,
+  getCurrentInstance,
+  onUnmounted,
+  onBeforeUnmount,
+  defineExpose
+} from 'vue'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+
+// DOM refs
+const canvasContainer = ref(null)
+
+// 窗口大小关联
+let resizeObserver
+
+// Three.js 场景相关
+let scene, camera, renderer, controls
+let statsControls, axesHelper, gridHelper
+
+const state = designer.editorState
+
+function initMode2DCamera() {
+  if (camera) {
+    scene.remove(camera)
+  }
+
+  // ============================ 创建正交相机
+  const viewerDom = canvasContainer.value
+  const cameraNew = new THREE.OrthographicCamera(
+    viewerDom.clientWidth / -2,
+    viewerDom.clientWidth / 2,
+    viewerDom.clientHeight / 2,
+    viewerDom.clientHeight / -2,
+    1,
+    500
+  )
+  cameraNew.position.set(0, 100, 0)
+  cameraNew.lookAt(0, 0, 0)
+  cameraNew.zoom = 30
+  camera = cameraNew
+  scene.add(camera)
+
+  // ============================ 创建控制器
+  const controlsNew = new OrbitControls(
+    camera,
+    renderer.domElement
+  )
+  controlsNew.enableDamping = false
+  controlsNew.enableZoom = true
+  controlsNew.enableRotate = false
+  controlsNew.mouseButtons = { LEFT: THREE.MOUSE.PAN } // 鼠标中键平移
+  controlsNew.screenSpacePanning = false // 定义平移时如何平移相机的位置 控制不上下移动
+  controlsNew.listenToKeyEvents(viewerDom) // 监听键盘事件
+  controlsNew.keys = { LEFT: 'KeyA', UP: 'KeyW', RIGHT: 'KeyD', BOTTOM: 'KeyS' }
+  controlsNew.panSpeed = 1
+  controlsNew.keyPanSpeed = 20 // normal 7
+  controlsNew.minDistance = 0.1
+  controlsNew.maxDistance = 1000
+  controls = controlsNew
+  controlsNew.addEventListener('change', syncCameraState)
+
+  camera.updateProjectionMatrix()
+
+  syncCameraState()
+}
+
+function initThree() {
+  const viewerDom = canvasContainer.value
+
+  // 场景
+  scene = new THREE.Scene()
+  scene.background = new THREE.Color(0xeeeeee)
+
+  // 渲染器
+  renderer = new THREE.WebGLRenderer({
+    logarithmicDepthBuffer: true,
+    antialias: true,
+    alpha: true,
+    precision: 'mediump',
+    premultipliedAlpha: true,
+    preserveDrawingBuffer: false,
+    powerPreference: 'high-performance'
+  })
+  renderer.outputEncoding = THREE.SRGBColorSpace
+  renderer.clearDepth()
+  renderer.shadowMap.enabled = true
+  renderer.toneMapping = THREE.ACESFilmicToneMapping
+  renderer.setPixelRatio(window.devicePixelRatio)
+  renderer.setSize(viewerDom.getBoundingClientRect().width, viewerDom.getBoundingClientRect().height)
+  viewerDom.appendChild(renderer.domElement)
+
+  // 创建正交摄像机
+  initMode2DCamera()
+
+  // 辅助线
+  axesHelper = new THREE.AxesHelper(5)
+  scene.add(axesHelper)
+
+  gridHelper = new THREE.GridHelper(500, 500)
+  gridHelper.material = new THREE.LineBasicMaterial({
+    color: 0x888888,
+    opacity: 1,
+    transparent: true
+  })
+
+  scene.add(gridHelper)
+
+  // 光照
+  const ambientLight = new THREE.AmbientLight(0xffffff, 1.5)
+  scene.add(ambientLight)
+
+  const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5)
+  directionalLight.position.set(5, 5, 5).multiplyScalar(3)
+  directionalLight.castShadow = true
+  scene.add(directionalLight)
+
+  const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1)
+  scene.add(hemisphereLight)
+
+  // 性能监控
+  statsControls = new Stats()
+  statsControls.showPanel(0)
+  statsControls.dom.style.position = 'absolute'
+  statsControls.dom.style.top = '2px'
+  statsControls.dom.style.left = '0'
+  viewerDom.appendChild(statsControls.dom)
+  $(statsControls.dom).children().css('height', '28px')
+
+  // 创建几何体和材质
+  const geometry = new THREE.BoxGeometry(1, 1, 1)
+  const material = new THREE.MeshStandardMaterial({
+    color: 0xcccccc,
+    metalness: 0.9,
+    roughness: 0.1
+  })
+
+  const cube = new THREE.Mesh(geometry, material)
+  scene.add(cube)
+  camera.position.z = 5
+
+  animate()
+}
+
+// 动画循环
+function animate() {
+  requestAnimationFrame(animate)
+  renderView()
+}
+
+function renderView() {
+  statsControls?.update()
+  renderer?.render(scene, camera)
+}
+
+onMounted(() => {
+  const editor = getCurrentInstance()
+  nextTick(() => {
+    initThree()
+
+    const viewerDom = canvasContainer.value
+    if (resizeObserver) {
+      resizeObserver.unobserve(viewerDom)
+    }
+    resizeObserver = new ResizeObserver(handleResize)
+    resizeObserver.observe(viewerDom)
+
+    state.ready = true
+
+    window['editor'] = editor
+    window['renderer'] = renderer
+    window['scene'] = scene
+    window['camera'] = camera
+    window['renderer'] = renderer
+    window['controls'] = controls
+
+    viewerDom?.focus()
+  })
+})
+
+onBeforeUnmount(() => {
+  state.ready = false
+
+  cleanupThree()
+
+  const viewerDom = canvasContainer.value
+  if (resizeObserver) {
+    resizeObserver.unobserve(viewerDom)
+  }
+
+  delete window['editor']
+  delete window['renderer']
+  delete window['scene']
+  delete window['camera']
+  delete window['renderer']
+  delete window['controls']
+})
+
+
+function handleResize(entries) {
+  for (let entry of entries) {
+    // entry.contentRect包含了元素的尺寸信息
+    console.log('Element size changed:', entry.contentRect)
+
+    const width = entry.contentRect.width
+    const height = entry.contentRect.height
+
+    if (camera instanceof THREE.PerspectiveCamera) {
+      camera.aspect = width / height
+      camera.updateProjectionMatrix()
+
+    } else if (camera instanceof THREE.OrthographicCamera) {
+      camera.left = width / -2
+      camera.right = width / 2
+      camera.top = height / 2
+      camera.bottom = height / -2
+      camera.updateProjectionMatrix()
+    }
+    renderer.setSize(width, height)
+    break
+  }
+}
+
+watch(() => state.camera.position.y, (newVal) => {
+  if (state.ready) {
+    updateGridVisibility()
+  }
+}, { deep: true })
+
+/**
+ * 根据可视化范围更新网格的透明度
+ */
+function updateGridVisibility() {
+  const cameraDistance = state.camera.position.y
+  const maxVisibleDistance = 60 // 网格完全可见的最大距离
+  const fadeStartDistance = 10  // 开始淡出的距离
+
+  // 计算透明度（0~1）
+  let opacity = 1
+  if (cameraDistance > fadeStartDistance) {
+    opacity = 1 - Math.min((cameraDistance - fadeStartDistance) / (maxVisibleDistance - fadeStartDistance), 1)
+  }
+
+  // 修改网格材质透明度
+  gridHelper.material.opacity = opacity
+  gridHelper.material.transparent = opacity < 1
+  console.log('opacity', opacity)
+}
+
+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()
+      }
+    })
+
+    // 清空场景
+    scene.children = []
+  }
+
+  if (statsControls) {
+    statsControls.dom.remove()
+  }
+
+  if (renderer) {
+    renderer.dispose()
+    renderer.forceContextLoss()
+    console.log('WebGL disposed, memory:', renderer.info.memory)
+    renderer.domElement = null
+  }
+}
+
+function getEffectiveViewDistance() {
+  // 1. 获取相机到目标的距离
+  const targetDistance = controls.target.distanceTo(camera.position)
+
+  // 2. 计算当前视口高度（世界单位）
+  const viewHeight = (camera.top - camera.bottom) / camera.zoom
+
+  // 3. 计算等效的透视相机距离
+  // 假设我们希望匹配一个虚拟的透视相机（通常使用45度fov作为参考）
+  const referenceFOV = 45 // 参考视场角
+  return viewHeight / (2 * Math.tan(THREE.MathUtils.degToRad(referenceFOV) / 2))
+}
+
+function syncCameraState() {
+  if (camera) {
+    state.camera.position.x = camera.position.x
+    state.camera.position.y = getEffectiveViewDistance()
+    state.camera.position.z = camera.position.z
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/designer/model3DView/Model3DView.vue b/src/designer/model3DView/Model3DView.vue
new file mode 100644
index 0000000..6e03d30
--- /dev/null
+++ b/src/designer/model3DView/Model3DView.vue
@@ -0,0 +1,744 @@
+<template>
+  <div class="model3d-view">
+    <el-space :gutter="10" class="toolbar">
+      <el-upload :on-change="handleFileChange"
+                 :show-file-list="false" accept=".fbx,.obj,.mtl,.3ds" action="" :auto-upload="false">
+        <el-button type="primary">打开模型</el-button>
+      </el-upload>
+      <el-upload :on-change="handleTextureUpload"
+                 :show-file-list="false" accept=".png,.jpg,.jpeg" action="" :auto-upload="false"
+                 list-type="picture">
+        <el-button>打开贴图</el-button>
+      </el-upload>
+      <el-upload :on-change="handleMtlUpload"
+                 :show-file-list="false" accept=".mtl" action="" :auto-upload="false"
+                 list-type="picture">
+        <el-button>打开材质</el-button>
+      </el-upload>
+      <div class="demo-color-block">
+        <span class="demonstration">材质颜色</span>
+        <el-color-picker v-model="restate.targetColor" />
+      </div>
+      <!-- 按 1:1 / 1:0.001 比例 -->
+      <div class="demo-color-block">
+        <span class="demonstration">默认比例</span>
+        <el-radio-group v-model="restate.loadScale">
+          <el-radio-button label="1" :value="1" />
+          <el-radio-button label="0.01" :value="0.01" />
+          <el-radio-button label="0.001" :value="0.001" />
+        </el-radio-group>
+      </div>
+      <div class="demo-color-block">
+        <span class="demonstration">物体数:<el-text type="danger">{{ restate.objects }}</el-text></span>
+        <span class="demonstration"> 顶点数:<el-text type="danger">{{ restate.vertices }}</el-text></span>
+        <span class="demonstration"> 三角形数:<el-text type="danger">{{ restate.faces }}</el-text></span>
+      </div>
+    </el-space>
+    <div class="main-content">
+      <Split class="model3d-content" :direction="'horizontal'">
+        <SplitArea class="model3d-canvas" :size="70">
+          <!-- Three.js 渲染画布 -->
+          <div class="canvas-container" ref="canvasContainer">
+            <div class="canvas-left-toolbar">
+              <button class="Button" :class="{selected:(restate.mode==='translate')}" title="平移"
+                      @mousedown="restate.mode='translate'">
+                <component :is="renderIcon('element Rank')" />
+              </button>
+              <button class="Button" :class="{selected:(restate.mode==='rotate')}" title="旋转"
+                      @mousedown="restate.mode='rotate'">
+                <component :is="renderIcon('element RefreshLeft')" />
+              </button>
+              <button class="Button" :class="{selected:(restate.mode==='scale')}" title="缩放"
+                      @mousedown="restate.mode='scale'">
+                <component :is="renderIcon('element ScaleToOriginal')" />
+              </button>
+            </div>
+          </div>
+        </SplitArea>
+        <SplitArea class="model3d-gui" :size="30">
+          <div class="model3d-gui-wrap">
+            <!-- 右侧面板 -->
+            <div class="gui-toolbar">
+              <TransformEdit ref="transformEditCtl" />
+            </div>
+            <div class="gui-panel" ref="guiPanel"></div>
+          </div>
+        </SplitArea>
+      </Split>
+    </div>
+  </div>
+</template>
+<script setup>
+import TransformEdit from '@/components/propertyEdit/TransformEdit.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'
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
+import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
+import { TDSLoader } from 'three/examples/jsm/loaders/TDSLoader'
+import * as dat from 'three/examples/jsm/libs/lil-gui.module.min.js'
+import Stats from 'three/examples/jsm/libs/stats.module'
+import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js'
+import Split from '@/components/split/split.vue'
+import SplitArea from '@/components/split/split-area.vue'
+import { renderIcon } from '@/utils/webutils.js'
+
+// DOM refs
+const canvasContainer = ref(null)
+const guiPanel = ref(null)
+const transformEditCtl = ref(null)
+
+// Three.js 场景相关
+let scene, camera, renderer, controls
+let statsControls, axesHelper, gridHelper
+let gui, tcontrols, modelGroup, resizeObserver
+
+const restate = reactive({
+  targetColor: '#ff0000',
+  loadScale: 1,
+  mode: 'translate',
+  objects: 0,
+  vertices: 0,
+  faces: 0
+})
+
+// 状态变量
+const state = {
+  showAxesHelper: true,
+  showGridHelper: true,
+  camera: {
+    position: { x: 0, y: 5, z: 10 },
+    rotation: { x: 0, y: 0, z: 0 }
+  }
+}
+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) => {
+      if (child.isMesh && child.material?.color) {
+        child.material.color.set(newVal)
+        child.material.needsUpdate = true
+      }
+    })
+  }
+})
+
+watch(() => restate.mode, (newVal) => {
+  if (tcontrols) {
+    tcontrols.setMode(newVal)
+  }
+})
+
+function initThree() {
+  const viewerDom = canvasContainer.value
+
+  // 场景
+  scene = new THREE.Scene()
+  scene.background = new THREE.Color(0xeeeeee)
+
+  // 渲染器
+  renderer = new THREE.WebGLRenderer({
+    logarithmicDepthBuffer: true,
+    antialias: true,
+    physicallyCorrectLights: true,
+    outputEncoding: THREE.SRGBColorSpace,
+    alpha: true,
+    precision: 'mediump',
+    premultipliedAlpha: true,
+    preserveDrawingBuffer: false,
+    powerPreference: 'high-performance'
+  })
+  renderer.clearDepth()
+  renderer.shadowMap.enabled = true
+  renderer.toneMapping = THREE.ACESFilmicToneMapping
+  renderer.setPixelRatio(window.devicePixelRatio)
+  renderer.setSize(viewerDom.getBoundingClientRect().width, viewerDom.getBoundingClientRect().height)
+  viewerDom.appendChild(renderer.domElement)
+
+  // 摄像机
+  initMode3DCamera()
+
+  // 辅助线
+  axesHelper = new THREE.AxesHelper(5)
+  scene.add(axesHelper)
+
+  gridHelper = new THREE.GridHelper(40, 40)
+  scene.add(gridHelper)
+
+  // 光照
+  const ambientLight = new THREE.AmbientLight(0xffffff, 1.5)
+  scene.add(ambientLight)
+
+  const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5)
+  directionalLight.position.set(5, 5, 5).multiplyScalar(3)
+  directionalLight.castShadow = true
+  scene.add(directionalLight)
+
+  const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1)
+  scene.add(hemisphereLight)
+
+
+  // 性能监控
+  statsControls = new Stats()
+  statsControls.showPanel(0)
+  statsControls.dom.style.position = 'absolute'
+  statsControls.dom.style.bottom = '5px'
+  statsControls.dom.style.left = '5px'
+  statsControls.dom.style.top = 'unset'
+  viewerDom.appendChild(statsControls.dom)
+
+  // // 创建几何体和材质
+  // const geometry = new THREE.BoxGeometry(1, 1, 1)
+  // const material = new THREE.MeshStandardMaterial({
+  //   color: 0xcccccc,
+  //   metalness: 0.9,
+  //   roughness: 0.1
+  // })
+  //
+  // const cube = new THREE.Mesh(geometry, material)
+  // scene.add(cube)
+  // camera.position.z = 5
+
+  animate()
+
+  // 转换控制器 TransformControls
+  tcontrols = new TransformControls(camera, renderer.domElement)
+  tcontrols.addEventListener('change', () => {
+    renderer.render(scene, camera)
+    transformEditCtl.value?.refreshData()
+  })
+  tcontrols.addEventListener('dragging-changed', function(event) {
+    controls.enabled = !event.value
+  })
+  tcontrols.setMode('translate')
+  // tcontrols.size = 1
+  // tcontrols.space = 'local'
+  scene.add(tcontrols.getHelper())
+}
+
+// 动画循环
+function animate() {
+  requestAnimationFrame(animate)
+  renderView()
+}
+
+function initGUI() {
+  const guiDom = guiPanel.value
+
+  gui = new dat.GUI({ autoPlace: false })
+  guiDom.appendChild(gui.domElement)
+
+  // 显示辅助线
+  gui.add(state, 'showAxesHelper').name('显示坐标轴').onChange(val => {
+    axesHelper.visible = val
+  })
+
+  gui.add(state, 'showGridHelper').name('显示网格').onChange(val => {
+    gridHelper.visible = val
+  })
+
+  // Position
+  const cameraPosFolder = gui.addFolder('摄像机位置')
+  cameraPosFolder.add(state.camera.position, 'x', -100, 100).step(0.1).listen().onChange(val => {
+    camera.position.x = val
+  })
+  cameraPosFolder.add(state.camera.position, 'y', -100, 100).step(0.1).listen().onChange(val => {
+    camera.position.y = val
+  })
+  cameraPosFolder.add(state.camera.position, 'z', -100, 100).step(0.1).listen().onChange(val => {
+    camera.position.z = val
+  })
+  cameraPosFolder.close()
+
+  // Rotation (in radians)
+  const cameraRotationFolder = gui.addFolder('摄像机旋转角')
+  cameraRotationFolder.add(state.camera.rotation, 'x', -Math.PI, Math.PI).listen().onChange(val => {
+    camera.rotation.x = val
+  })
+  cameraRotationFolder.add(state.camera.rotation, 'y', -Math.PI, Math.PI).listen().onChange(val => {
+    camera.rotation.y = val
+  })
+  cameraRotationFolder.add(state.camera.rotation, 'z', -Math.PI, Math.PI).listen().onChange(val => {
+    camera.rotation.z = val
+  })
+  cameraRotationFolder.close()
+
+  // 相机位置
+  // const cameraFolder = gui.addFolder('相机位置')
+  // cameraFolder.add(state.cameraPosition, 0, -10, 10).name('X')
+  // cameraFolder.add(state.cameraPosition, 1, -10, 10).name('Y')
+  // cameraFolder.add(state.cameraPosition, 2, 5, 30).name('Z').onChange(() => {
+  //   camera.position.set(...state.cameraPosition)
+  // })
+  // cameraFolder.open()
+}
+
+function handleResize(entries) {
+  for (let entry of entries) {
+    // entry.contentRect包含了元素的尺寸信息
+    console.log('Element size changed:', entry.contentRect)
+
+    const width = entry.contentRect.width
+    const height = entry.contentRect.height
+
+    if (camera instanceof THREE.PerspectiveCamera) {
+      camera.aspect = width / height
+      camera.updateProjectionMatrix()
+
+    } else if (camera instanceof THREE.OrthographicCamera) {
+      camera.left = width / -2
+      camera.right = width / 2
+      camera.top = height / 2
+      camera.bottom = height / -2
+      camera.updateProjectionMatrix()
+    }
+    renderer.setSize(width, height)
+    break
+  }
+}
+
+function initMode2DCamera() {
+  // const controlsNew = new OrbitControls(
+  //   cameraNew,
+  //   renderer?.domElement
+  // )
+  // controlsNew.enableDamping = false
+  // controlsNew.enableZoom = true
+  // controlsNew.enableRotate = false
+  // controlsNew.mouseButtons = { LEFT: THREE.MOUSE.PAN, RIGHT: THREE.MOUSE.ROTATE } // 鼠标中键平移
+  // controlsNew.screenSpacePanning = false // 定义平移时如何平移相机的位置 控制不上下移动
+  // controlsNew.keys = { LEFT: 'KeyA', UP: 'KeyW', RIGHT: 'KeyD', BOTTOM: 'KeyS' }
+  // controlsNew.listenToKeyEvents(viewerDom) // 监听键盘事件
+  // controlsNew.panSpeed = 1
+  // controlsNew.keyPanSpeed = 20 // normal 7
+  // controlsNew.minDistance = 0.1
+  // controlsNew.maxDistance = 1000
+}
+
+function initMode3DCamera() {
+  if (camera) {
+    scene.remove(camera)
+  }
+
+  const viewerDom = canvasContainer.value
+
+  // 渲染相机
+  const cameraNew = new THREE.PerspectiveCamera(25, viewerDom.clientWidth / viewerDom.clientHeight, 0.1, 2000)
+  //设置相机位置
+  // cameraNew.position.set(4, 2, -3);
+  // cameraNew.position.set(30, 30, 30)
+  cameraNew.position.set(5, 5, 5)
+  // 2.4,30,1.5;
+  // cameraNew.position.set(2.4, 20, 1.5)
+  //设置相机方向
+  cameraNew.lookAt(0, 0, 0)
+  // -1.57,0,1.57
+  // cameraNew.rotation.set(-1.57, 0, 1.57)
+
+  camera = cameraNew
+  scene.add(camera)
+
+  const controlsNew = new OrbitControls(camera, viewerDom)
+  controlsNew.mouseButtons = { LEFT: THREE.MOUSE.PAN, RIGHT: THREE.MOUSE.ROTATE } // 鼠标中键平移
+  controlsNew.enableDamping = false
+  controlsNew.screenSpacePanning = false // 定义平移时如何平移相机的位置 控制不上下移动
+  controlsNew.minDistance = 2
+  controls = controlsNew
+  controls.update()
+
+  camera.updateProjectionMatrix()
+
+  reloadState()
+}
+
+function reloadState() {
+  if (camera) {
+    state.camera.position.x = camera.position.x
+    state.camera.position.y = camera.position.y
+    state.camera.position.z = camera.position.z
+
+    state.camera.rotation.x = camera.rotation.x
+    state.camera.rotation.y = camera.rotation.y
+    state.camera.rotation.z = camera.rotation.z
+  }
+}
+
+function renderView() {
+  statsControls?.update()
+  renderer?.render(scene, camera)
+
+  if (camera) {
+    // 同步相机位置和旋转到 cameraTransform 对象
+    state.camera.position.x = camera.position.x
+    state.camera.position.y = camera.position.y
+    state.camera.position.z = camera.position.z
+
+    state.camera.rotation.x = camera.rotation.x
+    state.camera.rotation.y = camera.rotation.y
+    state.camera.rotation.z = camera.rotation.z
+  }
+}
+
+function handleTextureUpload(file) {
+  console.log('file', file)
+  if (!file) return
+
+  file = file.raw
+
+  // 移除旧模型
+  cleaupModel()
+
+  const fileName = file.name.toLowerCase()
+  const reader = new FileReader()
+  reader.onerror = (error) => {
+    system.showErrorDialog('加载文件失败', error.toString())
+    system.clearLoading()
+  }
+
+  if (fileName.endsWith('.png') || fileName.endsWith('.jpg') || fileName.endsWith('.jpeg')) {
+    reader.onload = () => {
+      // const textureLoader = new THREE.TextureLoader()
+      // const texture = textureLoader.load(reader.result)
+      // tcontrols.setTexture(texture)
+      // system.clearLoading()
+      const texture = new THREE.TextureLoader().load(reader.result)
+
+      // 假设模型的所有网格都应用相同的材质
+      modelGroup.traverse(function(child) {
+        if (child.isMesh) {
+          child.material.map = texture
+          child.material.needsUpdate = true
+        }
+      })
+    }
+    reader.readAsDataURL(file)
+  } else {
+    alert('不支持的文件类型！')
+  }
+}
+
+let lastObjfile = undefined
+
+function handleMtlUpload(file) {
+  console.log('file', file)
+  if (!file) return
+
+  file = file.raw
+
+  // 移除旧模型
+  cleaupModel()
+
+  const fileName = file.name.toLowerCase()
+  const reader = new FileReader()
+  reader.onerror = (error) => {
+    system.showErrorDialog('加载文件失败', error.toString())
+    system.clearLoading()
+  }
+
+  if (fileName.endsWith('.mtl')) {
+    reader.onload = () => {
+      const mtlLoader = new MTLLoader()
+      mtlLoader.load(reader.result, (materials) => {
+        materials.preload()
+
+        const objLoader = new OBJLoader()
+        objLoader.setMaterials(materials)
+        const content = objLoader.parse(lastObjfile)
+        addGroupToScene(content)
+      })
+    }
+    reader.readAsText(file)
+  } else {
+    alert('不支持的文件类型！')
+  }
+}
+
+function addGroupToScene(group) {
+  modelGroup = group
+  if (restate.loadScale) {
+    // 设置默认模型缩放
+    modelGroup.scale.set(restate.loadScale, restate.loadScale, restate.loadScale)
+  }
+  scene.add(modelGroup)
+  tcontrols.attach(modelGroup)
+  transformEditCtl.value?.attachObject3D(modelGroup)
+
+  controls.target.copy(modelGroup.position)
+  controls.update()
+
+  // 遍历场景中的所有对象
+  let totalObjects = 0
+  let totalVertices = 0
+  let totalFaces = 0
+  modelGroup.traverse(function(child) {
+    if (child.isMesh) {
+      totalObjects++
+
+      // 获取几何体
+      const geometry = child.geometry
+
+      // 如果几何体是 BufferGeometry 类型
+      if (geometry.isBufferGeometry) {
+        // 计算顶点数
+        if (geometry.attributes.position) {
+          totalVertices += geometry.attributes.position.count
+        }
+
+        // 计算面数（假设每个面都是由三个顶点组成的三角形）
+        if (geometry.index) {
+          totalFaces += geometry.index.count / 3
+        } else if (geometry.attributes.position) {
+          // 如果没有索引，计算非索引几何体的面数
+          totalFaces += geometry.attributes.position.count / 3
+        }
+      }
+      // 如果几何体是 Geometry 类型（较旧的版本使用）
+      else if (geometry.isGeometry) {
+        // 计算顶点数
+        totalVertices += geometry.vertices.length
+
+        // 计算面数
+        totalFaces += geometry.faces.length
+      }
+    }
+  })
+  restate.objects = totalObjects
+  restate.vertices = totalVertices
+  restate.faces = totalFaces
+}
+
+function handleFileChange(file) {
+  console.log('file', file)
+  if (!file) return
+
+  file = file.raw
+
+  // 移除旧模型
+  cleaupModel()
+
+  const fileName = file.name.toLowerCase()
+  const reader = new FileReader()
+  reader.onerror = (error) => {
+    system.showErrorDialog('加载文件失败', error.toString())
+    system.clearLoading()
+  }
+
+  if (fileName.endsWith('.fbx')) {
+    system.showLoading()
+    reader.onload = () => {
+      const loader = new FBXLoader()
+      const arrayBuffer = reader.result
+      const content = loader.parse(arrayBuffer, '')
+      addGroupToScene(content)
+
+      system.clearLoading()
+    }
+    reader.readAsArrayBuffer(file)
+
+  } else if (fileName.endsWith('.obj')) {
+    reader.readAsText(file)
+    reader.onload = () => {
+      const loader = new OBJLoader()
+      lastObjfile = reader.result
+      //@ts-ignore
+      const content = loader.parse(reader.result)
+      addGroupToScene(content)
+
+      system.clearLoading()
+    }
+
+  } else if (fileName.endsWith('.3ds')) {
+    reader.onload = () => {
+      const loader = new TDSLoader()
+      const arrayBuffer = reader.result
+      //@ts-ignore
+      const content = loader.parse(arrayBuffer, '')
+      addGroupToScene(content)
+
+      system.clearLoading()
+    }
+    reader.readAsArrayBuffer(file)
+
+  } else {
+    alert('不支持的文件类型！')
+  }
+}
+
+
+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 {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+
+  .canvas-left-toolbar {
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    width: 32px;
+    background: #eee;
+    text-align: center;
+
+    button {
+      color: #555;
+      background-color: #ddd;
+      border: 0;
+      margin: 0;
+      padding: 5px 8px;
+      font-size: 12px;
+      text-transform: uppercase;
+      cursor: pointer;
+      outline: none;
+    }
+
+    button.selected {
+      background-color: #fff;
+    }
+  }
+
+  .toolbar {
+    padding: 10px;
+    background: #f5f5f5;
+    border-bottom: 1px solid #ccc;
+  }
+
+  .dialog-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+
+  .main-content {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+
+    .model3d-content {
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+    }
+  }
+
+  .canvas-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .model3d-gui-wrap {
+    border-left: 1px solid #ccc;
+    background: #111;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  .gui-panel {
+    :deep(.lil-gui.root) {
+      width: 100%;
+    }
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/ModelMain.less b/src/views/ModelMain.less
index 08a8438..9e89c35 100644
--- a/src/views/ModelMain.less
+++ b/src/views/ModelMain.less
@@ -1,271 +1,329 @@
-.app-wrap{
+.app-wrap {
   height: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  .app-header{
-    height:50px;
+
+  .app-header {
+    height: 50px;
     background: #545c64;
     flex-shrink: 0;
     display: flex;
     flex-direction: row;
     overflow: hidden;
-    .logo{
+
+    .logo {
       display: flex;
       align-items: center;
       margin: 0 20px;
     }
-    .app-header-menu-wrap{
-      flex:1;
+
+    .app-header-menu-wrap {
+      flex: 1;
       display: flex;
       flex-direction: row;
-      .app-header-menu{
+
+      .app-header-menu {
         height: 100%;
-        padding:0 16px;
-        color:#fff;
+        padding: 0 16px;
+        color: #fff;
         display: flex;
         align-items: center;
         cursor: pointer;
-        .el-icon{
-          margin-left:8px;
+
+        .el-icon {
+          margin-left: 8px;
           font-size: 12px;
         }
-        &:hover{
+
+        &:hover {
           background-color: #494d52;
           color: #fff
         }
       }
     }
-    .user{
+
+    .user {
       display: flex;
       flex-direction: row;
       align-items: center;
       margin-right: 10px;
-      &>span{
+
+      & > span {
         display: inline-flex;
-        padding:5px;
+        padding: 5px;
         background: #f4c521;
-        border-radius:15px;
-        color:#fff;
+        border-radius: 15px;
+        color: #fff;
       }
     }
   }
-  .app-section{
-    flex:1;
+
+  .app-section {
+    flex: 1;
     display: flex;
     flex-direction: row;
     overflow: hidden;
-    .btns-toolbar{
+
+    .btns-toolbar {
       display: flex;
       flex-direction: column;
-      .btns{
-        .item{
+
+      .btns {
+        .item {
           height: 48px;
           line-height: 48px;
           text-align: center;
           cursor: pointer;
           font-size: 26px;
-          &:hover{
+
+          &:hover {
             background: #cccccc;
           }
-          &.selected{
+
+          &.selected {
             background: #e8e8e8;
             position: relative;
-            &:before{
+
+            &:before {
               content: '';
               position: absolute;
               width: 3px;
               height: 100%;
               background: #f4c521;
-              left:0;
-              top:0;
+              left: 0;
+              top: 0;
             }
           }
         }
       }
-      .btns-top{
-        flex:1;
+
+      .btns-top {
+        flex: 1;
       }
-      .btns-bottom{
+
+      .btns-bottom {
 
       }
     }
-    .btns-toolbar-left{
+
+    .btns-toolbar-left {
       flex-shrink: 0;
-      width:50px;
-      border-right:1px solid #dcdcdc
+      width: 50px;
+      border-right: 1px solid #dcdcdc
     }
-    .btns-toolbar-right{
+
+    .btns-toolbar-right {
       flex-shrink: 0;
-      width:50px;
-      border-left:1px solid #dcdcdc;
-      &.btns-toolbar{
-        .btns .item.selected:before{
-          right:0;
-          left:auto;
+      width: 50px;
+      border-left: 1px solid #dcdcdc;
+
+      &.btns-toolbar {
+        .btns .item.selected:before {
+          right: 0;
+          left: auto;
         }
       }
     }
-    .section{
-      flex:1;
+
+    .section {
+      flex: 1;
       overflow: hidden;
-      .section-item-wrap{
+
+      .section-item-wrap {
         height: 100%;
         display: flex;
         flex-direction: column;
-        &>.title{
-          border-bottom:1px solid #dcdcdc;
+
+        & > .title {
+          border-bottom: 1px solid #dcdcdc;
           height: 35px;
           line-height: 35px;
-          padding:0 0 0 10px;
+          padding: 0 0 0 10px;
           font-size: 14px;
           position: relative;
           display: flex;
           align-items: center;
-          &>.el-icon{
-            margin-right:3px;
+
+          & > .el-icon {
+            margin-right: 3px;
             position: relative;
-            top:1px;
+            top: 1px;
           }
-          &>.el-input{
-            flex:1;
-            margin:0 30px 0 10px;
+
+          & > .el-input {
+            flex: 1;
+            margin: 0 30px 0 10px;
           }
-          .close{
+
+          .close {
             position: absolute;
-            right:0;
+            right: 0;
             display: inline-flex;
-            padding:10px;
-            cursor:pointer;
-            &:hover{
-              color:var(--el-color-primary)
+            padding: 10px;
+            cursor: pointer;
+
+            &:hover {
+              color: var(--el-color-primary)
             }
           }
         }
-        .calc-left-panel{
-          flex:1;
+
+        .calc-left-panel {
+          flex: 1;
           overflow: auto;
         }
-        .calc-right-panel{
-          flex:1;
+
+        .calc-right-panel {
+          flex: 1;
           overflow: auto;
         }
-        .calc-bottom-panel{
-          flex:1;
+
+        .calc-bottom-panel {
+          flex: 1;
           overflow: auto;
         }
       }
-      .section-bottom{
-        .section-item-wrap{
-          &>.title >.el-input{
-            flex:none;
+
+      .section-bottom {
+        .section-item-wrap {
+          & > .title > .el-input {
+            flex: none;
           }
         }
       }
-      .section-tabs.el-tabs--card{
+
+      .section-tabs.el-tabs--card {
         height: 100%;
-        &>.el-tabs__header{
+
+        & > .el-tabs__header {
           box-sizing: border-box;
           z-index: 0;
-          margin:0;
-          &>.el-tabs__nav-wrap{
-            margin-bottom:0
+          margin: 0;
+
+          & > .el-tabs__nav-wrap {
+            margin-bottom: 0
           }
-          .el-tabs__item.is-active{
+
+          .el-tabs__item.is-active {
             position: relative;
             z-index: 1;
-            &:before{
+
+            &:before {
               content: '';
               width: 100%;
               height: 1px;
               background: #c61429;
               position: absolute;
-              left:0;
-              top:0;
+              left: 0;
+              top: 0;
               z-index: 999;
             }
-            &:after{
+
+            &:after {
               content: '';
               width: 100%;
               height: 1px;
               background: #fff;
               position: absolute;
-              left:0;
-              bottom:0;
+              left: 0;
+              bottom: 0;
               z-index: 999;
             }
-            &:hover{
-              &:after{
-                background:#c5c5c5;
+
+            &:hover {
+              &:after {
+                background: #c5c5c5;
               }
             }
           }
-          .el-tabs__item{
-            border-bottom:0;
+
+          .el-tabs__item {
+            border-bottom: 0;
           }
-          .el-tabs__nav-prev{
+
+          .el-tabs__nav-prev {
             height: 40px;
             background: #c9c9c9;
-            .el-icon{
-              color:#c61429
+
+            .el-icon {
+              color: #c61429
             }
           }
-          .el-tabs__nav-next{
+
+          .el-tabs__nav-next {
             height: 40px;
             background: #c9c9c9;
-            .el-icon{
-              color:#c61429
+
+            .el-icon {
+              color: #c61429
             }
           }
         }
-        &>.el-tabs__content{
-          flex:1;
-          &>.el-tab-pane{
+
+        & > .el-tabs__content {
+          flex: 1;
+
+          & > .el-tab-pane {
             height: 100%;
           }
-          .section-canvas{
+
+          .section-canvas {
             height: 100%;
             display: flex;
             flex-direction: column;
-            .section-toolbar{
+
+            .section-toolbar {
               flex-shrink: 0;
               height: 30px;
               display: flex;
               align-items: center;
-              .el-button{
+
+              .el-button {
                 margin-left: 5px;
               }
-              .section-toolbar-line{
+
+              .section-toolbar-line {
                 width: 1px;
                 height: 16px;
                 background: #dcdcdc;
-                margin:0 5px;
+                margin: 0 5px;
               }
-              &.section-bottom-toolbar{
+
+              &.section-bottom-toolbar {
                 justify-content: space-between;
-                .section-toolbar-left{
+
+                .section-toolbar-left {
                   display: flex;
                   align-items: center;
                 }
-                .section-toolbar-right{
+
+                .section-toolbar-right {
                   display: flex;
                   flex-direction: row;
                   align-items: center;
-                  .infor{
+
+                  .infor {
                     background: #000;
-                    margin:0 5px;
-                    color:#fff;
+                    margin: 0 5px;
+                    color: #fff;
                     font-size: 12px;
                     min-width: 120px;
                     text-align: center;
-                    padding:3px 5px;
+                    padding: 3px 5px;
                   }
                 }
               }
             }
-            .section-content{
-              flex:1;
+
+            .section-content {
+              flex: 1;
               background: #e0e0e0;
+              display: flex;
+
+              & > .canvas-container {
+                flex: 1;
+              }
             }
           }
         }
@@ -274,20 +332,22 @@
   }
 }
 
-.el-popper .el-divider--horizontal{
-  margin:5px 0;
-  border-color:#656668
+.el-popper .el-divider--horizontal {
+  margin: 5px 0;
+  border-color: #656668
 }
 
-.model-3d-view-wrap.el-dialog.resize-dialog{
-  padding:0!important;
-  .el-dialog__footer{
+.model-3d-view-wrap.el-dialog.resize-dialog {
+  padding: 0 !important;
+
+  .el-dialog__footer {
     //padding-top:8px;
     display: none;
   }
-  .el-dialog__header{
+
+  .el-dialog__header {
     display: flex;
     align-items: center;
-    padding:8px 0 8px 8px;
+    padding: 8px 0 8px 8px;
   }
 }
\ No newline at end of file
diff --git a/src/views/ModelMain.vue b/src/views/ModelMain.vue
index f3ff126..8f542be 100644
--- a/src/views/ModelMain.vue
+++ b/src/views/ModelMain.vue
@@ -98,16 +98,16 @@
   </div>
 </template>
 <script>
+import Logo from '@/assets/images/logo.png'
+import './ModelMain.less'
+
 import { renderIcon } from '@/utils/webutils.js'
 import Split from '@/components/split/split.vue'
 import SplitArea from '@/components/split/split-area.vue'
-
-import Logo from '@/assets/images/logo.png'
-import './ModelMain.less'
 import { ModelMainInit, ModelMainMounted, ModelMainUnmounted } from '@/views/ModelMainInit.js'
 import { getRootMenu } from '@/runtime/DefineMenu.js'
 import { getWidgetByName, getWidgetBySide, getAllWidget } from '@/runtime/DefineWidget.js'
-import Model2DEditor from '@/designer/Model2DEditor.vue'
+import Model2DEditor from '@/designer/model2DEditor/Model2DEditor.vue'
 import ModelView from '@/designer/ModelView.vue'
 import { normalizeShortKey } from '@/utils/webutils.ts'