diff --git a/package.json b/package.json
index dbf7f92..c900836 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,6 @@
     "pinia": "^3.0.1",
     "sortablejs": "1.15.6",
     "split.js": "^1.6.4",
-    "three": "^0.176.0",
     "vue": "^3.5.13",
     "vue-i18n": "9.2.2",
     "vue-router": "^4.5.0",
@@ -55,6 +54,8 @@
     "typescript": "~5.8.0",
     "vite": "^6.2.4",
     "vite-plugin-vue-devtools": "^7.7.2",
-    "vue-tsc": "^2.2.8"
+    "vue-tsc": "^2.2.8",
+    "three": "^0.176.0",
+    "camera-controls": "2.10.1"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d65f3a1..59fabd5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,9 +62,6 @@ importers:
       split.js:
         specifier: ^1.6.4
         version: 1.6.5
-      three:
-        specifier: ^0.176.0
-        version: 0.176.0
       vue:
         specifier: ^3.5.13
         version: 3.5.14(typescript@5.8.3)
@@ -114,6 +111,9 @@ importers:
       '@vue/tsconfig':
         specifier: ^0.7.0
         version: 0.7.0(typescript@5.8.3)(vue@3.5.14(typescript@5.8.3))
+      camera-controls:
+        specifier: 2.10.1
+        version: 2.10.1(three@0.176.0)
       npm-run-all2:
         specifier: ^7.0.2
         version: 7.0.2
@@ -123,6 +123,9 @@ importers:
       rimraf:
         specifier: ^6.0.1
         version: 6.0.1
+      three:
+        specifier: ^0.176.0
+        version: 0.176.0
       typescript:
         specifier: ~5.8.0
         version: 5.8.3
@@ -543,67 +546,56 @@ packages:
     resolution: {integrity: sha512-46OzWeqEVQyX3N2/QdiU/CMXYDH/lSHpgfBkuhl3igpZiaB3ZIfSjKuOnybFVBQzjsLwkus2mjaESy8H41SzvA==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.41.0':
     resolution: {integrity: sha512-lfgW3KtQP4YauqdPpcUZHPcqQXmTmH4nYU0cplNeW583CMkAGjtImw4PKli09NFi2iQgChk4e9erkwlfYem6Lg==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.41.0':
     resolution: {integrity: sha512-nn8mEyzMbdEJzT7cwxgObuwviMx6kPRxzYiOl6o/o+ChQq23gfdlZcUNnt89lPhhz3BYsZ72rp0rxNqBSfqlqw==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.41.0':
     resolution: {integrity: sha512-l+QK99je2zUKGd31Gh+45c4pGDAqZSuWQiuRFCdHYC2CSiO47qUWsCcenrI6p22hvHZrDje9QjwSMAFL3iwXwQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loongarch64-gnu@4.41.0':
     resolution: {integrity: sha512-WbnJaxPv1gPIm6S8O/Wg+wfE/OzGSXlBMbOe4ie+zMyykMOeqmgD1BhPxZQuDqwUN+0T/xOFtL2RUWBspnZj3w==}
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.41.0':
     resolution: {integrity: sha512-eRDWR5t67/b2g8Q/S8XPi0YdbKcCs4WQ8vklNnUYLaSWF+Cbv2axZsp4jni6/j7eKvMLYCYdcsv8dcU+a6QNFg==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.41.0':
     resolution: {integrity: sha512-TWrZb6GF5jsEKG7T1IHwlLMDRy2f3DPqYldmIhnA2DVqvvhY2Ai184vZGgahRrg8k9UBWoSlHv+suRfTN7Ua4A==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.41.0':
     resolution: {integrity: sha512-ieQljaZKuJpmWvd8gW87ZmSFwid6AxMDk5bhONJ57U8zT77zpZ/TPKkU9HpnnFrM4zsgr4kiGuzbIbZTGi7u9A==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.41.0':
     resolution: {integrity: sha512-/L3pW48SxrWAlVsKCN0dGLB2bi8Nv8pr5S5ocSM+S0XCn5RCVCXqi8GVtHFsOBBCSeR+u9brV2zno5+mg3S4Aw==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.41.0':
     resolution: {integrity: sha512-XMLeKjyH8NsEDCRptf6LO8lJk23o9wvB+dJwcXMaH6ZQbbkHu2dbGIUindbMtRN6ux1xKi16iXWu6q9mu7gDhQ==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.41.0':
     resolution: {integrity: sha512-m/P7LycHZTvSQeXhFmgmdqEiTqSV80zn6xHaQ1JSqwCtD1YGtwEK515Qmy9DcB2HK4dOUVypQxvhVSy06cJPEg==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.41.0':
     resolution: {integrity: sha512-4yodtcOrFHpbomJGVEqZ8fzD4kfBeCbpsUy5Pqk4RluXOdsWdjLnjhiKy2w3qzcASWd04fp52Xz7JKarVJ5BTg==}
@@ -866,6 +858,11 @@ packages:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
 
+  camera-controls@2.10.1:
+    resolution: {integrity: sha512-KnaKdcvkBJ1Irbrzl8XD6WtZltkRjp869Jx8c0ujs9K+9WD+1D7ryBsCiVqJYUqt6i/HR5FxT7RLASieUD+Q5w==}
+    peerDependencies:
+      three: '>=0.126.1'
+
   caniuse-lite@1.0.30001718:
     resolution: {integrity: sha512-AflseV1ahcSunK53NfEs9gFWgOEmzr0f+kaMFA4xiLZlr9Hzt7HxcSpIFcnNCUkz6R6dWKa54rUz3HUmI3nVcw==}
 
@@ -2384,6 +2381,10 @@ snapshots:
       es-errors: 1.3.0
       function-bind: 1.1.2
 
+  camera-controls@2.10.1(three@0.176.0):
+    dependencies:
+      three: 0.176.0
+
   caniuse-lite@1.0.30001718: {}
 
   codemirror@5.65.19: {}
diff --git a/src/designer/Designer.ts b/src/designer/Designer.ts
deleted file mode 100644
index 58c78f7..0000000
--- a/src/designer/Designer.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import Example1 from './example1'
-import { markRaw, reactive } from 'vue'
-
-/**
- * 全局设计器
- */
-export default class Designer {
-
-  data: any = null
-  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()
-  }
-
-  init() {
-    window['designer'] = this
-  }
-
-  open() {
-    system.msg('打开成功')
-    this.data = markRaw(Example1)
-    this.allLevels = reactive(this.data.allLevels)
-  }
-}
\ No newline at end of file
diff --git a/src/designer/model2DEditor/ThreeJsEditor.vue b/src/designer/model2DEditor/ThreeJsEditor.vue
index b5d7589..b6a62c5 100644
--- a/src/designer/model2DEditor/ThreeJsEditor.vue
+++ b/src/designer/model2DEditor/ThreeJsEditor.vue
@@ -2,333 +2,48 @@
   <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'
+import { getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import Viewport from '@/designer/Viewport.ts'
 
 // DOM refs
-const canvasContainer = ref(null)
-
-// 窗口大小关联
-let resizeObserver
+const canvasContainer = ref<HTMLElement>(null)
 
 // 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(3)
-  scene.add(axesHelper)
-
-  gridHelper = new THREE.GridHelper(500, 500)
-  gridHelper.material = new THREE.LineBasicMaterial({
-    color: 0x888888,
-    opacity: 0.8,
-    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)
-}
+let viewport: Viewport
 
 onMounted(() => {
-  const editor = getCurrentInstance()
+  const instance = getCurrentInstance()
   nextTick(() => {
-    initThree()
-
     const viewerDom = canvasContainer.value
-    if (resizeObserver) {
-      resizeObserver.unobserve(viewerDom)
+    if (!viewerDom) {
+      system.showErrorDialog('viewerDom is null')
+      return
     }
-    resizeObserver = new ResizeObserver(handleResize)
-    resizeObserver.observe(viewerDom)
 
-    state.ready = true
+    viewport = new Viewport(worldModel)
+    viewport.initThree(viewerDom)
 
-    window['editor'] = editor
-    window['renderer'] = renderer
-    window['scene'] = scene
-    window['camera'] = camera
-    window['renderer'] = renderer
-    window['controls'] = controls
+    window['editor'] = instance
+    window['viewport'] = viewport
+    window['scene'] = viewport.scene
+    window['renderer'] = viewport.renderer
+    window['camera'] = viewport.camera
+    window['renderer'] = viewport.renderer
+    window['controls'] = viewport.controls
 
     viewerDom?.focus()
   })
 })
 
 onBeforeUnmount(() => {
-  state.ready = false
-
-  cleanupThree()
-
-  const viewerDom = canvasContainer.value
-  if (resizeObserver) {
-    resizeObserver.unobserve(viewerDom)
-  }
+  viewport.destroy()
 
   delete window['editor']
-  delete window['renderer']
+  delete window['viewport']
   delete window['scene']
+  delete window['renderer']
   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 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 updateGridVisibility() {
-  const cameraDistance = state.camera.position.y
-  const maxVisibleDistance = 60 // 网格完全可见的最大距离
-  const fadeStartDistance = 15  // 开始淡出的距离
-
-  // 计算透明度（0~1）
-  let opacity = 1
-  if (cameraDistance > fadeStartDistance) {
-    opacity = 1 - Math.min((cameraDistance - fadeStartDistance) / (maxVisibleDistance - fadeStartDistance), 1)
-  }
-
-  // 修改网格材质透明度
-  gridHelper.material.opacity = opacity
-  gridHelper.visible = opacity > 0
-  console.log('opacity', opacity)
-}
-
-/**
- * 计算相机到目标的有效视距
- */
-function getEffectiveViewDistance() {
-  if (!camera) {
-    return 10
-  }
-  const viewHeight = (camera.top - camera.bottom) / camera.zoom
-  // 假设我们希望匹配一个虚拟的透视相机（通常使用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/model2DEditor/tools/MouseMoveInspect.ts b/src/designer/model2DEditor/tools/MouseMoveInspect.ts
new file mode 100644
index 0000000..54349b5
--- /dev/null
+++ b/src/designer/model2DEditor/tools/MouseMoveInspect.ts
@@ -0,0 +1,16 @@
+import Editor from '@/designer/Editor.js'
+import type Viewport from '@/designer/Viewport.ts'
+
+/**
+ * 鼠标移动时，将鼠标位置的坐标转换为设计图上的坐标，并设置到 designer.mousePos 属性中
+ */
+export default class MouseMoveInspect {
+  viewport: Viewport
+
+  constructor(viewport: Viewport) {
+    this.viewport = viewport
+  }
+
+  mouseMove(event) {
+  }
+}
\ No newline at end of file
diff --git a/src/designer/model3DView/Model3DView.vue b/src/designer/model3DView/Model3DView.vue
index 39c74a1..728d3f9 100644
--- a/src/designer/model3DView/Model3DView.vue
+++ b/src/designer/model3DView/Model3DView.vue
@@ -322,11 +322,9 @@ function initMode3DCamera() {
 
   const viewerDom = canvasContainer.value
 
-  // 渲染相机
+  // ============================ 创建透视相机
   const cameraNew = new THREE.PerspectiveCamera(25, viewerDom.clientWidth / viewerDom.clientHeight, 0.1, 2000)
-  //设置相机位置
   cameraNew.position.set(5, 5, 5)
-  //设置相机方向
   cameraNew.lookAt(0, 0, 0)
 
   camera = cameraNew
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 7eadb54..7dac369 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -1,11 +1,12 @@
 import _ from 'lodash'
 import $ from 'jquery'
 import type System from '@/runtime/System'
-import type Designer from '@/designer/Designer'
+import type WorldModel from '@/designer/WorldModel'
 
 declare global {
   const $: $
   const _: _
   const system: System
-  const designer: Designer
+
+  const worldModel: WorldModel
 }
\ No newline at end of file