Construisez un configurateur de produit simple dans Unity en une heure ou moins
Un configurateur de produit peut transformer la façon dont les clients interagissent avec vos produits en déplaçant l'expérience au-delà de la simple visualisation d'images statiques, vers une expérience interactive, fournissant finalement au spectateur des détails plus riches et plus d'informations.
Dans les applications industrielles, les configurateurs peuvent mettre en valeur 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.
Remarque: Ne manquez pas notre webinaire sur le Modèle de Configurateur de Produit qui aura lieu le 15 juillet !
Conditions préalables
Ce tutoriel s'adresse aux développeurs ayant des connaissances de niveau débutant à intermédiaire dans le développement de projets dans Unity. Pour compléter le tutoriel, vous aurez besoin de
1. Installer les éléments suivants:
- Unity 6 avec support de construction WebGL
- Une licence d'essai ou régulière pour Unity Industry
- Le package Configurateur de Produit d'Unity Industry, disponible sur GitHub
2. Ajouter un modèle 3D: Utilisez votre propre fichier de modèle 3D ou celui inclus dans le modèle.
3. Ajouter des matériaux de base: Ayez à disposition au moins 2-3 matériaux différents ou réutilisez les matériaux métalliques déjà inclus dans le tutoriel.
Temps estimé pour compléter: 30-60 minutes
Explorez le projet d'exemple
Ce tutoriel utilise le projet d'exemple Configurateur de produit industriel de Unity comme base d'apprentissage et point de départ. L'exemple démontre un configurateur complet fonctionnel avec changement de matériaux et de composants, contrôles de caméra et interface utilisateur – exactement les fonctionnalités que vous apprendrez à mettre en œuvre dans l'exercice.
L'exemple comprend des composants prêts à l'emploi pour la visibilité, ainsi que des variantes de matériaux, d'animation et de transformation, afin que vous puissiez vous concentrer sur votre produit plutôt que de construire des systèmes de variantes à partir de zéro.
Ouvrez le projet d'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 produit avant de créer le vôtre. Suivez ces étapes pour l'installer :
1. Dans le Unity Hub, créez un nouveau projet Unity en utilisant le modèle Universel 3D basé sur le Pipeline de rendu universel (URP).
2. Téléchargez et installez le projet d'exemple de configurateur de produit industriel :
- Pour installer le package, copiez l'URL du bouton vert Code sur le dépôt GitHub et ouvrez le gestionnaire de packages de Unity.
- Cliquez sur l'icône plus et sélectionnez Ajouter un package à partir de l'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ériaux, les bascules de visibilité des composants et les contrôles de caméra, vous donnant un aperçu immédiat de ce qui est possible et de la façon dont le système fonctionne. Le package ajoute des composants spécifiques au configurateur aux systèmes existants de Unity pour démarrer rapidement votre prototype.
4. Remarque : Si vous avez des problèmes avec l'installation de l'URL Git, consultez le guide de dépannage du gestionnaire de packages.
✓ Point de contrôle : Vous devriez maintenant voir des options Configurateur de produit 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 de configurateur qui vous aideront à tirer le meilleur parti de votre apprentissage.
Le configurateur de produit s'ouvre dans l'Éditeur
Importer un modèle 3D
Une fois que vous avez passé un certain temps à explorer l'exemple, l'étape suivante consiste à importer un modèle 3D auquel vous ajouterez une fonctionnalité de changement de matériau. Si vous souhaitez compléter ce tutoriel plus rapidement, vous pouvez utiliser le modèle Skidloader déjà inclus dans l'exemple (Recherchez Skidloader). Ou, vous pouvez facilement importer votre propre modèle avec l'une des deux options de conversion expliquées dans la section suivante : La fonctionnalité Optimiser et Convertir dans Unity Asset Manager ou le Unity Asset Transformer Toolkit. Vous pouvez également sauter cette section si vous souhaitez utiliser le modèle inclus dans le projet d'exemple.
Asset Manager
Si vous prévoyez de créer des configurateurs professionnels, envisagez d'intégrer Asset Manager dans votre flux de travail. Le Asset Manager de Unity est une solution de gestion d'actifs numériques (DAM) basée sur le cloud qui rationalise la façon 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 à Asset Manager est inclus dans un abonnement Unity Industry.
Vous pouvez préparer et optimiser vos modèles 3D en utilisant Asset Manager, en particulier avec sa fonctionnalité Optimiser et Convertir. Cela transforme vos actifs 3D en nettoyant les maillages, en optimisant le nombre de polygones et en les convertissant en 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 CAD avec Asset Transformer Toolkit
Si vous devez convertir des modèles CAD complexes, envisagez d'utiliser le Asset Transformer Toolkit de Unity, qui gère divers formats de fichiers CAD et fournit des fonctionnalités d'optimisation avancées. Importez des modèles CAD directement dans Unity, puis utilisez les outils d'Asset Transformer pour réduire le nombre 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 :
Configurez 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 correctement. Le modèle est maintenant prêt pour que vous ajoutiez la fonctionnalité de changement de matériau que vous avez observée dans le projet d'exemple.
✓ Point de contrôle : Votre scène doit contenir votre modèle 3D positionné de manière à ce que vous puissiez clairement le voir dans la vue Scène. Le modèle doit avoir des matériaux appliqués et être visible dans la vue Jeu.
Construisez la fonctionnalité de changement de matériau
Vous allez maintenant implémenter la fonctionnalité principale du configurateur – permettant aux utilisateurs de changer les matériaux de votre produit en temps réel.
Créer des variantes de matériau
1. Commencez par utiliser le composant intégré pour les ensembles de variantes en le choisissant 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 allons nous concentrer sur les Variantes de matériau.
- Le système de variantes de matériau du package utilise un système de détection qui trouve automatiquement tous les rendus de maillage utilisant votre matériau cible à travers des hiérarchies d'objets complexes.
2. Définissez votre matériau de base et l'objet parent en utilisant l'option Parent cible dans le composant, puis laissez l'outil Capture identifier tous les rendus de maillage pertinents. Cela garantit la cohérence entre les produits avec plusieurs composants tout en maintenant les performances.
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 changement, mettant automatiquement à jour les matériaux lorsque les variantes changent. Utilisez le curseur de prévisualisation intégré dans l'Inspecteur pour tester les variantes immédiatement et voir à quoi ressemblent vos finitions rouge et bleue 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 - Bleue) dans votre composant Ensemble de Variantes de Matériau. Lorsque vous faites glisser le curseur de prévisualisation dans l'Inspecteur, votre modèle devrait changer entre les finitions métalliques rouge et bleue en temps réel dans la vue de la Scène.
Pour de l'aide à la création de matériaux, consultez la documentation sur les matériaux de Unity.
Connectez les variantes à l'interface utilisateur
Le package Product Configurator comprend un composant VariantSelect qui génère des menus déroulants d'ensembles de variantes existants pour un développement rapide du configurateur. Cette fonctionnalité est conçue pour que les non-développeurs puissent facilement choisir des ensembles de variantes dans la scène et s'intègre directement au système d'événements de 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éez l'interface utilisateur
Avec vos variantes de matériaux fonctionnant, 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 nouveau UI Toolkit. 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 et déposez un bouton du menu UI 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 des objets Canvas et EventSystem dans votre scène. Le Canvas agit comme le conteneur pour tous les éléments d'interface utilisateur, tandis que l'EventSystem gère les entrées utilisateur comme les clics de bouton.
- Assurez-vous que le composant Canvas est réglé sur Échelle avec la taille de l'écran. Ce paramètre permet aux éléments d'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 correspondre aux dimensions de votre écran cible – dans cet exemple, cela pourrait être 1920x1080. Cela définit la résolution de base sur laquelle votre mise en page d'interface utilisateur est basée. De plus, réglez la propriété Match sur 0.5, ce qui équilibre l'échelle de largeur et de hauteur, garantissant que vos éléments d'interface utilisateur s'échelonnent uniformément, que l'écran soit plus large ou plus haut que la référence.Astuce d'ancrage UI : Pour garder les boutons ancrés à des bords spécifiques de l'écran (haut/bas), sélectionnez votre élément UI et cliquez sur le préréglage d'ancrage souhaité dans le panneau Ancrages Préréglés du composant Rect Transform. En savoir plus dans le Guide d'Ancrage de l'UI Unity
2. Pour connecter votre bouton à la sélection de variante, sélectionnez votre bouton dans la Hiérarchie, trouvez le composant Bouton dans l'Inspecteur, et cherchez la section OnClick().
3. Cliquez sur "+" pour ajouter un nouvel événement, faites glisser votre GameObject avec le composant VariantSelect dans le champ d'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 souhaitez en savoir plus sur les fondamentaux de l'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 changer pour une finition métallique rouge. Cliquez sur le bouton Métal 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 de jeu.
Si les boutons ne fonctionnent pas, vérifiez que vos événements OnClick sont correctement connectés et consultez la documentation des Boutons Unity.
Pour les utilisateurs avancés : Si vous êtes à l'aise avec le scripting, cette vidéo à partir de la 20:10 montre comment générer automatiquement des boutons UI en utilisant le script VariantSetController, qui crée des boutons dynamiquement avec des noms et des fonctionnalités corrects.
Ajouter des contrôles de caméra
Une interface de configurateur complète devrait également donner aux utilisateurs le contrôle sur la façon dont ils visualisent le produit, leur permettant d'explorer différents angles et perspectives.
Pour offrir à votre configurateur la meilleure expérience utilisateur, vous pouvez utiliser le package Cinemachine, qui fournit une solution sans code pour configurer des vues de caméra professionnelles. Le projet d'exemple du configurateur inclut déjà une configuration Cinemachine, vous pouvez donc immédiatement commencer à ajouter vos propres caméras.
1. Pour créer un nouvel angle de caméra pour votre produit, allez à GameObject > Cinemachine > Caméra pour ajouter une nouvelle caméra virtuelle à votre scène. Positionnez cette caméra pour montrer votre produit sous l'angle souhaité, par exemple, une vue rapprochée qui met en évidence les changements de matériau.
- Astuce : Utilisez Aligner avec la Vue (Ctrl-Shift-F sur Windows ou Cmd-Shift-F sur Mac) comme point de départ. Cela déplace votre caméra à la même position que votre vue de scène. À partir de cette position, il est plus facile de trouver l'angle souhaité.
2. Dans le composant de caméra Cinemachine, définissez la valeur de Priorité pour déterminer quand cette caméra doit être active (des 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 transitions entre les différentes caméras, prenant toujours la caméra virtuelle avec la plus haute priorité. Voir cette vidéo pour en savoir plus sur l'utilisation de Cinemachine dans Unity 6.
4. Connexion des caméras aux contrôles UI : Pour activer différentes vues de caméra, créez des boutons UI (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. Cela définira la priorité sur la plus haute et donc cette caméra virtuelle sera la caméra active.
5. Configuration du contrôle de caméra interactif : Pour un mouvement de caméra interactif, utilisez une caméra FreeLook qui permet un mouvement d'orbite contrôlé par la souris autour de votre produit.
6. Configuration des actions d'entrée : Dans le composant Contrôleur d'Axe d'Entrée Cinemachine, vous verrez la section Axes Pilotés avec les options Look Orbit X, Look Orbit Y et Orbit Scale. Ceci doit être configuré avec les actions d'entrée Joueur/Regarder 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 Joueur/Regarder de ce dossier vers les champs d'entrée pour Look Orbit X et Look Orbit Y dans la section Axes Pilotés. Cela active la caméra contrôlée par 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.
Finitions et déploiement web
Avec votre configurateur interactif terminé, la dernière étape consiste à le préparer pour le déploiement 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 votre 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 souhaitez pas construire.
Pour déployer votre configurateur sur WebGL, utilisez l'option Web comme plateforme.
Si vous voyez le message Aucun module Web chargé avec un bouton Installer avec 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 WebGL Build Support. Vous devrez redémarrer l'éditeur pour charger le nouveau module.
Une fois le module WebGL Build Support 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 déploiement dans le navigateur.
Après être passé à la plateforme WebGL, examinez les paramètres du lecteur pour une optimisation spécifique au web. Allez à Modifier > Paramètres du projet > Lecteur 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 des paramètres du lecteur Web de Unity pour des conseils détaillés sur l'optimisation de ces paramètres
Une fois que tout est prêt, cliquez sur Construire et exécuter. Unity générera un dossier avec tout ce qu'il faut 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 seulement sur Construire, vous devrez héberger la sortie sur un serveur web local ou distant. Unity propose également une option d'hébergement via Unity Play.
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 package fonctionnent bien dans les builds 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 build complet contenant un fichier index.html, des données de jeu compressées et tous les actifs 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 build devrait 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 en métal rouge et en métal bleu qui changent la finition de votre modèle en temps réel.
Optionnel : Créer un environnement industriel réaliste
Pour une présentation professionnelle améliorée, envisagez d'ajouter l'un des packages 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 épurées avec un éclairage préconfiguré et des profils de post-traitement. Ces packages fournissent la base pour une visualisation réaliste des produits sans nécessiter une création d'environnement extensive. De plus, Unity Hub inclut le modèle URP 3D Sample Scene qui démontre des configurations d'éclairage et de rendu optimisées.
Optionnel : UI avancée avec UI Toolkit
Pour un développement d'UI plus avancé, Unity propose UI Toolkit, qui s'inspire des pratiques de développement web, utilisant des structures similaires à CSS et XML (dans UI Toolkit, les équivalents sont appelés USS et UXML). Construire votre interface de configurateur en utilisant UI Toolkit nécessite un peu de codage en C# pour définir et chronométrer la fonctionnalité des boutons. C'est parce que UI Toolkit n'offre pas de moyen prêt à l'emploi de connecter les clics de boutons avec la fonctionnalité. L'interface utilisateur du projet d'exemple est construite avec Unity UI Toolkit, offrant des informations précieuses sur sa mise en œuvre.
Ci-dessous, vous pouvez voir un petit extrait de code montrant comment faire en sorte qu'un bouton spécifique (appelé changer) effectue 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.
Optionnel : Fonctionnalité avancée des variantes
Au-delà du simple échange de matériaux, le package prend en charge les variantes d'animation et de transformation pour des démonstrations dynamiques. Utilisez-les pour des produits avec des pièces mobiles, des composants réglables ou des fonctionnalités qui bénéficient de présentations 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 mettre en valeur la fonctionnalité d'un 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 sur la façon de construire un configurateur avec le package Unity Industry Product Configurator. Que vous construisiez pour des équipements industriels, des produits de consommation ou de la visualisation architecturale, cette base fournit tout ce qu'il faut pour créer des configurateurs convaincants qui génèrent des résultats commerciaux.
Read the article
Fill out this form to stay up-to-date with Unity’s latest offerings and solutions
