Construire des configurateurs de produits professionnels dans Unity
Cet article fournit des conseils aux développeurs et aux artistes techniques sur la création d'un configurateur de produit 3D interactif dans Unity, en utilisant le package Product Configurator, et il est basé sur ce tutoriel vidéo.
Il couvre l'ensemble du flux de travail, de la configuration initiale du projet dans le Universal Render Pipeline (URP) à la déploiement final sur le web. Les sujets clés incluent l'importation et l'optimisation des modèles CAO à l'aide d'outils comme le Asset Transformer ou Unity Asset Manager, la création de variantes de matériaux dynamiques pour la personnalisation en temps réel, et la construction d'une interface utilisateur réactive avec des contrôles cliquables.
De plus, il détaille comment mettre en œuvre des transitions de caméra à l'aide de Cinemachine et offre des meilleures pratiques pour optimiser et construire l'application pour le web, garantissant une expérience utilisateur fluide et accessible sur n'importe quel navigateur.
Questions les plus fréquentes
Quel est le point de départ pour construire un configurateur de produit avec Unity ?
Pour commencer rapidement, vous pouvez utiliser le projet d'exemple fourni avec le package Product Configurator.
Commencez par créer un nouveau projet Universal Render Pipeline (URP) dans le Unity Hub.
Téléchargez le projet d'exemple depuis le dépôt GitHub.
Ouvrez le projet d'exemple dans Unity pour explorer sa structure et ses composants.
Examinez la hiérarchie pour comprendre comment les ensembles de variantes, l'UI et les caméras sont organisés.
Étant donné que le package est open-source, vous pouvez personnaliser n'importe quelle partie pour répondre à vos besoins spécifiques avant d'ajouter vos propres modèles 3D.
Quelles sont les méthodes recommandées pour importer et optimiser les modèles CAO pour Unity ?
Pour garantir que vos données CAO sont prêtes pour une application en temps réel, elles doivent être converties et optimisées. La vidéo met en évidence deux méthodes principales pour cela :
Plugin Asset Transformer : Ce plugin, utilisé directement dans l'éditeur Unity, est conçu pour gérer divers formats de fichiers CAO et comprend des fonctionnalités avancées pour optimiser la géométrie et les matériaux lors du processus d'importation.
Gestionnaire d'actifs Unity: Cette solution basée sur le cloud vous permet de télécharger vos modèles sources et d'utiliser la fonction Optimiser et Convertir. Elle fournit une interface facile à utiliser pour transformer vos données en formats prêts pour Unity avant de les télécharger pour votre projet.
- (1:36) - Cette section de la vidéo couvre l'ajout de votre modèle 3D dans une nouvelle scène
- (1:46) - Aperçu du plugin Asset Transformer
- (1:55) - Cette section couvre le Gestionnaire d'actifs Unity comme alternative pour optimiser et convertir des modèles
Consultez la page de documentation du Gestionnaire d'actifs Unity et ce tutoriel vidéo pour en savoir plus.
Comment configurer le système de changement de matériau pour un configurateur de produit ?
Le cœur du configurateur est la capacité d'échanger des matériaux en temps réel. Cela est géré à l'aide d'un ensemble de variantes de matériaux, qui automatise la logique de changement sans aucun code.
Dans le Hiérarchie, faites un clic droit et naviguez vers Configurateur de produit > Ensemble de variantes > Ensemble de variantes de matériaux.
Avec le nouvel ensemble de variantes sélectionné dans l'Inspecteur, utilisez la fonction Trouver automatiquement tous les rendus de maillage pour localiser tous les objets utilisant votre matériau cible.
Créez des emplacements pour chaque matériau entre lequel vous souhaitez changer (par exemple, "Métal Rouge", "Métal Bleu").
Faites glisser vos actifs de matériau souhaités depuis la fenêtre Projet dans leurs emplacements de variante correspondants dans l'Inspecteur.
Vous pouvez immédiatement tester le changement de matériau directement dans l'Éditeur en utilisant le curseur de prévisualisation.
- (2:06) - La vidéo présente la fonctionnalité principale du changement de matériau en temps réel
- (2:10) - Cette section couvre comment créer un Ensemble de variantes de matériaux à partir du menu Hiérarchie
- (2:20) - Le système peut trouver automatiquement tous les rendus de maillage utilisant un matériau spécifique
- (2:37) - Comment attribuer différents actifs de matériau aux champs de variante
- (2:52) - Testez le changement de variante dans l'Éditeur en utilisant le curseur de prévisualisation dans l'Inspecteur
Comment devrais-je configurer le canevas pour une interface utilisateur réactive ?
Pour garantir que votre interface utilisateur s'adapte correctement à différentes tailles d'écran et résolutions, vous devez ajuster les paramètres de Canvas Scaler.
Sur votre GameObject Canvas, trouvez le composant Canvas Scaler.
Réglez le mode d'échelle de l'interface utilisateur sur Scale With Screen Size.
Entrez une Reference Resolution, comme 1920 x 1080. C'est la résolution à laquelle votre interface utilisateur a été conçue.
Réglez la valeur de correspondance sur 0,5. Cela fournit une approche d'échelle équilibrée, mélangeant l'échelle entre la largeur et la hauteur de l'écran pour éviter la distorsion.
- (3:27) - Cette section de la vidéo montre comment régler le canevas pour qu'il s'adapte à la taille de l'écran
- (3:30) - Spécifiez la résolution 1920x1080 pour le Canvas Scaler
- (3:33) - Comment régler la valeur de correspondance sur 0,5 pour un redimensionnement équilibré de l'interface utilisateur sur différents rapports d'aspect
Comment puis-je créer des boutons d'interface utilisateur pour contrôler les variantes de matériau ?
Pour permettre aux utilisateurs de sélectionner différents matériaux, vous connectez des boutons d'interface utilisateur au Material Variant Set que vous avez créé.
Créez un bouton d'interface utilisateur en ajoutant un Panel puis un Button à votre scène.
Ajoutez le composant Variant Select à votre GameObject de bouton.
Dans l'inspecteur du bouton, trouvez la section d'événements On Click() et cliquez sur l'icône +.
Faites glisser le composant Variant Select que vous venez d'ajouter dans le champ d'objet de l'événement.
Dans le menu déroulant des fonctions, sélectionnez VariantSelect > SelectVariant (). Cela lie le clic du bouton à l'action de changement de variante.
Répétez ce processus pour chaque option de matériau, en créant un bouton séparé pour chaque variante.
- (3:01) - Cette section de la vidéo montre comment créer une interface pour que les utilisateurs contrôlent les configurations
- (3:14) - Ajoutez un bouton au canevas de l'UI et nommez-le de manière appropriée
- (3:40) - Le composant Variant Select est ajouté au bouton pour gérer la logique
- (3:47) - Cette section montre comment ajouter un nouvel événement d'exécution au bouton
- (3:56) - Choisissez le SelectVariant dans le menu déroulant pour lier le bouton au système
Consultez la page de documentation des systèmes UI pour en savoir plus.
Comment configurer plusieurs angles de caméra et passer de l'un à l'autre en utilisant l'UI ?
Cinemachine est utilisé pour créer des transitions de caméra professionnelles et fluides entre différents points de vue.
Assurez-vous que Cinemachine est installé via le Package Manager.
Créez des caméras virtuelles en allant à GameObject > Cinemachine > Create Cinemachine Camera. Positionnez deux ou trois de ces caméras à des angles de vue clés.
Ajoutez des boutons UI pour chaque vue de caméra que vous souhaitez que l'utilisateur sélectionne.
Pour l'événement On Click () de chaque bouton, faites glisser l'objet de la caméra virtuelle cible dans le champ d'objet.
Dans le menu déroulant des fonctions, sélectionnez CinemachineVirtualCamera > Prioritize ().
Lorsqu'un bouton est cliqué à l'exécution, il définira la priorité de cette caméra sur la valeur la plus élevée, ce qui fera que le cerveau Cinemachine se fondra en douceur vers cette vue.
- (4:45) - La section commence par l'ajout de contrôles de caméra professionnels avec Cinemachine
- (4:58) - Créez une caméra Cinemachine à partir du menu GameObject
- (5:11) - Le raccourci Align with View est recommandé pour définir rapidement une position de caméra initiale
- (6:09) - Utilisez des boutons UI pour contrôler l'activation de la caméra
- (6:23) - Sélectionnez la fonction Prioritize pour activer la caméra virtuelle choisie
Consultez la page de documentation de Cinemachine pour en savoir plus.
Quelles sont les étapes clés pour déployer un configurateur de produit sur le web ?
Pour rendre votre configurateur accessible depuis n'importe quel navigateur, vous pouvez le construire pour la plateforme web en utilisant les Profils de Build de Unity.
Dans l'Éditeur, ouvrez la fenêtre Profils de Build en naviguant vers Fichier > Profils de Build.
Sélectionnez « Web » comme votre plateforme cible dans la liste.
Assurez-vous que votre scène de configurateur est la seule incluse dans la Liste des Scènes de la build.
Optimisez les Paramètres du Player en allant dans Modifier > Paramètres du Projet > Player. Dans l'onglet Web, trouvez la section Paramètres de Publication.
Définissez le Format de Compression sur Brotli pour obtenir des tailles de build plus petites et des temps de chargement plus rapides pour les utilisateurs.
Cliquez sur Construire et Exécuter pour compiler le projet et l'ouvrir automatiquement dans votre navigateur web par défaut.
- (7:12) - La section explique comment utiliser les Profils de Build de Unity pour construire pour le Web
- (7:20) - Comment sélectionner Web comme plateforme cible
- (7:32) - Comment optimiser les Paramètres du Player pour le déploiement web
- (7:45) - Apprenez à définir le format de compression sur Brotli pour des tailles de fichiers plus petites
- (7:58) - Cliquez sur le bouton Construire et Exécuter pour générer la build web
Consultez la page de documentation sur le développement de plateforme et le Profil et optimiser une build Web Unity pour en savoir plus.
