Qt Quick 3D - Einführung

Dieses Beispiel bietet einen einführenden Überblick über die grundlegenden Funktionen von Quick 3D, indem es den Code eines einfachen Beispiels durchgeht.

Einrichten der Szene

Wir richten die gesamte Szene in der Datei „main.qml “ ein.

Um die Typen aus dem Modul „ QtQuick3D “ nutzen zu können, müssen wir dieses importieren:

import QtQuick
import QtQuick3D

Um eine 3D-Szene zu zeichnen, benötigen wir einen 3D-Viewport innerhalb der „ Qt Quick “-Szene. Dieser wird von der Klasse „ View3D “ bereitgestellt, und hier definieren wir unsere Szene. Es ist auch möglich, mehrere Ansichten in einer Anwendung zu haben, siehe „Qt Quick 3D “ – „View3D“-Beispiel.

Wir beginnen mit der Definition der Umgebung unserer Szene. In diesem Beispiel löschen wir lediglich die Hintergrundfarbe mit „ skyblue “, was wir in einem „ SceneEnvironment “ für die Eigenschaft „ environment “ der Ansicht festlegen. Unter SceneEnvironment werden verschiedene Eigenschaften im Zusammenhang mit der Umgebung der Szene beschrieben, wie z. B. Tonemapping-Einstellungen, Light-Probe-Einstellungen für bildbasierte Beleuchtung, Hintergrundmodus oder Parameter für die Umgebungsokklusion. Es kann auch das Anti-Aliasing steuern, siehe Qt Quick 3D – Beispiel zum Anti-Aliasing. In unserem Beispiel setzen wir die Eigenschaften „ clearColor “ und „ backgroundMode “, um einen blauen Hintergrund zu erhalten.

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

Meshes

Um die Szene etwas interessanter zu gestalten, fügen wir nun einige Meshes hinzu. In Quick 3D gibt es zur Vereinfachung eine Reihe von integrierten Meshes, zum Beispiel Kugel, Würfel, Kegel oder Zylinder. Diese werden mithilfe spezieller Bezeichner wie „ #Sphere “, „ #Cube “ oder „#Rectangle “ in der „source“-Eigenschaft eines „Model“-Knotens referenziert. Neben den integrierten Primitiven kann eine „ .mesh “-Datei angegeben werden. Um „ .mesh “-Dateien aus FBX- oder glTF2-Assets zu generieren, müssen die Assets mit dem „Balsam Asset Import Tool“ verarbeitet werden. Nachfolgend ist der Code zum Hinzufügen einer blauen Kugel und eines roten abgeflachten Zylinders aufgeführt:

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

Um die Meshes hinzuzufügen, verwenden wir zwei „Model“-Knoten mit den „ source “ „ #Sphere “ und „ #Cylinder “, um unsere integrierten Meshes zu laden. Um dem Modell eine Farbe zu geben, müssen wir zunächst ein Material festlegen. In diesem Fall verwenden wir ein „ PrincipledMaterial “ mit einer roten und einer blauen Grundfarbe. Es stehen drei verschiedene Materialien mit unterschiedlichen Eigenschaften zur Verfügung, nämlich PrincipledMaterial, SpecularGlossyMaterial und CustomMaterial; siehe Qt Quick 3D – „Principled Material Example “ sowie „Programmable Materials, Effects, Geometry, and Texture data“. Das von einem „ Model “ geladene Mesh kann mehrere Sub-Meshes enthalten, und für jedes Sub-Mesh muss ein Material angegeben werden. Im Beispiel werden nur die integrierten Meshes verwendet, die jeweils nur ein Sub-Mesh haben; daher reicht es aus, ein einziges „ PrincipledMaterial “ in der Liste „ materials “ anzugeben.

Ein „ Model “ ist ein „ Node “ und verfügt daher über eine zugehörige Transformation. Um eine Verschiebung anzuwenden, verwenden wir die Eigenschaft „ position “. Es ist auch möglich, das Modell zu drehen, indem die Eigenschaft „ eulerRotation “ gesetzt wird. Damit der Zylinder wie eine Platte aussieht, setzen wir die Eigenschaft „ scale “ entsprechend.

Kamera

Anschließend definieren wir eine Kamera, die festlegt, wie der Inhalt der 3D-Szene auf eine 2D-Fläche projiziert wird. In diesem Beispiel verwenden wir „ PerspectiveCamera “, was eine perspektivische Projektion ergibt. Eine orthogonale Projektion ist ebenfalls über den Typ „ OrthographicCamera “ möglich. Die Standardausrichtung der Kamera ist so, dass ihr Vorwärtsvektor entlang der negativen Z-Achse und ihr Aufwärtsvektor entlang der positiven Y-Achse zeigt. Im Beispiel wird die Kamera auf der Z-Achse um 300 zurückverschoben. Außerdem wird sie auf der Y-Achse ein wenig nach oben verschoben und leicht um die X-Achse gedreht, sodass sie leicht nach unten blickt.

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

Lichtquellen

Die Szene benötigt außerdem eine Lichtquelle, damit die Modelle in unserer Szene sichtbar sind. Ein „ DirectionalLight “, das man sich als eine entfernte Sonne vorstellen kann, die aus einer bestimmten Richtung scheint, wird der Szene hinzugefügt. Es stehen zwei weitere Lichtquellen zur Verfügung, nämlich „ SpotLight “ und „ PointLight “; siehe Qt Quick 3D – Beispiel „Lights“.

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

Animation

Abschließend werden wir die Kugel auch animieren. Dazu wenden wir auf die Komponente „ y “ einen „ SequentialAnimation “ an, der die Kugel unendlich oft auf und ab bewegt.

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

Wenn alle diese Teile zusammenwirken, können wir unsere 3D-Szene rendern. Dieses Beispiel behandelt nur einige der grundlegenden Funktionen von „ Qt Quick 3D “. Weitere Beispiele finden Sie auf der Beispiel seite.

Beispielprojekt auf code.qt.io