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;
                }
            }
        }
    }
}
相关推荐
TTGGGFF11 小时前
人工智能:用Gemini 3一键生成3D粒子电子手部映射应用
人工智能·3d·交互
回忆彡美好16 小时前
OpenGL的3D编程个人笔记之材质贴图
笔记·3d·材质·opengl
stormsha1 天前
裸眼3D原理浅析AI如何生成平面裸眼3D图像以科幻战士破框而出为例
人工智能·计算机视觉·平面·3d·ai
AI生成未来2 天前
从平面走向3D!中科大提出Pro3D-Editor,渐进式3D编辑新范式实现三维全视角精准一致
3d·3d生成
看到我请叫我铁锤2 天前
vue3中THINGJS初始化步骤
前端·javascript·vue.js·3d
棒棒的皮皮3 天前
【Python】Open3d用于3D测高项目
python·3d·open3d
CV实验室4 天前
CV论文速递:覆盖视频生成与理解、3D视觉与运动迁移、多模态与跨模态智能、专用场景视觉技术等方向 (11.17-11.21)
人工智能·计算机视觉·3d·论文·音视频·视频生成
Highcharts.js5 天前
使用 Highcharts 3D图表入门
3d·highcharts·使用文档·3d图表·交互图表·三维图表·3d 可视化
O***p6045 天前
C++在游戏中的Ogre3D
游戏·3d·ogre
sdjnled2295 天前
山东裸眼3D立体LED显示屏专业服务商
人工智能·3d