Configurateur de jouets

Le personnalisateur de jouets est une application 3D interactive développée avec QML qui permet aux utilisateurs de personnaliser des personnages de jouets en y ajoutant des accessoires 3D et des traits faciaux qui s’affichent en temps réel sur le jouet. Elle montre comment associer des scènes 3D d’Qt Quick s aux contrôles standard d’Qt Quick s pour créer une interface utilisateur intuitive.

Exécution de l’exemple

Vous pouvez exécuter l’exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple dans « Examples ». Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Présentation

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

La mise en page s’adapte aussi bien à l’orientation portrait qu’à l’orientation paysage, et l’exemple peut également être exécuté sur la plateforme WebAssembly (WASM) ; pour plus d’informations, consultez Qt pour WebAssembly.

Cet exemple met en avant :

• L'utilisation d'PrincipledMaterial pour définir des matériaux basés sur la physique pour les modèles de jouets.
• La combinaison de contrôles QML 2D avec une scène 3D.
• L’organisation des composants à l’aide de fichiers QML réutilisables pour une meilleure structure.
• La possibilité pour les utilisateurs de faire pivoter le jouet dans l’aperçu 3D en faisant glisser la scène 3D.
• L'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 six pages.

• Première page : les jouets entrent dans le champ de vision et exécutent des animations de danse courtes les unes après les autres.
• Page « Galerie » : une grille de jouets s’affiche et l’utilisateur peut en sélectionner un.
• Page de confirmation : 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 de récapitulatif de la commande : résume la commande en cours avant sa finalisation.
• Page finale : confirme que la commande est terminée et permet à l'utilisateur de passer une nouvelle commande.

Ressources

Les ressources sont téléchargées au moment de la compilation si elles ne sont pas déjà présentes. Une fois le téléchargement terminé, l'archive compressée est décompressée. Lors des compilations suivantes, si l’un des fichiers de ressources extraits a été modifié, l’archive est à nouveau extraite afin de garantir que toutes les ressources requises 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, afin que la compilation suivante puisse démarrer à partir d’un état vierge.

Animations

La première page comporte un « View3D ». Un « Texture » est utilisé comme « HDR light probe » pour fournir un éclairage basé sur des images aux jouets en 3D. Des nœuds « PerspectiveCamera » et « SpotLight » ont été ajoutés pour mettre en valeur les jouets animés et souligner leurs mouvements de marche et de danse sur la scène.

Un composant « Skin » pilote le maillage skinné du personnage, tandis qu’un « parent » Node sert d’enveloppe pour positionner et transformer le personnage-jouet dans la scène. La marche et la danse sont contrôlées par un « Timeline » (séquence d’animation) lue par un « TimelineAnimation » (lecteur de séquence d’animation). 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 fichier « shared » 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 par le modèle et liés à des objets Texture pour le chargement. AnimationModel.qml sert de modèle de données pour les jouets animés, stockant les sources de textures et de maillages ainsi que des métadonnées supplémentaires telles que les positions et les rotations des yeux pour chaque jouet.

Interface utilisateur adaptative

L’interface utilisateur est conçue pour s’adapter à différentes tailles de fenêtre et à orientations. Sur la page de la galerie de jouets (ToyGalleryPage.qml), l’ grid des jouets ajuste automatiquement le nombre de colonnes en fonction de la largeur disponible, afin que les fiches des jouets restent clairement visibles et conservent une apparence et une ergonomie cohérentes, tant en mode portrait qu’en mode landscape.

Sur les autres pages, des mises en page 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 mise en page à une seule colonne est utilisée dans portrait afin que le contenu s’empile verticalement. LayoutItemProxy est utilisé pour positionner les éléments au sein de ces mises en page sans dupliquer les définitions de l’interface utilisateur.

Certaines valeurs de conception, telles que la taille des éléments, les marges et les polices, étant 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 typographiques, les familles de polices et les constantes de géométrie des fenêtres issues des spécifications de conception d’origine.

Vue 3D interactive

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

Fichiers source

Exemple de projet sur code.qt.io