Qt Quick 3D模块初探

骑猪看日落 2023-02-17 13:28 33阅读 0赞

# 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][https_github.com_gongjianbo_HelloQtQuick3D]

Qt Quick 3D概述：[https://doc.qt.io/qt-5/qtquick3d-index.html][https_doc.qt.io_qt-5_qtquick3d-index.html]

# 1.第一个窗口 #

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

![2020061413183275.png][]

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）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70][]

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画的三角：

![20200614133130653.png][]

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 }
                }
            }
        }
    }

[https_github.com_gongjianbo_HelloQtQuick3D]: https://github.com/gongjianbo/HelloQtQuick3D
[https_doc.qt.io_qt-5_qtquick3d-index.html]: https://doc.qt.io/qt-5/qtquick3d-index.html
[2020061413183275.png]: https://img-blog.csdnimg.cn/2020061413183275.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200614132519683.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky,size_16,color_FFFFFF,t_70
[20200614133130653.png]: https://img-blog.csdnimg.cn/20200614133130653.png