Toy Customizer

Toy Customizer ist eine interaktive 3D-Anwendung, die mit QML erstellt wurde und es dem Benutzer ermöglicht, Spielzeugfiguren zu personalisieren, indem er 3D-Zubehör und Gesichtszüge anbringt, die in Echtzeit auf dem Spielzeug positioniert werden. Es wird gezeigt, wie Qt Quick 3D-Szenen mit den Standardsteuerungen vonQt Quick kombiniert werden können, um eine intuitive Benutzeroberfläche zu schaffen.

Ausführen des Beispiels

Um das Beispiel auszuführen Qt Creatorzu starten, öffnen Sie den Modus Welcome und wählen Sie das Beispiel aus Examples. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

Überblick

Das Beispiel zeigt ein 3D-Spielzeugmodell, das mit Qt Quick 3D in Echtzeit gerendert wird. Über die Benutzeroberfläche kann der Benutzer zwischen verschiedenen Spielzeugen wählen, verschiedene 3D-Accessoires und Gesichtselemente anbringen und die Farben dieser Accessoires anpassen, während er das Ergebnis in der 3D-Ansicht betrachtet.

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

Die Highlights des Beispiels:

• Verwendung von PrincipledMaterial zur Definition physikalisch basierter Materialien für die Spielzeugmodelle.
• Kombinieren von 2D-QML-Steuerelementen mit einer 3D-Szene.
• Organisieren von Komponenten mit wiederverwendbaren QML-Dateien zur besseren Strukturierung.
• Ermöglichung der Drehung des Spielzeugs in der 3D-Vorschau durch Ziehen auf der 3D-Szene.
• Hinzufügen von kurzen Eingangs- und Tanzanimationen für die Spielzeuge auf der ersten Seite mit Timeline und TimelineAnimation.

Struktur der Anwendung

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

• Erste Seite: Die Spielzeuge kommen ins Bild und führen nacheinander kurze Tanzanimationen auf.
• Galerieseite: Es wird ein Raster von Spielzeugen angezeigt, aus dem der Benutzer eines auswählen kann.
• Bestätigungsseite: zeigt weitere Details über das ausgewählte Spielzeug an und bittet um Bestätigung.
• Seite "Anpassen": Der Benutzer wählt Zubehör und einen Namen für das Spielzeug aus.
• Bestellübersichtsseite: Hier wird die aktuelle Bestellung vor dem Abschluss zusammengefasst.
• Abschlussseite: Bestätigt, dass die Bestellung abgeschlossen ist, und ermöglicht es dem Benutzer, eine neue Bestellung zu starten.

Assets

Die Assets werden zum Zeitpunkt der Erstellung heruntergeladen, sofern sie noch nicht vorhanden sind. Nach Abschluss des Downloads wird das komprimierte Archiv extrahiert. Wenn sich bei nachfolgenden Builds eine der extrahierten Asset-Dateien geändert hat, wird das Archiv erneut extrahiert, um sicherzustellen, dass alle erforderlichen Assets vorhanden sind, und um Laufzeitfehler zu vermeiden. Wenn ein Build aufgrund von Asset-Problemen oder eines aktualisierten Asset-Pakets fehlschlägt, werden bei der Durchführung eines sauberen Builds sowohl das heruntergeladene Archiv als auch die extrahierten Dateien entfernt, so dass der nächste Build mit einem neuen Status beginnen kann.

Animationen

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

Es gibt eine Skin Komponente, die das Skin-Mesh der Figur steuert, während ein übergeordnetes Node als Wrapper für die Positionierung und Transformation der Spielzeugfigur in der Szene dient. Das Gehen und Tanzen wird von einem Timeline gesteuert, das von einem TimelineAnimation abgespielt wird. Die Animationsdaten werden mit den Elementen KeyframeGroup und Keyframe definiert oder über keyframeSource aus Binärdaten geladen, die die Keyframes für die Bewegung der Figur liefern.

Das Beispiel verwendet auch ein gemeinsames PrincipledMaterial, um das physikalisch basierte Aussehen der animierten Charaktere zu definieren, einschließlich base color, roughness, culling mode und opacity. Das Material verwendet texture maps für die Grundfarbe und 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 Drehungen für jedes Spielzeug.

Reaktionsfähige Benutzeroberfläche

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

Auf anderen Seiten werden für die Ansichten portrait und landscape unterschiedliche Layouts verwendet: In landscape werden Elemente nebeneinander angeordnet, während in portrait ein einspaltiges Layout verwendet wird, so dass der Inhalt vertikal gestapelt wird. 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 angegeben sind, verwendet das Beispiel ApplicationConfig.qml, um diese Werte entsprechend der tatsächlichen Bildschirmauflösung zu skalieren. In dieser Datei werden auch Typografieeinstellungen, Schriftfamilien und Konstanten für die Fenstergeometrie zentralisiert, die aus den ursprünglichen Designspezifikationen abgeleitet wurden.

Interaktive 3D-Ansicht

Auf der Seite zum Anpassen (ToyCustomizePage.qml) wird auf 3D view das Spielzeug zusammen mit dem ausgewählten Zubehör angezeigt. Das Spielzeug wird durch eine Wurzel Node mit einzelnen Körperteilen dargestellt, die jeweils als eigene Node modelliert sind. Die 3D-Ansicht ist interaktiv durch OrbitCameraController.qml, mit der der Benutzer das Spielzeug drehen und das angebrachte Zubehör 3D models aus verschiedenen Winkeln betrachten kann, während eine DragHandler die Drehbewegungen steuert.

Quelldateien

Beispielprojekt @ code.qt.io