Personnalisateur de jouets

Toy Customizer est une application 3D interactive construite avec QML qui permet aux utilisateurs de personnaliser des personnages de jouets en y attachant des accessoires 3D et des caractéristiques faciales qui sont positionnées sur le jouet en temps réel. Il montre comment combiner les scènes 3D deQt Quick avec les contrôles standard deQt Quick pour une interface utilisateur intuitive.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt CreatorOuvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Vue d'ensemble

L'exemple présente un modèle de jouet en 3D rendu en temps réel à l'aide de Qt Quick 3D. L'interface utilisateur permet aux utilisateurs de choisir entre différents jouets, d'attacher divers accessoires 3D et éléments du visage, et d'ajuster les couleurs de ces accessoires tout en visualisant le résultat dans la vue 3D.

La présentation s'adapte aux orientations portrait et paysage, et l'exemple peut également être exécuté sur la plate-forme WebAssembly (WASM) ; pour plus d'informations, voir Qt for WebAssembly.

L'exemple met l'accent sur les points suivants

• L'utilisation de PrincipledMaterial pour définir des matériaux physiques pour les modèles de jouets.
• Combinaison de contrôles QML 2D avec une scène 3D.
• L'organisation des composants avec des fichiers QML réutilisables pour une meilleure structure.
• Permettre aux utilisateurs de faire pivoter le jouet dans l'aperçu 3D en le faisant glisser sur la scène 3D.
• Ajout de courtes animations d'entrée et de danse pour les jouets sur la première page à l'aide de Timeline et TimelineAnimation.

Structure de l'application

Le fichier QML principal, Main.qml, définit la fenêtre principale de l'application et gère la navigation entre les six pages.

• Première page : les jouets entrent en scène et exécutent de courtes animations de danse en séquence.
• Page Galerie : une grille de jouets est affichée et l'utilisateur peut en sélectionner un.
• Page de confirmation : elle affiche plus de détails sur le jouet sélectionné et demande une confirmation.
• Page de personnalisation : l'utilisateur sélectionne des accessoires et un nom pour le jouet.
• Page d'aperçu de la commande : résume la commande en cours avant de la terminer.
• Page finale : confirme que la commande est terminée et permet à l'utilisateur de commencer une nouvelle commande.

Actifs

Les éléments sont téléchargés au moment de la construction s'ils ne sont pas déjà présents. Une fois le téléchargement terminé, l'archive compressée est extraite. Lors des compilations suivantes, si l'un des fichiers d'actifs extraits a été modifié, l'archive est à nouveau extraite afin de s'assurer que tous les actifs requis sont disponibles et d'éviter les échecs d'exécution. Si une compilation échoue en raison de problèmes liés aux ressources ou d'une mise à jour du paquet de ressources, l'exécution d'une compilation propre supprime à la fois l'archive téléchargée et les fichiers extraits, de sorte que la compilation suivante puisse démarrer à partir d'un état neuf.

Animations

La première page a un View3D. Un Texture est utilisé comme un HDR light probe qui fournit un éclairage basé sur l'image pour les jouets 3D. Des nœuds PerspectiveCamera et SpotLight ont été ajoutés pour encadrer les jouets animés et mettre en évidence leurs mouvements de marche et de danse dans la scène.

Un composant Skin pilote le maillage du personnage, tandis qu'un parent Node sert d'enveloppe pour le positionnement et la transformation du personnage-jouet dans la scène. La marche et la danse sont contrôlées par un Timeline joué par un TimelineAnimation. Les données d'animation sont définies à l'aide des éléments KeyframeGroup et Keyframe, ou chargées à partir de données binaires via keyframeSource, qui fournit les images clés pour le mouvement du personnage.

L'exemple utilise également un élément partagé PrincipledMaterial pour définir l'aspect physique des personnages animés, notamment base color, roughness, culling mode et opacity. Le matériau utilise texture maps pour la couleur de base et normal data, qui sont fournis sous forme d'URL à partir du modèle et liés aux objets Texture pour le chargement. AnimationModel.qml sert de modèle de données pour les jouets animés, stockant les sources de texture et de maillage ainsi que des métadonnées supplémentaires telles que les positions et les rotations des yeux pour chaque jouet.

Interface utilisateur réactive

L'interface utilisateur est conçue pour s'adapter à différentes tailles de fenêtres et à orientations. Dans la page de la galerie de jouets (ToyGalleryPage.qml), le jouet grid ajuste automatiquement son nombre de colonnes en fonction de la largeur disponible afin que les cartes des jouets restent clairement visibles et conservent un aspect et une sensation cohérents dans les modes portrait et landscape.

Sur d'autres pages, des dispositions différentes sont utilisées pour les vues portrait et landscape: les éléments sont disposés côte à côte dans landscape, tandis qu'une disposition en une seule colonne est utilisée dans portrait pour que le contenu s'empile verticalement. LayoutItemProxy est utilisé pour positionner les éléments dans ces dispositions sans dupliquer les définitions de l'interface utilisateur.

Étant donné que certaines valeurs de conception, telles que la taille des éléments, les marges et les polices, sont spécifiées pour une résolution de base différente, l'exemple utilise ApplicationConfig.qml pour mettre ces valeurs à l'échelle en fonction de la résolution réelle de l'écran. Ce fichier centralise également les paramètres de typographie, les familles de polices et les constantes de géométrie des fenêtres dérivées des spécifications de conception originales.

Vue 3D interactive

Dans la page de personnalisation (ToyCustomizePage.qml), une page 3D view affiche le jouet ainsi que les accessoires sélectionnés. Le jouet est représenté par une racine Node avec des parties de corps séparées, chacune modélisée comme sa propre Node. La vue 3D est interactive grâce à OrbitCameraController.qml, qui permet à l'utilisateur de faire pivoter le jouet et d'inspecter l'accessoire attaché 3D models sous différents angles, tandis qu'une DragHandler gère les gestes de rotation.

Fichiers sources

Exemple de projet @ code.qt.io