一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第 13 天，点击查看活动详情。

📒博客首页：何名取的个人主页 - 文章 - 掘金 (juejin.cn)
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
❤️期待一起交流！
🙏作者水平很有限，如果发现错误，求告知，多谢！
🌺有问题可私信交流！！！

航母模型

前言

昨天看到人民海军航母宣传片，震撼之际不由得心生向往。今天在网上疯狂的找航母的资料看，突然联想到QML也可以做出3D效果，就抱着尝试的心去搞了一波，取得了一些小成果送给小伙伴们。模型不是我自己画的，我可没这艺术天赋，是在网上找的资源。找到模型后将其进行了处理，并将其QtQuick3D绘制到窗口上进行动态展示。

素材制作

获取到的模型无法直接使用，需要先进行加工。

找到Qt安装目录下./bin/balsam.exe。Qt5.15以后的版本各个编译环境的文件目录是分开的，在此处要注意运行时选择的编译器套件是哪个，就在这里选用哪个文件目录下的balsam.exe。比如我在本次项目中选用的套件是MinGW-32bit，使用balsam.exe的时候也要使用相应的编译环境目录下的balsam.exe。 | | | | --- | --- |
将航母模型的.obj文件拖到balsam.exe上完成处理。拖动后会自动在源.obj文件的目录下生成两个文件，分别是meshes文件夹和对应的.qml文件。
将得到的meshes文件夹和.qml文件一同复制到自己创建的工程目录下。meshes文件夹中的所有文件是QtQuick3D所需的模型文件，对应的.qml文件则可以直接作为代码中的模型子类进行使用。

3D展示

设计思路

添加模块

本节主要使用QtQuick3D的来进行实现，在.qml文件中导入相应的模块。

import QtQuick3D 1.15

除了要导入QtQuick3D模块，还需要将上面素材制作得到的模型文件与.qml添加到工程中。整个工程的文件目录如下：

创建根结点

首先创建根结点，航母模型的创建和相机的创建都在根结点中进行。根结点中包括光源、模型和相机。

    Node {
        id: standAloneScene
        //! [rootnode]
    }

创建光源

在本节中选用自然光，将ambientColor属性设置为全1即可。

        DirectionalLight {
            ambientColor: Qt.rgba(1.0, 1.0, 1.0, 1.0)
        }

创建航母模型

上述的素材制作中得到的.qml文件中实现了航母的模型绘制，在此处可以直接进行使用。使用PrincipledMaterial类型将模型进行金属化渲染。

        Hm2{
            id:liap
            y: -100
            scale: Qt.vector3d(50, 50, 50)

            PrincipledMaterial {
                baseColor: "#41cd52"
                metalness: 0.75
                roughness: 0.1
                specularAmount: 1.0
                indexOfRefraction: 2.5
                opacity: 1.0
            }

            PropertyAnimation on eulerRotation.y {
                loops: Animation.Infinite
                duration: 5000
                to: 0
                from: -360
            }
        }

scale: Qt.vector3d(50, 50, 50)//x、y、z表示将3D模型的x、y、z刻度值设置为50。

创建相机

在这里我们创建了三个相机来观察航母模型，分别是左侧正交相机，顶部正交相机和正面正交相机。相当于使用了三视图的方式去观察模型，将其展示在视图中。

        // Stationary orthographic camera viewing from the top
        OrthographicCamera {
            id: cameraOrthographicTop
            y: 600
            eulerRotation.x: -90
        }

        // Stationary orthographic camera viewing from the front
        OrthographicCamera {
            id: cameraOrthographicFront
            z: 600
        }

        // Stationary orthographic camera viewing from left
        OrthographicCamera {
            id: cameraOrthographicLeft
            x: -600
            eulerRotation.y: -90
        }

创建视图

整个模型视图使用四个区域来进行模型的展示。

左上区域，展示航母正面视角。
右上区域，展示航母三视角相交的旋转效果。
左下区域，展示航母顶部视角。
右下区域，展示航母左侧视角。

由于航母的展示采用旋转效果，左上区域和右下区域可能会产生相似的画面，这是因为从正面旋转90°就是左侧面。

此处只展示左上区域部分的代码。区域由Rectangle作为基础，包含背景图片、3D模型和文字标签。

    //! [views]
    // The views
    Rectangle {
        id: topLeft
        anchors.top: parent.top
        anchors.left: parent.left
        width: parent.width * 0.5
        height: parent.height * 0.5
        color: "SkyBlue"
        border.color: "black"
        Image{
            anchors.fill: parent
            source: "qrc:/bg1.png"
            fillMode: Image.PreserveAspectCrop
        }

        View3D {
            id: topLeftView
            anchors.fill: parent
            importScene: standAloneScene
            camera: cameraOrthographicFront
        }

        Label {
            text: "Front"
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.margins: 10
            color: "#222840"
            font.pointSize: 14
        }
    }
    //! [views]

效果展示

点击下面的链接可以获取完整的代码。有兴趣的小伙伴可以持续关注。

感谢❤️💛💚💙💜💗

gitee.com/heyufeng471…

QtQuick3D，3D效果展示辽宁舰🚢，为中国航母加油