Spielzeug-Konfigurator

Der Spielzeug-Konfigurator ist eine mit QML erstellte interaktive 3D-Anwendung, mit der Benutzer Spielzeugfiguren personalisieren können, indem sie 3D-Zubehör und Gesichtsmerkmale hinzufügen, die in Echtzeit auf dem Spielzeug positioniert werden. Er veranschaulicht, wie Qt Quick 3D Szenen mit Standardelementen Qt Quick Controls für eine intuitive Benutzeroberfläche kombiniert werden.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ aus dem Verzeichnis „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Übersicht

Das Beispiel zeigt ein 3D-Spielzeugmodell, das in Echtzeit gerendert wird, unter Verwendung von Qt Quick 3D. Über die Benutzeroberfläche können Nutzer zwischen verschiedenen Spielzeugen wählen, diverse 3D-Zubehörteile und Gesichtselemente anbringen sowie die Farben dieser Zubehörteile anpassen, während sie das Ergebnis in der 3D-Ansicht betrachten.

Das Layout passt sich sowohl an die Hoch- als auch an die Querausrichtung an, und das Beispiel kann auch auf der WebAssembly (WASM)-Plattform ausgeführt werden; weitere Informationen finden Sie unter Qt für WebAssembly.

Das Beispiel hebt Folgendes hervor:

• Verwendung von „ PrincipledMaterial “ zur Definition physikalisch basierter Materialien für die Spielzeugmodelle.
• Kombination von 2D-QML-Steuerelementen mit einer 3D-Szene.
• Organisation von Komponenten mit wiederverwendbaren QML-Dateien für eine bessere Struktur.
• Benutzern die Möglichkeit geben, das Spielzeug in der 3D-Vorschau durch Ziehen an der 3D-Szene zu drehen.
• Hinzufügen kurzer Eingangs- und Tanzanimationen für die Spielzeuge auf der ersten Seite mithilfe von Timeline und TimelineAnimation.

Anwendungsstruktur

Die Haupt-QML-Datei „ Main.qml “ definiert das Hauptanwendungsfenster und verwaltet die Navigation zwischen sechs Seiten.

• Erste Seite: Spielzeuge laufen ins Bild und führen nacheinander kurze Tanzanimationen aus.
• Galerie-Seite: Es wird ein Raster mit Spielzeugen angezeigt, aus dem der Benutzer eines auswählen kann.
• Bestätigungsseite: Zeigt weitere Details zum ausgewählten Spielzeug an und fordert zur Bestätigung auf.
• Seite „Anpassen“: Der Benutzer wählt Zubehör und einen Namen für das Spielzeug aus.
• Seite „Bestellübersicht“: fasst die aktuelle Bestellung vor dem Abschluss zusammen.
• Abschlussseite: Bestätigt, dass die Bestellung abgeschlossen ist, und ermöglicht es dem Nutzer, eine neue Bestellung zu starten.

Assets

Die Assets werden zum Zeitpunkt des Builds heruntergeladen, sofern sie noch nicht vorhanden sind. Nach Abschluss des Downloads wird das komprimierte Archiv entpackt. Bei nachfolgenden Builds wird das Archiv erneut entpackt, sofern sich eine der entpackten Asset-Dateien geändert hat, um sicherzustellen, dass alle erforderlichen Assets verfügbar sind, und um Laufzeitfehler zu vermeiden. Wenn ein Build aufgrund von Asset-Problemen oder eines aktualisierten Asset-Pakets fehlschlägt, werden durch einen „Clean Build“ sowohl das heruntergeladene Archiv als auch die entpackten Dateien entfernt, sodass der nächste Build von einem sauberen Zustand aus starten kann.

Animationen

Die erste Seite enthält ein „ View3D “. Ein „ Texture “ wird als „HDR- light probe “ verwendet, der eine bildbasierte Beleuchtung für die 3D-Spielzeuge bereitstellt. Es wurden „ PerspectiveCamera “- und „ SpotLight “-Knoten hinzugefügt, um die animierten Spielzeuge einzurahmen und ihre Lauf- und Tanzbewegungen in der Szene hervorzuheben.

Eine „ Skin “-Komponente steuert das Skinned Mesh des Charakters, während ein übergeordnetes „ Node “ als Wrapper für die Positionierung und Transformation des Spielzeugcharakters in der Szene dient. Das Laufen und Tanzen wird durch eine „ Timeline “ gesteuert, die von einem „ TimelineAnimation “ abgespielt wird. Die Animationsdaten werden mithilfe von „ KeyframeGroup “- und „ Keyframe “-Elementen definiert oder über „ keyframeSource “ aus Binärdaten geladen, wodurch die Keyframes für die Bewegung des Charakters bereitgestellt werden.

Das Beispiel verwendet außerdem ein gemeinsames „ PrincipledMaterial “, um das physikalisch basierte Aussehen der animierten Figuren zu definieren, einschließlich „ base color “, „ roughness “, „ culling mode “ und „ opacity “. Das Material verwendet „ texture maps “ als Grundfarbe sowie „ normal data “, die als URLs vom Modell bereitgestellt und zum Laden an „ Texture “-Objekte gebunden werden. „ AnimationModel.qml “ fungiert als Datenmodell für die animierten Spielzeuge und speichert Textur- und Mesh-Quellen sowie zusätzliche Metadaten wie Augenpositionen und Rotationen für jedes Spielzeug.

Responsive Benutzeroberfläche

Die Benutzeroberfläche ist so gestaltet, dass sie auf verschiedene Fenstergrößen und orientations reagiert. Auf der Spielzeuggalerie-Seite (ToyGalleryPage.qml) passt die Spielzeug grid automatisch die Anzahl der Spalten an die verfügbare Breite an, sodass die Spielzeugkarten klar sichtbar bleiben und sowohl im portrait - als auch im landscape -Modus ein einheitliches Erscheinungsbild beibehalten.

Auf anderen Seiten werden für die Ansichten portrait und landscape unterschiedliche Layouts verwendet: In landscape werden die Elemente nebeneinander angeordnet, während in portrait ein einspaltiges Layout verwendet wird, sodass sich der Inhalt vertikal stapelt. LayoutItemProxy wird verwendet, um Elemente innerhalb dieser Layouts zu positionieren, ohne UI-Definitionen zu duplizieren.

Da einige Designwerte wie Elementgrößen, Ränder und Schriftarten für eine andere Basisauflösung festgelegt sind, werden diese Werte im Beispiel mithilfe von „ ApplicationConfig.qml “ entsprechend der tatsächlichen Bildschirmauflösung skaliert. Diese Datei zentralisiert zudem Typografieeinstellungen, Schriftfamilien und Konstanten zur Fenstergeometrie, die aus den ursprünglichen Designspezifikationen abgeleitet wurden.

Interaktive 3D-Ansicht

Auf der Anpassungsseite (ToyCustomizePage.qml) zeigt ein „ 3D view “ das Spielzeug zusammen mit dem ausgewählten Zubehör an. Das Spielzeug wird durch ein Stamm-„ Node “ mit separaten Körperteilen dargestellt, die jeweils als eigenes „ Node “ modelliert sind. Die 3D-Ansicht ist über „ OrbitCameraController.qml “ interaktiv, wodurch der Benutzer das Spielzeug drehen und das daran befestigte Zubehör „ 3D models “ aus verschiedenen Blickwinkeln betrachten kann, während ein „ DragHandler “ die Drehgesten verarbeitet.

Quelldateien

Beispielprojekt auf code.qt.io