Qt Quick 3D

随着 Qt6 的推出，Qt Quick 3D 逐渐稳定和好用起来

之前很多朋友都是把 Qt3D 当成 Qt 的 3D 解决方案的，

现在有了 Qt Quick 3D，很推荐切换到这个新模块来

目前这个模块只提供了 QML 的接口（虽说晚一些会提供 C++ API）

以前我一直很排斥使用 Qt Quick / QML，但最近项目上用到了

试用后感觉特别棒，用 QML 搭建一个运动的 3D 场景真的太简单了

上图是 three.js 做的卡通城市，我们用 Qt Quick 3D 可以很容易地实现同样效果

使用 Qt Quick 3D 的话最低需要 Qt 5.15 的版本

我们先创建一个空的 Qt Quick 工程，名字叫 demo

然后修改 pro 并新建 qml.qrc 资源文件

1
QT += quick quick3d
2
CONFIG += c++11
3
SOURCES += main.cpp
4
RESOURCES += qml.qrc

main.cpp 如下

​x
1
#include <QGuiApplication>
2
#include <QQmlApplicationEngine>
3
#include <QtQuick3D/qquick3d.h>
4

5
int main(int argc, char *argv[])
6
{
7
    QGuiApplication app(argc, argv);
8
    QSurfaceFormat::setDefaultFormat(QQuick3D::idealSurfaceFormat(4));
9
    QQmlApplicationEngine engine;
10
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
11
    return app.exec();
12
}

新建 main.qml 加入 qml.qrc

xxxxxxxxxx
11
1
import QtQuick.Window 2.15
2

3
Window {
4
    width: 1280
5
    height: 720
6
    visible: true
7

8
    Scene3D {
9
        anchors.fill: parent
10
    }
11
}

新建 scene3d.qml 加入 qml.qrc

xxxxxxxxxx
16
1
import QtQuick 2.15
2
import QtQuick3D 1.15
3

4
View3D {
5
    id: view
6
    environment: SceneEnvironment {
7
        clearColor: "grey"
8
        backgroundMode: SceneEnvironment.Color
9
    }
10

11
    PerspectiveCamera {
12
    }
13

14
    DirectionalLight {
15
    }
16
}

此时，可以用设计模式打开 scene3d.qml 文件，用 3D 界面修改 qml

操作方式很简单，按住 Alt 键 后拖动鼠标左键，可以移动视角

按住 Alt 键后拖动鼠标中键，可以整体平移

按住 Alt 键后拖动鼠标右键 或者 滚动鼠标滚轮，可以放大缩小视角

通过左侧的 Assets 选项，可以将 3D 模型（比如 fbx 格式）导入工程中，

QtCreator 会自动调用 Qt 安装目录下的 balsam.exe 工具

生成 qml 代码文件 和 mesh、png 资源文件

3D素材是从网上下载的 Unity3D 的 SimplePoly City - Low Poly Assets.unitypackage

通过 Export FBX 插件导出的 fbx 文件，素材文件我传到了百度网盘

提取码:wedv

import 后，我们把 asset_imports\Quick3DAssets\Building_Chicken_Shop 目录下的

maps、meshes 文件夹 及 Building_Chicken_Shop.qml 拷贝到 scene3d.qml 同级目录

然后修改下 scene3d.qml 的代码，编译后就能看到窗口中的 3D 模型了

xxxxxxxxxx
33
1
import QtQuick 2.15
2
import QtQuick3D 1.15
3

4
View3D {
5
    id: view
6

7
    environment: SceneEnvironment {
8
        clearColor: "grey"
9
        backgroundMode: SceneEnvironment.Color
10
    }
11

12
    PerspectiveCamera {
13
        x: -1319.251
14
        y: 1075.307
15
        eulerRotation.z: 0.00001
16
        eulerRotation.y: -38.32895
17
        eulerRotation.x: -15.69995
18
        z: 1865.67139
19
    }
20

21
    DirectionalLight {
22
        x: -1942.468
23
        y: 2160.867
24
        eulerRotation.z: 0
25
        eulerRotation.y: -20.23431
26
        eulerRotation.x: -18.17206
27
        brightness: 135
28
        z: 2517.86401
29
    }
30

31
    Building_Chicken_Shop {
32
    }
33
}

通过 QQ3D 显示 3D 模型

同理，我们若修改下模型，添加下动画和鼠标控制，就能做出各式各样的 3D 界面了

Qt Quick 3D 就是这样，能让我们开发 3D 界面更加灵活和便捷

上图的代码我也一并传到百度网盘了

提取码: 8edb

希望能有越来越多的人喜欢上 Qt Quick 3D

To be continued ....