Model2DEditor

src/designer/model2DEditor/Model2DEditor.vue

@@ -45,10 +45,12 @@
         <el-text type="warning">00001</el-text>
         <span class="section-toolbar-line"></span>
         <el-text type="danger">00011</el-text>
+        <span class="section-toolbar-line"></span>
         <div v-if="editorState.ready">
           {{ editorState.camera.position.x.toFixed(2) }},{{ editorState.camera.position.y.toFixed(2) }},{{ editorState.camera.position.z.toFixed(2)
           }}
         </div>
+        <span class="section-toolbar-line"></span>
         <div class="infor">
           X=14.091,Y=12.397
         </div>

src/designer/model2DEditor/ThreeJsEditor.vue

@@ -104,13 +104,13 @@ function initThree() {
   initMode2DCamera()
 
   // 辅助线
-  axesHelper = new THREE.AxesHelper(5)
+  axesHelper = new THREE.AxesHelper(3)
   scene.add(axesHelper)
 
   gridHelper = new THREE.GridHelper(500, 500)
   gridHelper.material = new THREE.LineBasicMaterial({
     color: 0x888888,
-    opacity: 1,
+    opacity: 0.8,
     transparent: true
   })
 
@@ -237,26 +237,6 @@ watch(() => state.camera.position.y, (newVal) => {
   }
 }, { 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) {
@@ -307,6 +287,30 @@ function cleanupThree() {
   }
 }
 
+
+/**
+ * 根据可视化范围更新网格的透明度
+ */
+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() {
   // 1. 获取相机到目标的距离
   const targetDistance = controls.target.distanceTo(camera.position)
@@ -320,6 +324,9 @@ function getEffectiveViewDistance() {
   return viewHeight / (2 * Math.tan(THREE.MathUtils.degToRad(referenceFOV) / 2))
 }
 
+/**
+ * 同步相机状态到全局状态
+ */
 function syncCameraState() {
   if (camera) {
     state.camera.position.x = camera.position.x