Qt例子学习笔记 - Examples/Qt-6.2.0/qt3d/controls/

main.cpp

#include <QGuiApplication>
#include <QQuickView>
#include <Qt3DRender/qt3drender-config.h>

int main(int argc, char **argv)
{
    QGuiApplication app(argc, argv);
#if !QT_CONFIG(qt3d_rhi_renderer)
    qputenv("QSG_RHI_BACKEND", "opengl");
#endif
    //QQuickView 类提供了一个用于显示 Qt Quick 用户界面的窗口
    //这是 QQuickWindow 的一个方便的子类，当给定主源文件的 URL 时，它将自动加载和显示 QML 场景。
    //或者，您可以使用 QQmlComponent 实例化您自己的对象并将它们放置在手动设置的 QQuickWindow 中。
    /*
        int main(int argc,char *argv[])
        {
            QGuiApplication app(argc,argv);

            QQuickView *view = new QQuickView;
            view->setSource(QUrl::fromLocalFile("myqmlfile.qml"));
            view->show();
            return app.exec();
        }
    */
    //要接收与使用 QQuickView 加载和执行 QML 相关的错误，
    //您可以连接到 statusChanged() 信号并监视 QQuickView::Error。
    //错误可通过 QQuickView::errors() 获得。
    //QQuickView 还管理视图和根对象的大小。
    //默认情况下，resizeMode 是 SizeViewToRootObject，它将加载组件并将其调整为视图的大小。
    //或者，可以将 resizeMode 设置为 SizeRootObjectToView，这会将视图大小调整为根对象的大小。    
    QQuickView view;
    //resizeMode此属性保存视图是否应调整窗口内容的大小
    //如果此属性设置为 SizeViewToRootObject（默认值），
    //则视图将调整为 QML 中根项的大小。
    //如果此属性设置为 SizeRootObjectToView，
    //则视图将自动将根项目的大小调整为视图的大小
    view.resize(520, 500);
    view.setResizeMode(QQuickView::SizeRootObjectToView);
    view.setSource(QUrl("qrc:/main.qml"));
    view.show();

    return app.exec();
}

main.qml

import QtQuick 2.0
import QtQuick.Scene3D 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.2

Item {
    id: main

    property real rotationValue: 0
    //Scene3D 类型用于将 Qt3D 场景集成到 QtQuick 2 场景中
    Scene3D {
        id: scene3D
        anchors.fill: parent
        anchors.verticalCenter: parent.verticalCenter
        //此属性保存该项目是否在封闭的 FocusScope 内具有焦点。
        //。 如果为 true，则当封闭的 FocusScope 获得活动焦点时，
        //此项将获得活动焦点。
        focus: true
        //应为 3D 场景注册的方面列表。
        //例如，如果场景使用 FrameAction，则“逻辑”方面应包含在列表中。
        aspects: "input"

        Logo {
            id: watch
        }
    }
    //与 GridLayout 相同，但只有一列
    ColumnLayout {
        id: colorLayout
        anchors.left: parent.horizontalCenter
        anchors.leftMargin: parent.width * 0.25
        anchors.right: parent.right
        anchors.rightMargin: 15
        anchors.top: scene3D.top
        spacing: 5

        Text { text: "Appearance"; font.bold: true }
        Text { text: "Ambient color RGB" }
        //与 GridLayout 相同，但只有一行
        RowLayout {
            Text { text: "R" }
            //用于通过沿轨道滑动手柄来选择值。
            Slider {
                id: color_r
                Layout.fillWidth: true
                from: 0
                to: 255
                value: 128
            }
        }
        RowLayout {
            Text { text: "G" }
            Slider {
                id: color_g
                Layout.fillWidth: true
                from: 0
                to: 255
                value: 195
            }
        }
        RowLayout {
            Text { text: "B" }
            Slider {
                id: color_b
                Layout.fillWidth: true
                from: 0
                to: 255
                value: 66
            }
        }
        Text { text: "Shininess" }
        Slider {
            id: shining
            Layout.fillWidth: true
            from: 30
            to: 90
            value: 50
        }
    }

    ColumnLayout {
        id: transformLayout

        anchors.left: colorLayout.left
        anchors.right: colorLayout.right
        anchors.top: colorLayout.bottom
        anchors.topMargin: 10
        spacing: 5

        Text { text: "Item transform"; font.bold: true }
        Text { text: "Rotation" }
        RowLayout {
            Text { text: "X" }
            Slider {
                id: rotation_x
                Layout.fillWidth: true
                from: -45
                to: 45
                value: rotationValue
            }
        }
        RowLayout {
            Text { text: "Y" }
            Slider {
                id: rotation_y
                Layout.fillWidth: true
                from: -45
                to: 45
                value: rotationValue
            }
        }
        RowLayout {
            Text { text: "Z" }
            Slider {
                id: rotation_z
                Layout.fillWidth: true
                from: -45
                to: 45
                value: rotationValue
            }
        }

        RowLayout {
            CheckBox {id: animation; text: "Animation"; checked: false}
        }
    }

    ColumnLayout {
        id: cameraLayout

        anchors.left: colorLayout.left
        anchors.right: colorLayout.right
        anchors.top: transformLayout.bottom
        anchors.topMargin: 10
        spacing: 5

        Text { text: "Camera"; font.bold: true }
        Text { text: "View Ctr Z: " + watch.cameraZ.toFixed(2) }
        Slider {
            id: viewCenter_z
            Layout.fillWidth: true
            from: 4
            to: 12
            value: 7.5
            onValueChanged: watch.setPositionZ(value)
        }
        Button {
            id: viewAll
            Layout.fillWidth: true
            text: "View All"
            onClicked: watch.viewLogo()
        }
    }
    //允许动画按顺序运行
    SequentialAnimation {
        running: true
        paused: !animation.checked
        loops: Animation.Infinite
        //动画 qreal 类型值的变化
        //easing group
        //easing.amplitude : real
        //easing.bezierCurve : list<real>
        //easing.overshoot : real
        //easing.period : real
        //easing.type : enumeration
        //指定用于动画的缓动曲线
        //要指定缓动曲线，您至少需要指定类型。
        //对于某些曲线，您还可以指定幅度、周期和/或过冲（表后提供了更多详细信息）。
        //默认的缓动曲线是 Easing.Linear。
        /*
            PropertyAnimal{properties:"y";
                           easing.type:Easing.InOutElastic;//弹性
                           easing.amplitute:20; //振幅
                           easing.period:1.5}
        */
        //可用类型有：
        //Easing.Linear 线性 (t) 函数的缓动曲线：速度是恒定的。
        //Easing.InQuad 二次 (t^2) 函数的缓动曲线：从零速度开始加速。
        //Easing.OutQuad 二次 (t^2) 函数的缓动曲线：减速到零速度。
        //Easing.InOutQuad 二次 (t^2) 函数的缓动曲线：加速到一半，然后减速。
        //Easing.OutInQuad  二次 (t^2) 函数的缓动曲线：减速到一半，然后加速。
        //Easing.InCubic    三次 (t^3) 函数的缓动曲线：从零速度开始加速。
        //Easing.OutCubic   三次 (t^3) 函数的缓动曲线：减速到零速度。
        //Easing.InOutCubic 三次 (t^3) 函数的缓动曲线：加速到一半，然后减速。
        //Easing.OutInCubic 三次 (t^3) 函数的缓动曲线：减速到一半，然后加速。
        //Easing.InQuart    四次 (t^4) 函数的缓动曲线：从零速度开始加速。
        //Easing.OutQuart   四次 (t^4) 函数的缓动曲线：减速到零速度。
        //Easing.InOutQuart 四次 (t^4) 函数的缓动曲线：加速到一半，然后减速。
        //..................//
        //easing.amplitude 仅适用于反弹和弹性曲线（Easing.InBounce、Easing.OutBounce、Easing.InOutBounce、Easing.OutInBounce、Easing.InElastic、Easing.OutElastic、Easing.InOutElastic 或 Easing.OutInElastic 类型的曲线）。
        //easing.overshoot 仅适用于 easing.type 为：Easing.InBack、Easing.OutBack、Easing.InOutBack 或 Easing.OutInBack。
        //easing.period 仅适用于 easing.type 为：Easing.InElastic、Easing.OutElastic、Easing.InOutElastic 或 Easing.OutInElastic。
        //asing.bezierCurve 仅适用于 easing.type 为：Easing.BezierSpline。 此属性是一个列表<real>，包含定义从 0,0 到 1,1 的曲线的三个点组 - control1, control2, end point: [cx1, cy1, cx2, cy2, endx, endy, ...]。 最后一点必须是 1,1。
        

        NumberAnimation {
            target: main
            property: "rotationValue"
            easing.type: Easing.OutQuad
            duration: 1000
            from: 0
            to: 45
        }
        NumberAnimation {
            target: main
            property: "rotationValue"
            easing.type: Easing.InOutQuad
            duration: 1000
            from: 45
            to: -45
        }
        NumberAnimation {
            target: main
            property: "rotationValue"
            easing.type: Easing.InQuad
            duration: 1000
            from: -45
            to: 0
        }
    }
}

Logo.qml

import Qt3D.Core 2.0
import Qt3D.Render 2.0
import QtQuick 2.0
import Qt3D.Extras 2.0

Entity {
    id: sceneRoot

    readonly property double cameraZ: camera.position.z
    //旋转和移动相机，使其 viewCenter 
    //成为场景边界体积的中心，并且整个场景适合视口。
    //注意：仅当镜头处于透视或正交投影模式时才有效。
    function viewAll() {
        camera.viewAll()
    }
    //旋转并移动相机，使其 viewCenter 成为实体边界体积的中心，并且整个实体适合视口。
    //注意：仅当镜头处于透视或正交投影模式时才有效。
    function viewLogo() {
        camera.viewEntity(logoEntity)
    }

    function setPositionZ(z) {
        camera.position = Qt.vector3d( 0.0, 0.0, z )
    }

    Camera {
        id: camera
        projectionType: CameraLens.PerspectiveProjection
        fieldOfView: 40
        aspectRatio: 4/3
        nearPlane : 0.1
        farPlane : 1000.0
        position: Qt.vector3d( 0.0, 0.0, 7.5 )
        upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
        viewCenter: Qt.vector3d( 0.0, 0.0, 0.0 )
    }
    //保存定义实体行为的 Component3D 实例列表。
    components: [
        //RenderSettings 类型保存与渲染过程相关的设置并托管活动的 FrameGraph。
        RenderSettings {
            //保存当前活动的 FrameGraph
            //ForwardRenderer 提供了前向渲染器的默认 FrameGraph 实现
            //前向渲染是 OpenGL 传统上使用的。
            //它一次将一个对象直接渲染到后台缓冲区，并在每个对象进行时对其进行着色。
            //ForwardRenderer 是一个单叶 FrameGraph 树
            //其中包含一个 Viewport、一个 CameraSelector 和一个 ClearBuffers。 ForwardRenderer 有一个默认的需求过滤键，
            //其名称为“renderingStyle”，值为“forward”。
            //如果您需要过滤掉您的技术，您应该根据该过滤键进行过滤。
            //默认情况下，视口占据整个屏幕，清晰的颜色为白色。 还启用了视锥体剔除。

            activeFrameGraph: ForwardRenderer {
                camera: camera
                clearColor: "white"
            }
        }
    ]
    //PhongMaterial 类提供了 phong 照明效果的默认实现。
    //phong 照明效果基于 3 个照明组件环境、漫反射和镜面反射的组合。
    //这些组件的相对强度通过它们的反射系数来控制，这些系数被建模为 RGB 三元组：
    //环境光是物体在没有任何其他光源的情况下发出的颜色。
    //漫反射是光线在粗糙表面反射时发出的颜色。
    //镜面反射是光亮表面反射所发出的颜色。
    //表面的光泽度由浮动属性控制。
    //此材质使用具有单一渲染通道方法的效果并执行每个片段照明。 为 OpenGL 2、OpenGL 3 或更高版本以及 OpenGL ES 2 提供了技术。
    
    PhongMaterial {
        id: material
        diffuse: Qt.rgba( color_r.value/255, color_g.value/255, color_b.value/255, 1.0 )
        ambient: Qt.rgba( 0.1, 0.1, 0.1, 1.0 )
        shininess: shining.value
    }

    Transform {
        id: logoTransform
        rotation: fromEulerAngles( rotation_x.value, rotation_y.value, rotation_z.value )
    }

    Mesh {
        id: logoMesh
        source: "qrc:/Qt_logo.obj"
    }

    Entity {
        id: logoEntity
        components: [ logoMesh, material, logoTransform ]
    }

    Entity {
        components: [
            PointLight {
                color: "white"
                intensity: 0.6
            },
            Transform {
                translation: Qt.vector3d(0, 0, 10)
            }
        ]
    }
}