Qt Quick 3D - Introduction

Cet exemple offre un aperçu des fonctionnalités de base de Quick 3D à travers l’analyse du code d’un exemple simple.

Configuration de la scène

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 QtQuick
import QtQuick3D

Pour dessiner une scène 3D, nous avons besoin d’une fenêtre d’affichage 3D au sein de la scène « Qt Quick ». Celle-ci est fournie par la classe « View3D », et c’est là que nous définissons notre scène. Il est également possible d’avoir plusieurs vues dans une même application ; voir Qt Quick 3D - Exemple View3D.

Nous commençons par définir l’environnement de notre scène. Dans cet exemple, nous nous contentons d’effacer la couleur d’arrière-plan à l’aide de ` skyblue`, que nous spécifions dans un ` SceneEnvironment ` pour la propriété ` environment ` de la vue. La page SceneEnvironment décrit diverses propriétés liées à l’environnement de la scène, telles que les paramètres de tonemapping, les paramètres de sondes lumineuses pour l’éclairage basé sur des images, le mode d’arrière-plan ou les paramètres d’occlusion ambiante. Il permet également de contrôler l’anti-aliasing ; voir Qt Quick 3D - Exemple d’anti-aliasing. Dans notre exemple, nous définissons les propriétés clearColor et backgroundMode pour obtenir un arrière-plan bleu.

environment: SceneEnvironment {
    clearColor: "skyblue"
    backgroundMode: SceneEnvironment.Color
}

Maillages

Pour rendre la scène un peu plus intéressante, nous allons maintenant ajouter quelques maillages. Dans Quick 3D, plusieurs maillages sont intégrés pour plus de commodité, par exemple une sphère, un cube, un cône ou un cylindre. On y fait référence à l’aide d’identifiants spéciaux, tels que #Sphere, #Cube ou#Rectangle, dans la propriété « source » d’un nœud « Model ». Outre les primitives intégrées, il est possible de spécifier un fichier « .mesh ». Pour générer des fichiers « .mesh » à partir de ressources FBX ou glTF2, celles-ci doivent être traitées à l’aide de l’outil d’importation de ressources Balsam. Le code ci-dessous montre comment ajouter une sphère bleue et un cylindre aplati rouge :

Model {
    position: Qt.vector3d(0, -200, 0)
    source: "#Cylinder"
    scale: Qt.vector3d(2, 0.2, 1)
    materials: [ PrincipledMaterial {
            baseColor: "red"
        }
    ]
}

Model {
    position: Qt.vector3d(0, 150, 0)
    source: "#Sphere"

    materials: [ PrincipledMaterial {
            baseColor: "blue"
        }
    ]

    SequentialAnimation on y {
        loops: Animation.Infinite
        NumberAnimation {
            duration: 3000
            to: -150
            from: 150
            easing.type:Easing.InQuad
        }
        NumberAnimation {
            duration: 3000
            to: 150
            from: -150
            easing.type:Easing.OutQuad
        }
    }
}

Pour ajouter les maillages, nous utilisons deux nœuds « Model », avec « #Sphere » et « #Cylinder » comme « source » pour charger nos maillages intégrés. Pour attribuer une couleur au modèle, nous devons d’abord spécifier un matériau. Dans ce cas, nous utilisons un « PrincipledMaterial » avec une couleur de base rouge et bleue. Trois matériaux différents, dotés de propriétés distinctes, sont disponibles : PrincipledMaterial, SpecularGlossyMaterial et CustomMaterial. Pour plus d’informations, consultez la page « Qt Quick 3D - Principled Material Example » ainsi que les sections consacrées aux matériaux programmables, aux effets, à la géométrie et aux données de texture. Le maillage chargé par un « Model » peut comporter plusieurs sous-maillages, et chaque sous-maillage doit se voir attribuer un matériau. Dans l’exemple, seuls les maillages intégrés sont utilisés ; ceux-ci ne comportant qu’un seul sous-maillage chacun, il suffit donc de spécifier un seul « PrincipledMaterial » dans la liste « materials ».

Un « Model » est une « Node », il est donc associé à une transformation. Pour appliquer une translation, on utilise la propriété « position ». Il est également possible de faire pivoter le modèle en définissant la propriété « eulerRotation ». Pour que le cylindre ressemble à une plaque, on définit la propriété « scale » en conséquence.

Caméra

Nous définissons ensuite une caméra, qui spécifie comment le contenu de la scène 3D est projeté sur une surface 2D. Dans cet exemple, nous utilisons la valeur « PerspectiveCamera », qui nous donne une projection en perspective. Une projection orthographique est également possible grâce au type « OrthographicCamera ». Par défaut, le vecteur « forward » de la caméra est orienté le long de l’axe Z négatif et son vecteur « up » le long de l’axe Y positif. Dans cet exemple, la caméra est reculée de 300 sur l’axe Z. De plus, elle est légèrement déplacée vers le haut sur l’axe Y et légèrement pivotée autour de l’axe X pour que son regard soit légèrement dirigé vers le bas.

PerspectiveCamera {
    position: Qt.vector3d(0, 200, 300)
    eulerRotation.x: -30
}

Éclairage

La scène a également besoin d’une source de lumière pour que l’on puisse voir les modèles qui la composent. Une source de lumière de type « DirectionalLight » (lumière de fond), que l’on peut considérer comme un soleil lointain brillant depuis une certaine direction, est ajoutée à la scène. Deux autres sources de lumière sont disponibles, à savoir « SpotLight » et « PointLight » ; voir l’exemple «Qt Quick 3D - Lights Example».

DirectionalLight {
    eulerRotation.x: -30
    eulerRotation.y: -70
}

Animation

Enfin, nous allons également animer la sphère. Pour ce faire, nous appliquons un « SequentialAnimation » au composant y, ce qui fait monter et descendre la sphère à l’infini.

SequentialAnimation on y {
    loops: Animation.Infinite
    NumberAnimation {
        duration: 3000
        to: -150
        from: 150
        easing.type:Easing.InQuad
    }
    NumberAnimation {
        duration: 3000
        to: 150
        from: -150
        easing.type:Easing.OutQuad
    }
}

Grâce à la combinaison de tous ces éléments, nous pouvons afficher notre scène 3D. Cet exemple n’aborde que certaines des fonctionnalités de base d’ Qt Quick 3D. Consultez la page des exemples pour découvrir d’autres exemples.

Projet d'exemple sur code.qt.io