Qt Quick 3D模块初探

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：

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

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

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