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;
                }
            }
        }
    }
}
相关推荐
云飞云共享云桌面26 分钟前
工厂办公环境如何实现一台服务器多人共享办公
运维·服务器·网络·数据库·3d
一碗白开水一21 小时前
【论文阅读】Far3D: Expanding the Horizon for Surround-view 3D Object Detection
论文阅读·人工智能·深度学习·算法·目标检测·计算机视觉·3d
接着奏乐接着舞。21 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
XiaoMu_0011 天前
基于Node.js和Three.js的3D模型网页预览器
javascript·3d·node.js
Hi Z x y1 天前
3dtiles 加载问题
3d
二川bro1 天前
第27节:3D数据可视化与大规模地形渲染
3d·信息可视化
DreamLife☼2 天前
Qt 中的 Q_OBJECT 宏详解 —— 从源码到底层机制的全面剖析
qt·信号·qml·q_object··rtti·运行时类型信息
周小码2 天前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d
大嘴带你水论文2 天前
震惊!仅用10张照片就能随意编辑3D人脸?韩国KAIST最新黑科技FFaceNeRF解析!
论文阅读·人工智能·python·科技·计算机视觉·3d·transformer
Coovally AI模型快速验证3 天前
3D目标跟踪重磅突破!TrackAny3D实现「类别无关」统一建模,多项SOTA达成!
人工智能·yolo·机器学习·3d·目标跟踪·无人机·cocos2d