diff --git a/src/designer/model2DEditor/Model2DEditor.vue b/src/designer/model2DEditor/Model2DEditor.vue
index aa39203..92bf123 100644
--- a/src/designer/model2DEditor/Model2DEditor.vue
+++ b/src/designer/model2DEditor/Model2DEditor.vue
@@ -45,10 +45,12 @@
00001
00011
+
{{ editorState.camera.position.x.toFixed(2) }},{{ editorState.camera.position.y.toFixed(2) }},{{ editorState.camera.position.z.toFixed(2)
}}
+
X=14.091,Y=12.397
diff --git a/src/designer/model2DEditor/ThreeJsEditor.vue b/src/designer/model2DEditor/ThreeJsEditor.vue
index 8dd8709..baa095a 100644
--- a/src/designer/model2DEditor/ThreeJsEditor.vue
+++ b/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