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