欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Qt Quick 3D模块初探

程序员文章站 2022-07-13 08:28:26
...

0.前言

Qt Quick 3D提供了用于基于Qt Quick创建3D内容或UI的高级API。提供了对现有Qt Quick场景图(scenegraph )的扩展,以及对该扩展场景图的渲染器。使用空间场景图(Spatial scenegraph)时,还可以将Qt Quick 2D内容与3D内容混合。从官方的描述来看,可以看成一个简化版的Qt3D模块

因为该模块是从Qt5.14开始预览,Qt5.15正式加入的,所以资料很少,只有几个简单的QtCreator示例。

使用时,先导入模块(测试了两个Demo,感觉pro文件QT+=quick3d不是必须的,待验证):

import QtQuick3D 1.15

除了基本的Qt Quick 3D模块外,还提供了其他功能: 

import QtQuick3D.Materials 1.15
import QtQuick3D.Effects 1.15
import QtQuick3D.Helpers 1.15

本文代码链接:https://github.com/gongjianbo/HelloQtQuick3D

Qt Quick 3D概述:https://doc.qt.io/qt-5/qtquick3d-index.html

1.第一个窗口

要渲染一个3D场景,需要使用View3D对象,View3D为要渲染的3D内容提供2D表面。在3D场景中,使用Node对象树来描述我们的场景。下面的示例是一个空白的窗口,只有clearColor:

Qt Quick 3D模块初探

import QtQuick 2.15
import QtQuick3D 1.15

Item{
    //渲染3D场景的视口
    //View3D为要渲染的3D内容提供2D表面。
    // it must first be flattend.
    View3D {
        id: view
        anchors.fill: parent
        anchors.margins: 20

        //为了控制场景的呈现,有必要定义一个SceneEnvironment的环境属性。
        //SceneEnvironment定义了渲染场景的环境,该环境定义了如何全局渲染场景。
        environment: SceneEnvironment {
            clearColor: "darkGreen"
            backgroundMode: SceneEnvironment.Color
        }

        //要将3D场景投影到2D视口,必须从摄像机查看场景。
        PerspectiveCamera {
            position: Qt.vector3d(0, 0, 0)
        }
    }
    Text {
        anchors.centerIn: parent
        text: "First Window"
    }
}

下面再来试试一些预定义的Model(Model也是继承自Node):

Qt Quick 3D模块初探

import QtQuick 2.15
import QtQuick3D 1.15

//渲染3D场景的视口
View3D {
    environment: SceneEnvironment {
        clearColor: "darkGreen"
        backgroundMode: SceneEnvironment.Color
    }

    //透视投影
    PerspectiveCamera {
        id: camera
        position: Qt.vector3d(0, 0, 300)
        //eulerRotation.x: -30
    }

    //光源
    DirectionalLight {
        eulerRotation.x: -100
        eulerRotation.y: -100
        eulerRotation.z: 500
    }

    //加载3D模型数据
    //为了使模型可渲染,它至少需要一个网格Mesh和一种材料Material
    //圆球
    Model {
        position: Qt.vector3d(0, 0, 0)
        source: "#Sphere"
        materials: [ DefaultMaterial {
                diffuseColor: "blue"
            }
        ]
    }
    //矩形
    Model {
        position: Qt.vector3d(-100, -100, 0)
        source: "#Cube"
        scale: Qt.vector3d(2, 0.1, 1)
        eulerRotation: Qt.vector3d(0,0,-20)
        materials: [ DefaultMaterial {
                diffuseColor: "red"
            }
        ]
    }
}

2.混合Qt Quick Item画三角

相对于Qt3D可以直接在QML中定义顶点,QtQuick3D好像没那么方便。我只看到一个叫Geometry的类型可以自定义几何形状,但是需要使用C ++实现并注册到QML。又或者Model的source使用自己生成的mesh文件,很明显这也不方便。索性我就放了一个QML的Shape画的三角:

Qt Quick 3D模块初探

import QtQuick 2.15
import QtQuick3D 1.15
import QtQuick.Shapes 1.15

//渲染3D场景的视口
View3D {
    environment: SceneEnvironment {
        clearColor: "darkGreen"
        backgroundMode: SceneEnvironment.Color
    }

    //透视投影
    PerspectiveCamera {
        id: camera
        position: Qt.vector3d(0, 0, 300)
        //eulerRotation.x: -30
    }

    //光源
    DirectionalLight {
        eulerRotation.x: -100
        eulerRotation.y: -100
        eulerRotation.z: 500
    }

    //自定义Geometry还得从Cpp注册,或者source加载自己的mesh文件
    //为了图方便,贴一个Quick2的Shape来展示三角
    Node {
        position: Qt.vector3d(0, 0, 0)
        Shape {
            id: shape
            width: 300
            height: 200
            ShapePath {
                strokeColor: "transparent"
                fillColor: "lightGreen"
                startX: shape.width/2; startY: 0
                PathLine { x: shape.width; y: shape.height }
                PathLine { x: 0; y: shape.height }
                PathLine { x: shape.width/2; y: 0 }
            }
        }
    }
}

 

相关标签: Qt3D QtQuick3D