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;
                }
            }
        }
    }
}
相关推荐
科技快报42 分钟前
引入实时 3D 渲染技术,地平线与 Unity 开启车载交互空间化时代
3d·unity·交互
牛奶还是纯的好1 小时前
双目测距实战5-立体矫正
人工智能·3d
Renderbus瑞云渲染农场7 小时前
跨平台渲染不再难_瑞云渲染跨平台转移+克隆双功能上线,效率升级
3d·图形渲染
xhload3d10 小时前
热力图可视化为何被广泛应用?| 图扑数字孪生
3d·html5·webgl·数字孪生·可视化·热力图·三维建模·轻量化·电力能源·空间热力图
黑云压城After13 小时前
3D魔方-Css实现方法
前端·css·3d
EQ-雪梨蛋花汤13 小时前
【裸眼3D原理浅析】使用AI生成平面裸眼3D图像——“科幻战士破框而出”的裸眼3D图背后的原理与技巧
平面·3d
江公望13 小时前
如何在Qt QML中定义枚举浅谈
开发语言·qt·qml
球球和皮皮16 小时前
Babylon.js学习之路《添加自定义摇杆控制相机》
javascript·3d·前端框架·babylon.js
一只一只1 天前
Unity 3D笔记(进阶部分)——《B站阿发你好》
笔记·3d·unity·游戏引擎
程序猿阿伟1 天前
《3D端游开放世界动态天气系统与场景交互优化实践日志》
3d·1024程序员节