Qt Quick 3D - Exemple d'éléments Quick
Illustre l'utilisation des éléments d'Qt Quick s dans une scène Quick 3D.
Cet exemple illustre l'utilisation d'éléments 2D «Qt Quick » dans une scène Quick 3D.
Éléments Quick dans une scène Quick 3D
Qt Quick Les éléments 2D « Item», ainsi que tous leurs éléments enfants, peuvent être ajoutés dans des scènes Quick 3D. Lorsque vous utilisez des types d'« Qt Quick » dans la scène 3D, il convient de noter les points suivants :
- Lorsqu’un Item se trouve à l’intérieur d’un Node, son coin supérieur gauche est placé à l’origine du nœud. Cela signifie qu’il sera souvent nécessaire de spécifier l’
anchors.centerIn: parentpour s’assurer que l’origine de l’ Node corresponde au point central de l’ Item. - Les transformations 3D sont héritées du parent Node. Si plusieurs
Itemdoivent être affectés par la même transformation, ces éléments peuvent être regroupés sous un parent commun Item au sein de l’ Node. - Dans Qt 6.0, les éléments ne reçoivent pas d’événements tactiles/souris, par exemple avec
MouseArea; ils doivent donc être non interactifs. - Les éléments Quick ne sont pas affectés par les lumières et les ombres.
- Clipping Il convient de les éviter et de ne pas s’y fier.
Contrairement aux versions antérieures de Qt et à d’autres approches d’intégration 2D-en-3D, le fait de lier un élément Qt Quick à un nœud 3D de type Qt Quick n’implique pas la création d’une texture, le rendu du contenu 2D sur celle-ci, puis le dessin d’un quadrilatère texturé. Au contraire, Qt 6.0 prend en charge le rendu du contenu 2D au cours du même passage de rendu que la scène 3D. Cela peut se traduire par des gains de performances potentiellement considérables dans la pratique. Cela ne s’applique pas lorsque l’élément est censé être rendu à l’aide d’une cible de rendu supplémentaire par conception, par exemple parce que la propriété ` layer.enabled ` est définie sur `true`, ou parce qu’il s’agit d’un ` ShaderEffectSource`.
La scène de test
Les éléments importants de cet exemple sont le contenu de la scène de l’élément View3D.
Nous commençons par ajouter le calque le plus éloigné de la caméra. Ce calque contient des éléments ` Rectangle`, ` Text ` et ` Image `. Pour garantir que les éléments du calque soient correctement positionnés, ils sont regroupés sous un élément parent commun ` Item`. Notez que tout le contenu est découpé à l'intérieur de cet élément racine ; il doit donc être dimensionné de manière appropriée.
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"
}
}
}Ensuite, l’élément « Node » et ses éléments enfants sont positionnés un peu plus près de la caméra. Il contient trois éléments « Rectangle » qui animent à la fois la position x et la rotation. Notez que les animations s’appliquent à l’élément parent « Node », tandis que le contenu de l’élément « Quick Item » reste statique. Du point de vue des performances, il s’agit d’une bonne approche pour les éléments plus complexes.
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
}
}
}La troisième couche d’éléments de cet exemple contient un seul élément « Text » avec une animation d’opacité. L’élément « Text » est automatiquement centré dans l’élément parent « Node ».
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
}
}
}
}Pour visualiser l’ordre de superposition (z-ordering) des couches d’éléments Quick Item ci-dessus, nous allons également configurer un modèle pour la boule de démolition en 3D. Celle-ci effectue une rotation autour de l’élément « top Node », ce qui fait traverser les autres couches à la sphère.
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)
}
}
}Voir également Qt Quick Scènes 3D avec du contenu 2D.
© 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.
