Qt Quick 3D - Beispiel für „Quick Items“
Veranschaulicht die Verwendung von „ Qt Quick “-Elementen in einer „Quick 3D“-Szene.
Dieses Beispiel veranschaulicht die Verwendung von „Qt Quick “-2D-Elementen in der Quick-3D-Szene.
„Quick Items“ in einer Quick-3D-Szene
Qt Quick 2D-„ Items“ können zusammen mit all ihren untergeordneten Elementen in „Quick 3D“-Szenen eingefügt werden. Bei der Verwendung von „ Qt Quick “-Typen in der 3D-Szene sind einige Dinge zu beachten:
- Befindet sich ein „ Item “ innerhalb eines „ Node “, wird seine obere linke Ecke am Ursprung des Knotens positioniert. Das bedeutet, dass das Element häufig die Eigenschaft „
anchors.centerIn: parent“ festlegen sollte, um sicherzustellen, dass der Ursprung des „ Node “ dem Mittelpunkt des „ Item “ entspricht. - 3D-Transformationen werden vom übergeordneten „ Node “ geerbt. Sollten mehrere „
Item“ von derselben Transformation betroffen sein, können diese Elemente unter einem gemeinsamen übergeordneten „ Item “ innerhalb des „ Node “ gruppiert werden. - In Qt 6.0 empfangen Elemente keine Touch-/Mausereignisse, z. B. bei „
MouseArea“, daher sollten sie nicht interaktiv sein. - Quick-Elemente werden von Licht und Schatten nicht beeinflusst.
- Clipping sollten vermieden und nicht als verlässlich angesehen werden.
Im Gegensatz zu früheren Qt-Versionen und anderen Ansätzen zur Einbettung von 2D in 3D bedeutet die Zuordnung eines „ Qt Quick “-Elements zu einem „ Qt Quick 3D “-Knoten nicht, dass eine Textur erstellt, der 2D-Inhalt darauf gerendert und anschließend ein texturiertes Viereck gezeichnet wird. Stattdessen unterstützt Qt 6.0 das Rendern des 2D-Inhalts im selben Render-Durchlauf wie die 3D-Szene. Dies kann in der Praxis zu potenziell enormen Leistungssteigerungen führen. Dies gilt nicht, wenn das Element aufgrund seiner Konfiguration über ein zusätzliches Render-Ziel gerendert werden soll, beispielsweise weil „ layer.enabled “ auf „true“ gesetzt ist oder weil es sich um ein „ ShaderEffectSource “ handelt.
Die Testszene
Die wichtigen Teile dieses Beispiels sind die Szeneninhalte des Elements „ View3D “.
Wir beginnen damit, die von der Kamera am weitesten entfernte Ebene hinzuzufügen. Diese Ebene enthält die Elemente „ Rectangle “, „ Text “ und „ Image “. Um sicherzustellen, dass die Elemente in der Ebene korrekt positioniert sind, werden sie unter einem gemeinsamen übergeordneten „ Item “ gruppiert. Beachten Sie, dass der gesamte Inhalt innerhalb dieses Stammelements beschnitten wird, sodass dessen Größe entsprechend angepasst werden muss.
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"
}
}
}Als Nächstes wird das Element „ Node “ und seine untergeordneten Elemente etwas näher an der Kamera positioniert. Es enthält drei „ Rectangle “-Elemente, bei denen sowohl die x-Position als auch die Drehung animiert werden. Beachten Sie, dass die Animationen auf dem übergeordneten „ Node “-Element ausgeführt werden, während der Inhalt des „Quick Item “-Elements statisch bleibt. Aus Sicht der Performance ist dies bei komplexeren Elementen ein guter Ansatz.
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
}
}
}Die dritte Elementebene dieses Beispiels enthält ein einzelnes „ Text “-Element mit einer Opazitätsanimation. Das Text-Element wird automatisch in der übergeordneten „ Node “ zentriert.
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
}
}
}
}Um die Z-Reihenfolge der oben genannten „Quick Item“-Ebenen zu veranschaulichen, richten wir außerdem ein Modell für die 3D-Abbruchkugel ein. Diese animiert eine Drehung um das oberste „ Node “, wodurch sich die Kugel durch die anderen Ebenen bewegt.
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: PrincipledMaterial {
baseColor: Qt.rgba(0.9, 0.9, 0.9, 1.0)
}
}
Model {
source: "#Sphere"
y: -700
scale: Qt.vector3d(2, 2, 2)
materials: PrincipledMaterial {
baseColor: Qt.rgba(0.4, 0.4, 0.4, 1.0)
}
}
}Siehe auch „Qt Quick 3D -Szenen mit 2D-Inhalten“.
© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
