Build a simple product configurator in Unity in one hour or less
Cette page a été traduite automatiquement pour faciliter votre expérience. Nous ne pouvons pas garantir l'exactitude ou la fiabilité du contenu traduit. Si vous avez des doutes quant à la qualité de cette traduction, reportez-vous à la version anglaise de la page web.
Un configurateur de produits peut transformer la manière dont les clients interagissent avec vos produits en faisant passer l'expérience de la simple visualisation d'images statiques à une expérience interactive, offrant ainsi au spectateur des détails et plus d'informations plus riches.
Dans les applications industrielles, les configurateurs peuvent présenter des équipements complexes, permettre une personnalisation en temps réel et aider les clients à visualiser les produits dans leurs contextes spécifiques.
Dans ce tutoriel, vous construirez votre premier configurateur de produit déployable sur le web en une heure ou moins. Votre configurateur permettra aux utilisateurs de changer différents matériaux sur un modèle 3D à l'aide d'une interface simple. À la fin, vous aurez une compréhension des fonctionnalités fondamentales pour créer des configurateurs de produits professionnels.
Si vous préférez suivre ce tutoriel avec une vidéo, vous pouvez la regarder ici.
Pour plus d'informations, consultez notre webinaire sur le Modèle de configurateur de produits
Conditions préalables
Ce tutoriel s'adresse aux développeurs ayant des connaissances de débutant à intermédiaire dans le développement de projets dans Unity. Pour terminer le tutoriel, vous devrez
1. Installer les éléments suivants:
- Unity 6 avec support de build WebGL
- Une licence essai ou régulière pour Unity Industry
Le package Configurateur de produits industriels d'Unity, disponible sur GitHub
2. Ajouter un modèle 3D: Utilisez votre propre fichier modèle 3D ou celui inclus dans le modèle.
3. Ajouter les matériaux de base: Ayez à portée de main au moins 2 à 3 matériaux différents ou réutilisez les matériaux métalliques déjà inclus dans le tutoriel.
Temps estimé d'achèvement: 30 à 60 minutes
Explorer le projet d'exemple
Ce tutoriel utilise le projet d'exemple Industry Product Configurator d'Unity comme base d'apprentissage et point de départ. L'exemple démontre un configurateur complet et fonctionnel avec commutation de matériaux et de composants, commandes de caméra et interface utilisateur – exactement les fonctionnalités que vous apprendrez à implémenter dans l'exercice.
L'échantillon comprend des composants prêts à l'emploi pour la visibilité, ainsi que des variantes de matériaux, d'animations et de transformations, vous permettant de vous concentrer sur votre produit plutôt que de construire des systèmes de variantes à partir de zéro.
Ouvrez le projet exemple et créez votre propre scène
En explorant d'abord le projet d'exemple, vous obtiendrez une expérience pratique avec un configurateur de produits avant d'en construire un. Suivez ces étapes pour l'installer :
1. Dans Unity Hub, créez un nouveau projet Unity en utilisant le modèle Universal 3D basé sur Universal Render Pipeline (URP).
2. Téléchargez et installez le projet d'exemple Configurateur de produits industriels:
- Pour installer le package, copiez l'URL du bouton vert Code sur le dépôt GitHub et ouvrez le Package Manager d'Unity.
- Cliquez sur l'icône plus et sélectionnez Ajouter un paquet à partir d'une URL Git, puis collez le lien du dépôt. Unity téléchargera et installera tous les composants nécessaires.
3. Une fois le téléchargement terminé, ouvrez la scène d'exemple et exécutez-la pour voir un configurateur entièrement fonctionnel en action. L'exemple démontre le changement de matériau, les bascules de visibilité des composants et les commandes de caméra, vous donnant un aperçu immédiat de ce qui est possible et du fonctionnement du système. Le package ajoute des composants spécifiques au configurateur aux systèmes existants de Unity pour démarrer votre prototype.
4. Remarque : Si vous rencontrez des problèmes avec l'installation de l'URL Git, consultez le guide de dépannage du gestionnaire de paquets.
✓ Point de contrôle: Vous devriez maintenant voir les options Product Configurator lorsque vous faites un clic droit dans la Hiérarchie ou sous le menu GameObject. Il y a aussi de bonnes instructions dans le dépôt GitHub pour l'exemple du configurateur qui vous aideront à en tirer le plus d'apprentissage.
Le configurateur de produit s'ouvre dans l'Éditeur
Apportez un modèle 3D
Une fois que vous aurez passé un certain temps à explorer l'exemple, l'étape suivante consiste à importer un modèle 3D auquel vous ajouterez une fonctionnalité de commutation de matériaux. Si vous voulez terminer ce tutoriel plus rapidement, vous pouvez utiliser le modèle Skidloader déjà inclus dans l'exemple (Recherchez Skidloader). Ou, vous pouvez facilement apporter votre propre modèle avec l'une des deux options de conversion expliquées dans la section suivante : La fonctionnalité Optimize and Convert feature au sein de Unity Asset Manager ou du Unity Asset Transformer Toolkit. Vous pouvez également sauter cette section si vous souhaitez utiliser le modèle inclus dans le projet d'exemple.
Gestionnaire d'actifs
Si vous prévoyez de créer des configurateurs professionnels, envisagez d'intégrer Asset Manager dans votre flux de travail. L'Asset Manager d'Unity est une solution de gestion d'actifs numériques (DAM) basée sur le cloud qui rationalise la manière dont les équipes peuvent télécharger, gérer, transformer, partager et accéder à leurs actifs 3D complexes en temps réel. L'accès à l'Asset Manager est inclus dans un abonnement Unity Industry.
Vous pouvez préparer et optimiser vos modèles 3D à l'aide de Asset Manager, en particulier avec sa fonctionnalité Optimize and Convert. Ceci transforme vos actifs 3D en nettoyant les maillages, en optimisant les comptes de polygones et en les convertissant dans des formats prêts pour Unity. Ce processus se termine en moins d'une minute et améliore l'efficacité du flux de travail pour les conversions de fichiers volumineux.
En savoir plus sur Asset Manager ici :
- Comment utiliser Unity Asset Manager
- Introduction aux méthodes de transfert d'Asset Manager.
Flux de travail CAO avec Asset Transformer Toolkit
Si vous devez convertir des modèles CAO complexes, envisagez d'utiliser le Asset Transformer Toolkit d'Unity, qui gère divers formats de fichiers CAO et fournit des fonctionnalités d'optimisation avancées. Importez des modèles CAO directement dans Unity, puis utilisez les outils d'Asset Transformer pour réduire les comptes de polygones, simplifier les matériaux et préparer les modèles pour la visualisation en temps réel.
En savoir plus sur le plugin Asset Transformer ici :
Mettez en place votre scène
Commencez par créer une nouvelle scène pour votre configurateur. Ajoutez le Skidloader à la scène vide, ou si vous utilisez votre propre modèle 3D, importez-le dans la scène et positionnez-le de manière appropriée. Le modèle est maintenant prêt pour que vous ajoutiez la fonctionnalité de commutation de matériel que vous avez observée dans le projet d'exemple.
✓ Point de contrôle: Votre scène doit contenir votre modèle 3D positionné là où vous pouvez le voir clairement dans la vue Scène. Le modèle doit avoir des matériaux appliqués et être visible dans la vue Jeu.
Construire la fonctionnalité de commutation de matériau
Maintenant, vous allez implémenter la fonctionnalité principale de configuration – permettant aux utilisateurs de changer les matériaux de votre produit en temps réel.
Créer des variantes de matériaux
1. Commencez par utiliser le composant intégré pour les ensembles de variantes en le sélectionnant dans le menu GameObject ou en cliquant avec le bouton droit dans la Hiérarchie. Vous aurez différentes options, mais pour ce tutoriel, nous nous concentrerons sur les variantes de matériaux.
Le système de variante de matériaux du paquet utilise un système de détection qui trouve automatiquement tous les moteurs de rendu de maillage utilisant votre matériau cible à travers des hiérarchies d'objets complexes.
2. Définissez votre matériau de base et votre objet parent en utilisant l'option Parent Cible dans le composant, puis laissez l'outil Capture identifier tous les afficheurs de maillage pertinents. Ceci assure la cohérence entre les produits comportant plusieurs composants tout en maintenant la performance.
Définissez votre matériau de base
3. Réutilisez ces deux matériaux avec des finitions métalliques, Peinture Métallique - Rouge et Peinture Métallique - Bleu (ou créez vos propres équivalents). Assignez les matériaux à chaque emplacement de variante en les faisant glisser dans les champs de variante. Le système gère toute la logique de commutation, mettant automatiquement à jour les matériaux lorsque les variantes changent. Utilisez le curseur de prévisualisation intégré dans l'Inspecteur pour tester immédiatement les variantes et voir à quoi ressemblent vos finitions rouges et bleues sur votre modèle.
✓ Point de contrôle: Vous devriez maintenant voir deux Variantes de Matériau (Peinture Métallique - Rouge et Peinture Métallique - Bleu) dans votre composant Material Variant Set. Lorsque vous faites glisser le curseur de prévisualisation dans l'Inspecteur, votre modèle doit changer entre les finitions métalliques rouges et bleues en temps réel dans la vue Scène.
Pour obtenir de l'aide sur la création de matériaux, consultez la documentation des matériaux d'Unity.
Connecter les variantes à l'interface utilisateur
Le package Product Configurator inclut un composant VariantSelect qui génère des menus déroulants d'ensembles de variantes existants pour un développement rapide de configurateurs. Cette fonctionnalité est conçue pour que les non-développeurs puissent sélectionner facilement des ensembles de variantes dans la scène et s'intègre directement au système d'événements d'Unity, vous permettant de créer des configurateurs fonctionnels sans script personnalisé. Ceci est particulièrement utile pour les utilisateurs qui utilisent la solution uGUI, leur permettant d'assigner directement le composant à l'événement OnClick.
Créer l'interface utilisateur
Avec vos variantes de matériaux fonctionnelles, vous avez besoin d'une interface qui permet aux utilisateurs de contrôler ces configurations et d'interagir avec votre configurateur de produit.
Unity propose deux systèmes d'interface utilisateur : un système d'interface utilisateur basé sur GameObject (uGUI) et le UI Toolkit plus récent. Pour ce tutoriel, nous utiliserons le système uGUI basé sur GameObject car il permet une intégration par glisser-déposer avec le composant VariantSelect sans nécessiter de code.
1. Faites glisser un bouton du menu de l'interface utilisateur dans la Hiérarchie et nommez-le (par exemple, « Bouton Métal Rouge »).
- Lorsque vous créez votre premier élément d'interface utilisateur, Unity créera automatiquement les objets Canvas et EventSystem dans votre scène. La toile agit comme le conteneur pour tous les éléments d'interface utilisateur, tandis que le système d'événements gère les entrées utilisateur comme les clics de bouton.
- Assurez-vous que le composant Canvas est réglé sur Scale With Screen Size. Ce paramètre permet aux éléments de l'interface utilisateur de maintenir des proportions cohérentes sur différentes résolutions d'écran. Réglez la Résolution de référence pour qu'elle corresponde aux dimensions de votre écran cible – dans cet exemple, cela pourrait être 1920x1080. Ceci définit la résolution de base sur laquelle est basé votre agencement d'interface utilisateur. De plus, définissez la propriété Match sur 0.5, ce qui équilibre l'échelle de largeur et de hauteur, garantissant que vos éléments d'interface s'adaptent uniformément, que l'écran soit plus large ou plus haut que la référence.Conseil d'ancrage de l'interface utilisateur: Pour maintenir les boutons ancrés aux bords spécifiques de l'écran (haut/bas), sélectionnez votre élément d'interface utilisateur et cliquez sur le préréglage d'ancrage souhaité dans le panneau Anchor Presets du composant Rect Transform. En savoir plus dans le Guide d'ancrage Unity UI
2. Pour connecter votre bouton à la sélection de variante, sélectionnez votre button dans la Hiérarchie, trouvez le composant Button dans l'Inspecteur et recherchez la section OnClick().
3. Cliquez sur "+" pour ajouter un nouvel événement, faites glisser votre GameObject avec le composant VariantSelect dans le champ objet, choisissez VariantSelect dans le menu déroulant et sélectionnez SelectVariant pour déclencher le changement de matériau lorsque le bouton est cliqué.
4. Créez des boutons supplémentaires pour chaque finition de matériau (Bouton Métal Bleu) et connectez-les de la même manière. Si vous voulez en savoir plus sur les fondamentaux d'uGUI, visitez ce tutoriel pour maîtriser les bases.
✓ Point de contrôle: Cliquez sur le mode Lecture, puis cliquez sur le bouton Métal Rouge et votre modèle devrait passer à une finition métallique rouge. Cliquez sur le bouton métallique bleu pour le changer en bleu. Vous devriez voir un Canvas et un EventSystem dans votre Hiérarchie, et vos boutons devraient être visibles dans la vue du jeu.
Si les boutons ne fonctionnent pas, vérifiez que vos événements OnClick sont correctement connectés et consultez la documentation Button documentation d'Unity.
Pour les utilisateurs avancés: Si vous êtes à l'aise avec le scripting, cette vidéo à la marque 20:10 montre comment générer automatiquement des boutons d'interface utilisateur à l'aide du script VariantSetController, qui crée des boutons dynamiquement avec les noms et les fonctionnalités corrects.
Ajouter des commandes de caméra
Une interface de configurateur complète doit également donner aux utilisateurs le contrôle sur la manière dont ils visualisent le produit, leur permettant d'explorer différents angles et perspectives.
Pour offrir la meilleure expérience utilisateur à votre configurateur, vous pouvez utiliser le package Cinemachine, qui fournit une solution sans code pour configurer des vues de caméra professionnelles. Le projet exemple du configurateur inclut déjà une configuration Cinemachine, vous pouvez donc commencer immédiatement à ajouter vos propres caméras.
1. Pour créer un nouvel angle de caméra pour votre produit, allez dans GameObject > Cinemachine > Camera pour ajouter une nouvelle caméra virtuelle à votre scène. Positionnez cette caméra pour montrer votre produit sous l'angle souhaité, par exemple, un gros plan qui met en évidence les changements de matériau.
- Conseil: Utilisez Aligner sur la vue (Ctrl-Maj-F sur Windows ou Cmd-Maj-F sur Mac) comme point de départ. Ceci déplace votre caméra à la même position que votre vue Scène. De cette position, il est plus facile de trouver l'angle souhaité.
2. Dans le composant Camera de Cinemachine, définissez la valeur Priority pour déterminer quand cette caméra doit être active (les nombres plus élevés ont la priorité). Utilisez le bouton Solo dans le composant de caméra Cinemachine pour tester vos différentes vues de caméra.
3. Ajoutez deux à trois caméras pour différents angles de vue. Le composant Cinemachine Brain (ajouté automatiquement à votre caméra principale) contrôle les mélanges entre les différentes caméras, prenant toujours la caméra virtuelle avec la priorité la plus élevée. Voir cette vidéo pour en savoir plus sur l'utilisation de Cinemachine dans Unity 6.
4. Connecter les caméras aux commandes de l'interface utilisateur: Pour activer différentes vues de caméra, créez des boutons d'interface utilisateur (copiez et collez à partir de vos boutons de variante de matériel et renommez-les pour les caméras). Pour l'événement OnClick, faites glisser la caméra que vous souhaitez contrôler et utilisez l'option Prioriser. Ceci définira la priorité sur Élevée et par conséquent cette caméra virtuelle sera la caméra active.
5. Configuration du contrôle interactif de la caméra: Pour un mouvement de caméra interactif, utilisez une caméra FreeLook camera qui permet un mouvement d'orbite contrôlé par la souris autour de votre produit.
6. Configurer les actions d'entrée: Dans le composant Cinemachine Input Axis Controller, vous verrez la section Driven Axes avec les options Look Orbit X, Look Orbit Y et Orbit Scale. Ceci doit être configuré avec les actions d'entrée Player/Look du package Product Configurator. Pour trouver ces actions, naviguez vers :
Assets/Samples/Product Configurator/1.6.0/Standard Configuration Setup/StandardUIAction
Faites glisser l'action Player/Look de ce dossier dans les champs d'entrée pour Look Orbit X et Look Orbit Y dans la section Driven Axes. Ceci permet de contrôler la caméra avec la souris uniquement lorsque le bouton droit de la souris est cliqué
Maintenant, vous êtes prêt à tester votre configurateur avec plusieurs angles de caméra que les utilisateurs peuvent contrôler via l'interface.
Touches finales et Deployment web
Avec votre configurateur interactif terminé, la dernière étape consiste à le préparer pour le Deployment web afin que les utilisateurs puissent y accéder depuis leurs navigateurs.
Construire pour WebGL avec des profils de construction
Pour déployer votre configurateur sur WebGL, utilisez l'option Web comme plateforme. Naviguez vers Fichier > Profils de construction et sélectionnez Web comme plateforme cible dans le côté gauche de la fenêtre. Assurez-vous que votre scène est présente dans la liste des scènes et supprimez toutes les autres scènes que vous ne voulez pas créer.
Pour déployer votre configurateur sur WebGL, utilisez l'option Web comme plateforme.
Si vous voyez le message No Web module loaded avec un bouton Install with Unity Hub, vous devrez installer le module WebGL Build Support. Cliquez sur le bouton d'installation et Unity Hub téléchargera et installera le module de support de construction WebGL. Vous devrez redémarrer l'Éditeur pour charger le nouveau module.
Une fois le module de support de construction WebGL installé, configurez les paramètres de construction, y compris les options de compression de texture, les niveaux d'optimisation du code et les contraintes de mémoire adaptées au Deployment dans un navigateur.
Après être passé à la plateforme WebGL, révisez les paramètres du joueur pour l'optimisation spécifique au web. Allez dans Modifier > Paramètres du projet > Joueur et sélectionnez l'onglet Web. Dans la section Paramètres de publication, vous pouvez définir le Format de compression sur Brotli (recommandé pour des tailles de fichiers plus petites). Consultez la documentation Web Player settings de Unity pour des conseils détaillés sur l'optimisation de ces paramètres
Une fois que tout est prêt, cliquez sur Build and Run. Unity générera un dossier contenant tout ce qui est nécessaire pour lancer votre configurateur dans un navigateur web. Le navigateur s'ouvrira automatiquement et vous devriez voir votre construction fonctionner sans problème. Si vous cliquez uniquement sur Build, vous devrez héberger le résultat sur un serveur web local ou distant. Unity fournit également une option d'hébergement via Unity Play. Si vous êtes sur Unity 6.1 ou supérieur, Unity fournit une option pour publier directement sur Unity Play depuis les paramètres de construction WebGL.
Vous devriez maintenant voir une fenêtre de navigateur s'ouvrir et votre application est en ligne.
Tester et publier en ligne
Testez votre configurateur sur différents navigateurs et appareils pour garantir des performances cohérentes. Les composants du paquet fonctionnent bien dans les constructions WebGL, mais considérez comment le changement de variante fonctionne sur les appareils cibles et ajustez la complexité en conséquence.
Unity crée un dossier de construction complet contenant un fichier index.html, des données de jeu compressées et tous les éléments nécessaires. Ce dossier peut être hébergé sur n'importe quel serveur web standard, rendant votre configurateur accessible via n'importe quel navigateur web moderne.
✓ Succès final: Vous avez maintenant un configurateur de produit fonctionnel. Votre dossier de construction doit contenir un fichier index.html qui, lorsqu'il est ouvert dans un navigateur (ou hébergé sur un serveur web), affiche votre modèle 3D avec des boutons interactifs Métal Rouge et Métal Bleu qui changent la finition de votre modèle en temps réel.
Facultatif : Créer un environnement industriel réaliste
Pour une présentation professionnelle améliorée, envisagez d'ajouter l'un des paquets d'environnement de l'Asset Store de Unity. Unity fournit des environnements industriels officiels comme Unity Factory et Unity Warehouse, ou recherchez des configurations de studio propres avec des profils d'éclairage et de post-traitement préconfigurés. Ces paquets fournissent la base pour une visualisation de produit réaliste sans nécessiter de création d'environnement étendue. De plus, Unity Hub inclut le modèle URP 3D Sample Scene qui démontre des configurations d'éclairage et de rendu optimisées.
Facultatif : Interface utilisateur avancée avec UI Toolkit
Pour un développement d'interface utilisateur plus avancé, Unity propose UI Toolkit, qui s'inspire des pratiques de développement web, en utilisant des structures similaires au CSS et au XML (dans UI Toolkit, les équivalents sont appelés USS et UXML). Construire votre interface de configurateur en utilisant UI Toolkit nécessite un certain codage en C# pour définir et gérer la fonctionnalité des boutons. C'est parce que UI Toolkit n'offre pas de moyen intégré de connecter les clics de bouton à des fonctionnalités. L'interface utilisateur du projet d'exemple est construite avec Unity UI Toolkit, offrant des aperçus précieux de son implémentation.
Vous pouvez voir ci-dessous un petit extrait de code montrant comment faire en sorte qu'un bouton spécifique (appelé change) exécute une action définie à partir du composant de sélection de variante :
using IndustryCSE.Tool.ProductConfigurator.Runtime;
using UnityEngine;
using UnityEngine.UIElements;
public class SimpleUIController : MonoBehaviour
{
[SerializeField]
private VariantSelect variantSelect; // Reference to the VariantSelect instance
[SerializeField]
private UIDocument uiDocument; // Reference to the UI Document
private void Start()
{
if (variantSelect == null || uiDocument == null) return;
// Get the root visual element
var root = uiDocument.rootVisualElement;
// Query the button named "change"
var changeButton = root.Q<Button>("change");
if (changeButton != null)
{
// Add a callback to the button
changeButton.clicked += () =>
{
variantSelect.SelectVariant(); // Trigger the variant selection
};
}
}
}
Pour apprendre à ajouter un bouton à votre interface utilisateur en utilisant UI Toolkit, consultez ce tutoriel sur Unity Learn.
Facultatif : Fonctionnalité de variante avancée
Au-delà du simple échange de matériaux, le paquet prend en charge les variantes d'animation et de transformation pour des démonstrations dynamiques. Utilisez-les pour les produits avec des pièces mobiles, des composants ajustables ou des fonctionnalités qui bénéficient de vitrines animées. Les variantes de transformation gèrent les modifications de position, de rotation et d'échelle, tandis que les variantes d'animation démontrent la fonctionnalité ou fournissent des transitions engageantes. Ces fonctionnalités avancées fonctionnent très bien lorsque vous souhaitez présenter les fonctionnalités du produit ou créer des expériences de configurateur plus engageantes.
Au-delà du simple échange de matériaux, vous pouvez également utiliser des variantes d'animation et de transformation pour des démonstrations dynamiques.
Vous avez maintenant les connaissances de base, construisez un configurateur avec le package Industry Product Configurator d'Unity. Que vous développiez pour des produits grand public, des équipements industriels ou la visualisation architecturale, cette base fournit tout ce qui est nécessaire pour créer des configurateurs convaincants qui génèrent des résultats commerciaux.
