Qt Quick 3D - Introduction

Cet exemple donne un aperçu des fonctions de base de Quick 3D en parcourant le code d'un exemple simple.

Mise en place de la scène

Nous configurons l'ensemble 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 de visualisation 3D dans la scène Qt Quick. Celui-ci est fourni 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 application, voir Qt Quick 3D - View3D Example.

Nous commençons par définir l'environnement de notre scène. Dans cet exemple, nous effaçons simplement la couleur d'arrière-plan avec skyblue, que nous spécifions dans SceneEnvironment pour la propriété environment de la vue. 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 sonde lumineuse pour l'éclairage basé sur l'image, le mode d'arrière-plan ou les paramètres d'occlusion ambiante. Elle peut également contrôler l'anticrénelage, voir Qt Quick 3D - Antialiasing Example (Exemple d'anticrénelage). 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, il existe un certain nombre de maillages intégrés, par exemple sphère, cube, cône ou cylindre. Elles sont référencées en utilisant les identifiants spéciaux, tels que #Sphere, #Cube, ou#Rectangle dans la propriété source d'un noeud Model. Outre les primitives intégrées, un fichier .mesh peut être spécifié. Pour générer des fichiers .mesh à partir d'actifs FBX ou glTF2, les actifs doivent être traités à l'aide de l'outil d'importation d'actifs Balsam. Le code ci-dessous ajoute 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 donner une couleur au modèle, nous devons d'abord spécifier un matériau. Dans ce cas, nous utilisons un matériau PrincipledMaterial avec une couleur de base rouge et bleue. Il existe trois matériaux différents avec des propriétés différentes, à savoir PrincipledMaterial, SpecularGlossyMaterial et CustomMaterial, voir Qt Quick 3D - Principled Material Example et Programmable Materials, Effects, Geometry, and Texture data (matériaux, effets, géométrie et données de texture programmables). Le maillage chargé par Model peut avoir plusieurs sous-maillages, et chaque sous-maillage doit avoir un matériau spécifié. Dans l'exemple, seuls les maillages intégrés sont utilisés, et ceux-ci n'ont qu'un seul sous-maillage chacun. Il suffit donc de spécifier un seul PrincipledMaterial dans la liste materials.

Un Model est un Node, il a donc une transformation associée. Pour appliquer une translation, nous utilisons 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 assiette, nous définissons 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 PerspectiveCamera, ce qui nous donne une projection en perspective. La projection orthographique est également possible grâce au type OrthographicCamera. L'orientation par défaut de la caméra est la suivante : son vecteur avant pointe le long de l'axe Z négatif et son vecteur haut le long de l'axe Y positif. Dans l'exemple, la caméra est ramenée à 300 sur l'axe Z. En outre, elle est déplacée vers le haut d'une distance d'un mètre. En outre, elle est légèrement déplacée vers le haut sur l'axe Y, et elle subit une légère rotation autour de l'axe X pour regarder légèrement vers le bas.

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

Lumières

La scène a également besoin d'une source de lumière afin de pouvoir voir les modèles dans notre scène. Une source lumineuse DirectionalLight, que l'on peut assimiler à un soleil lointain éclairant dans une certaine direction, est ajoutée à la scène. Deux autres sources de lumière sont disponibles, à savoir SpotLight et PointLight, voir Qt Quick 3D - Exemple de lumière.

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 permet de déplacer la sphère vers le haut et vers le bas à 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
    }
}

Avec toutes ces parties fonctionnant ensemble, nous sommes en mesure d'effectuer le rendu de notre scène 3D. Cet exemple n'aborde que quelques-unes des capacités de base de Qt Quick 3D. Visitez la page des exemples pour en savoir plus.

Exemple de projet @ code.qt.io