Qt Quick 3D - Exemple d'éléments rapides

Démonstration de l'utilisation des éléments Qt Quick dans une scène 3D rapide.

Sphère 3D avec éléments 2D superposés comprenant le logo et le texte Qt

Cet exemple illustre l'utilisation des éléments 2D deQt Quick dans une scène 3D rapide.

Éléments rapides dans une scène 3D rapide

Qt Quick Les Itemen 2D, ainsi que tous leurs éléments enfants, peuvent être ajoutés dans des scènes 3D rapides. Lors de l'utilisation des types Qt Quick dans la scène 3D, il convient de noter quelques points :

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 que l'élément devra souvent spécifier anchors.centerIn: parent pour s'assurer que l'origine de Node correspond au point central de Item.
Les transformations 3D sont héritées du parent Node. Si plusieurs Item doivent être affectés par la même transformation, ces éléments peuvent être regroupés sous un parent commun Item sous Node.
Dans Qt 6.0, les éléments ne reçoivent pas d'événements de toucher/souris, par exemple avec MouseArea, ils doivent donc être non interactifs.
Les éléments rapides ne sont pas affectés par les lumières et les ombres.
Clipping Il convient d'éviter de se fier à ces éléments et de ne pas les utiliser.

Contrairement aux versions antérieures de Qt et à d'autres approches d'intégration 2D dans 3D, l'association d'un élément Qt Quick à un nœud 3D Qt Quick n'implique pas la création d'une texture, le rendu du contenu 2D, puis le dessin d'un quad texturé. Qt 6.0 prend plutôt en charge le rendu du contenu 2D dans la même passe de rendu que la scène 3D. Dans la pratique, cela peut se traduire par une amélioration considérable des performances. Cela ne s'applique pas lorsque l'élément doit être rendu en utilisant une cible de rendu supplémentaire par conception, par exemple parce que layer.enabled est défini sur true, ou parce qu'il s'agit d'un ShaderEffectSource.

La scène de test

Les parties importantes 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. Cette couche contient les éléments Rectangle, Text et Image. Pour s'assurer que les éléments de la couche sont positionnés correctement, ils sont regroupés sous un parent commun Item. Notez que tout le contenu est découpé à l'intérieur de l'élément racine et qu'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, Node et ses éléments 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 sont effectuées sur le parent Node alors que le contenu du 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
        }
    }
}

Le troisième calque d'élément de cet exemple contient un seul élément Text avec une animation d'opacité. L'élément Texte est automatiquement centré sur le 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 z des calques d'éléments rapides ci-dessus, nous allons également configurer un modèle pour la boule de démolition 3D. Il anime la rotation autour du sommet Node, ce qui permet à la sphère de se déplacer à travers les autres calques.

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)
        }
    }
}

Exemple de projet @ code.qt.io

Voir aussi 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.