QML 3D曲面图(Surface3D)技术

3D曲面图是科学计算和工程可视化中常用的图表类型,它通过起伏的曲面展示二维数据的变化趋势。Qt Data Visualization 模块中的 Surface3D 类型提供了强大的曲面可视化能力。

Surface3D 核心属性与方法

表:Surface3D主要属性与方法

属性/方法 类型 描述 示例
width real 曲面图宽度 width: parent.width
height real 曲面图高度 height: parent.height
selectionMode enum 选择模式(无/单项/行/列/行与列/切片) AbstractGraph3D.SelectionItem
shadowQuality enum 阴影质量(无/低/中/高/软低/软中/软高) AbstractGraph3D.ShadowQualityHigh
scene.activeCamera Q3DCamera 控制场景相机 scene.activeCamera.xRotation: 60.0
theme Theme3D 设置图表主题 theme: Theme3D { type: Theme3D.ThemeArmyBlue }
axisX Value3DAxis X轴配置 axisX: Value3DAxis { title: "经度"; min: -180; max: 180 }
axisY Value3DAxis Y轴配置 axisY: Value3DAxis { title: "高度"; min: 0; max: 10000 }
axisZ Value3DAxis Z轴配置 axisZ: Value3DAxis { title: "纬度"; min: -90; max: 90 }
flipHorizontalGrid bool 是否翻转水平网格 flipHorizontalGrid: true
surfaceSeries list 曲面系列列表 surfaceSeries: [heightMapSeries, temperatureSeries]
addSeries() method 添加曲面系列 surface3D.addSeries(newSeries)
removeSeries() method 移除曲面系列 surface3D.removeSeries(oldSeries)
release() method 释放资源 Component.onDestruction: surface3D.release()

基本曲面图实现

以下是一个完整的地形高度图示例,展示了如何使用Surface3D显示地理高程数据:

复制代码
import QtQuick
import QtQuick.Controls
import QtDataVisualization

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    
    Surface3D {
        id: surfaceGraph
        anchors.fill: parent
        theme: Theme3D { type: Theme3D.ThemeArmyBlue }
        
        // 设置坐标轴
        axisX: ValueAxis3D {
            title: "东西方向 (km)"
        }
        
        axisY: ValueAxis3D {
            title: "高度 (m)"
            min: 30
            max: 200
        }
        
        axisZ: ValueAxis3D {
            title: "南北方向 (km)"
        }
        
        // 添加曲面系列
        Surface3DSeries {
            id: terrainSeries
            itemLabelFormat: "(@xLabel km, @zLabel km): @yLabel m"
            drawMode: Surface3DSeries.DrawSurfaceAndWireframe
            flatShadingEnabled: false
            
            // 使用高度图数据代理
            HeightMapSurfaceDataProxy {
                id: heightMapProxy
                heightMapFile: ":/layer_1.png"
            }
            
            // 自定义渐变颜色
            baseGradient: ColorGradient {
                ColorGradientStop { position: 0.0; color: "#0000ff" }  // 深水区
                ColorGradientStop { position: 0.2; color: "#00ffff" }  // 浅水区
                ColorGradientStop { position: 0.25; color: "#00aa00" } // 海滩
                ColorGradientStop { position: 0.5; color: "#ffff00" }  // 平原
                ColorGradientStop { position: 0.75; color: "#aa5500" } // 山地
                ColorGradientStop { position: 1.0; color: "#ffffff" } // 雪山
            }
            
            // 网格线样式
            wireframeColor: "#555555"
        }
        
        // 相机初始位置
        scene.activeCamera.xRotation: 20.0
        scene.activeCamera.yRotation: 45.0
    }
    
    // 控制面板
    Row {
        anchors.top: parent.top
        anchors.right: parent.right
        spacing: 10
        padding: 10
        
        Button {
            text: "俯视图"
            onClicked: {
                surfaceGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetFrontHigh
            }
        }
        
        Button {
            text: "侧视图"
            onClicked: {
                surfaceGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetRightLow
            }
        }
        
        Button {
            text: "等轴测"
            onClicked: {
                surfaceGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetIsometricRight
            }
        }
        
        ComboBox {
            id: drawModeCombo
            model: ["Surface", "Wireframe", "Both"]
            onCurrentIndexChanged: {
                switch(currentIndex) {
                case 0: terrainSeries.drawMode = Surface3DSeries.DrawSurface; break;
                case 1: terrainSeries.drawMode = Surface3DSeries.DrawWireframe; break;
                case 2: terrainSeries.drawMode = Surface3DSeries.DrawSurfaceAndWireframe; break;
                }
            }
        }
    }
}
相关推荐
sbjdhjd11 小时前
开源分享 | 超浪漫 3D 圣诞树立体动画(附零基础使用教程)
3d·青少年编程·开源·html·节日
lrh302513 小时前
Custom SRP - 16 Render Scale
3d·unity·srp·render pipeline·render scale
毕安格 - BimAngle18 小时前
Revit 模型一键输出 3D Tiles (for Cesium) 和 glTF/glb
3d·cesium·gltf·glb·3d tiles
map_vis_3d19 小时前
JSAPIThree 加载 3D Tiles 学习笔记:大规模三维场景渲染
笔记·学习·3d
da_vinci_x20 小时前
Substance 3D Painter 进阶:手绘“掉漆”太累?用 Anchor Point 让材质“活”过来
游戏·3d·aigc·材质·设计师·技术美术·游戏美术
攻城狮7号1 天前
微软开源 TRELLIS.2:单图 3 秒变 3D?
人工智能·3d·trellis.2·o-voxel·sc-vae·微软开源模型
樱桃园园长1 天前
【Three.js 实战】手势控制 3D 奢华圣诞树 —— 从粒子系统到交互实现
javascript·3d·交互
二狗哈1 天前
Cesium快速入门30:CMZL动画
javascript·3d·webgl·cesium·地图可视化
二狗哈1 天前
Cesium快速入门29:CMZL数据格式加载
3d·状态模式·webgl·cesium·着色器·地图可视化
map_vis_3d1 天前
JSAPIThree LODModel 性能优化学习笔记:细节层次模型加载
笔记·学习·3d