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

·  阅读 1141
QtQuick3D,3D效果展示辽宁舰🚢,为中国航母加油

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


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


航母模型

前言

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

hangmu2.gif

素材制作

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

  • 找到Qt安装目录下./bin/balsam.exe。Qt5.15以后的版本各个编译环境的文件目录是分开的,在此处要注意运行时选择的编译器套件是哪个,就在这里选用哪个文件目录下的balsam.exe。比如我在本次项目中选用的套件是MinGW-32bit,使用balsam.exe的时候也要使用相应的编译环境目录下的balsam.exe。
image.pngimage.png
  • 将航母模型的.obj文件拖到balsam.exe上完成处理。拖动后会自动在源.obj文件的目录下生成两个文件,分别是meshes文件夹和对应的.qml文件。

image.png

  • 将得到的meshes文件夹和.qml文件一同复制到自己创建的工程目录下。meshes文件夹中的所有文件是QtQuick3D所需的模型文件,对应的.qml文件则可以直接作为代码中的模型子类进行使用。

image.png

3D展示

设计思路

添加模块

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

import QtQuick3D 1.15

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

image.png

创建根结点

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

    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]

效果展示

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

感谢❤️💛💚💙💜💗

gitee.com/heyufeng471…

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改