Qt Quick 3D - Exemple HelloCube

HelloCube montre comment afficher un cube 3D avec des éléments 2D dans Qt Quick 3D.

Dessiner des éléments 2D

Nous configurons l'intégralité de la scène dans le fichier main.qml.

Pour pouvoir utiliser les types du module « QtQuick3D », nous devons l'importer :

import QtQuick3D

Nous définissons des éléments QtQuick simples comprenant une image et un texte sur un rectangle.

Image {
    anchors.fill: parent
    source: "qt_logo.png"
}
Text {
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    color: "white"
    font.pixelSize: 17
    text: qsTr("The Future is Written with Qt")
}

Ce simple rectangle dispose de deux animations permettant de le retourner verticalement.

transform: Rotation {
    id: rotation
    origin.x: qt_logo.width / 2
    origin.y: qt_logo.height / 2
    axis { x: 1; y: 0; z: 0 }
}

PropertyAnimation {
    id: flip1
    target: rotation
    property: "angle"
    duration: 600
    to: 180
    from: 0
}
PropertyAnimation {
    id: flip2
    target: rotation
    property: "angle"
    duration: 600
    to: 360
    from: 180
}

Dessiner un cube en 3D

Dessiner un cube est très simple. Après avoir défini un « Camera » et une « Light », nous créons un cube à l’aide d’un « Model » intégré. Dans cet exemple, nous rendons le rectangle 2D précédent sur la surface de ce cube sous forme d’ Texture e diffus. Dans notre rectangle, nous définissons « layer.enabled » sur « true ».

layer.enabled: true

Lorsqu’elle est activée, cette propriété permet de rendre l’élément 2D sur une surface hors écran, que nous utilisons ensuite comme texture pour notre cube.

id: cube
source: "#Cube"
materials: PrincipledMaterial {
    baseColorMap: Texture {
        sourceItem: qt_logo
    }
}
eulerRotation.y: 90

Exemple de projet sur code.qt.io