Qt Quick 3D - 快速项目示例

演示在 Quick 3D 场景中使用 Qt Quick 项目。

本示例演示在 Quick 3D 场景中使用 Qt Quick 2D 项目。

快速项目在 Quick 3D 场景中

Qt Quick 2D 项目及其所有子项目可以添加到 Quick 3D 场景中。在 3D 场景中使用 Qt Quick 类型时，有一些注意事项

  • 当 项目 位于一个 节点 内时，其左上角放置在节点的原点。这意味着项目通常会指定 anchors.centerIn: parent 来确保节点原点是项目的中心点。
  • 3D 转换从父 节点 继承而来。如果有多个 项目 应受到相同的转换影响，则可以将这些项目放在 节点 的同一父 项目 之下分组。
  • 在 Qt 6.0 中，项目不会接收到触摸/鼠标事件，例如使用 MouseArea，因此它们应该是非交互式的。
  • 快速项目不受灯光和阴影的影响。
  • 应避免使用 裁剪 且不应依赖于裁剪。

与早期 Qt 版本和其他 2D 在 3D 中嵌入的方法不同，将 Qt Quick 项目作为 Qt Quick 3D 节点的父项目并不意味着创建纹理，将 2D 内容渲染到其中，然后绘制一个纹理四方形。相反，Qt 6.0 支持在与 3D 场景相同的渲染通道中渲染 2D 内容。这可能在实践中提供潜在的巨大性能提升。如果项目设计上将通过额外的渲染通道进行渲染，则不适用，例如，因为已将 layer.enabled 设置为 true，或者因为该项目是 ShaderEffectSource。

测试场景

本示例的重要部分是 View3D 元素的场景内容。

我们首先添加距离相机最远的层。此层包含 Rectangle、Text 和 Image 元素。为了确保层的元素位置正确，它们被组合在一个共同的父 项目 之下。注意，所有内容都在此根项内部裁剪，因此需要适当的大小。

Node {
    position: Qt.vector3d(0, 100, -120)
    Item {
        width: 400
        height: 400
        anchors.centerIn: parent
        Rectangle {
            anchors.fill: parent
            opacity: 0.4
            color: "#202020"
            radius: 10
            border.width: 2
            border.color: "#f0f0f0"
        }
        Text {
            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 20
            color: "#e0e0e0"
            style: Text.Raised
            text: qsTr("Background Item")
        }
        Image {
            anchors.centerIn: parent
            source: "Built_with_Qt_RGB_logo_vertical"
        }
    }
}

下一个 节点 及其项目在相机附近略微靠近。它包含三个 矩形 项目，它们的 x 位置和旋转都会进行动画。请注意，动画是在父级 节点 上进行的，而快速 项目 的内容保持静态。从性能的角度来看，这种方法对于更复杂的项目来说是一个好方法。

Node {
    position: Qt.vector3d(0, 150, 100)
    SequentialAnimation on x {
        loops: Animation.Infinite
        NumberAnimation {
            to: -200
            duration: 1500
            easing.type: Easing.InOutQuad
        }
        NumberAnimation {
            to: 200
            duration: 1500
            easing.type: Easing.InOutQuad
        }
    }
    NumberAnimation on eulerRotation.z {
        loops: Animation.Infinite
        from: 0
        to: 360
        duration: 4000
        easing.type: Easing.InOutBack
    }
    Item {
        width: 400
        height: 400
        anchors.centerIn: parent
        // This allows rendering into offscreen surface and caching it.
        layer.enabled: true
        Rectangle {
            x: 150
            y: 100
            width: 100
            height: 100
            radius: 50
            color: "#80808020"
            border.color: "black"
            border.width: 2
        }
        Rectangle {
            x: 90
            y: 200
            width: 100
            height: 100
            radius: 50
            color: "#80808020"
            border.color: "black"
            border.width: 2
        }
        Rectangle {
            x: 210
            y: 200
            width: 100
            height: 100
            radius: 50
            color: "#80808020"
            border.color: "black"
            border.width: 2
        }
    }
}

此示例的第三个项目层包含一个具有不透明度动画的单个 文本 项目。文本项目会自动在父级 节点 中居中。

Node {
    position: Qt.vector3d(0, 80, 250)
    Text {
        anchors.centerIn: parent
        width: 300
        wrapMode: Text.WordWrap
        horizontalAlignment: Text.AlignJustify
        font.pixelSize: 14
        color: "#e0e0e0"
        style: Text.Raised
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod " +
              "tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim " +
              "veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea " +
              "commodo consequat."
        SequentialAnimation on opacity {
            loops: Animation.Infinite
            NumberAnimation {
                to: 0
                duration: 1500
                easing.type: Easing.InOutQuad
            }
            NumberAnimation {
                to: 1
                duration: 1500
                easing.type: Easing.InOutQuad
            }
        }
    }
}

为了可视化上述快速项目层的 z 调序，我们还将为 3D 摧毁球设置一个模型。它围绕顶部的 节点 进行旋转动画，这使得球体穿过其他层。

Node {
    position: Qt.vector3d(0, 800, 0)
    SequentialAnimation on eulerRotation.x {
        loops: Animation.Infinite
        NumberAnimation {
            to: 20
            duration: 3500
            easing.type: Easing.InOutQuad
        }
        NumberAnimation {
            to: -20
            duration: 3500
            easing.type: Easing.InOutQuad
        }
    }
    Model {
        source: "#Cylinder"
        y: -300
        scale: Qt.vector3d(0.1, 6.1, 0.1)
        materials: DefaultMaterial {
            diffuseColor: Qt.rgba(0.9, 0.9, 0.9, 1.0)
        }
    }
    Model {
        source: "#Sphere"
        y: -700
        scale: Qt.vector3d(2, 2, 2)
        materials: DefaultMaterial {
            diffuseColor: Qt.rgba(0.4, 0.4, 0.4, 1.0)
        }
    }
}

文件

图像

另请参阅Qt Quick 3D 与 2D 内容的场景。

© 2024 Qt 公司有限公司。本文档中的贡献包括各自的拥有者的版权。本提供的文档是根据由自由软件基金会发布的 GNU 自由文档许可证版本 1.3 的条款进行许可的。Qt 及相关标志是芬兰的 Qt 公司和/或全球其他国家的商标。所有其他商标均为其各自所有者的财产。