Créez votre premier configurateur de canapé

Créer un configurateur de canapé 3D interactif peut sembler complexe, mais avec Amaspace la démarche est simple et guidée. Ce tutoriel pas à pas vous accompagne dans la création d'un configurateur fonctionnel pour un canapé multi-matières et multicolore, prêt à être déployé sur votre boutique en ligne.

Ce guide s'adresse aux chefs de produit, aux équipes e-commerce et aux développeurs qui mettent en place un canapé personnalisable pour la première fois.

Ce que vous allez apprendre

• Importer votre modèle de base et les assets complémentaires
• Organiser la logique de personnalisation avec des catégories et des attributs
• Lier des matériaux et des textures à votre modèle 3D
• Définir des règles et une logique pour une expérience utilisateur plus claire
• Publier votre configurateur et le prévisualiser

Étape 1 : créer un nouveau produit

Commencez par cliquer sur « Create Product » depuis votre tableau de bord. Ajoutez les informations de base du produit : nom, description, prix et image d'aperçu. Vous importez aussi le modèle 3D de base du canapé : c'est l'asset sur lequel repose votre configurateur.

Une fois créé, le produit apparaît dans votre liste. Cliquez dessus pour ouvrir sa page interne.

Étape 2 : importer les assets supplémentaires

Ici, vous importez les éléments de personnalisation préparés par votre artiste 3D. Dans cet exemple, nous utilisons deux matériaux différents, chacun avec ses propres textures précalculées. Ces assets relèvent de trois types pris en charge :

• Modèle
• Matériau
• Texture

Dans ce tutoriel, nous travaillons uniquement avec des matériaux. Ils seront convertis en options sélectionnables dans votre configurateur.

Étape 3 : ouvrir le 3D Editor

Une fois vos assets importés, cliquez sur le bouton 3D Editor. C'est ici que vous définissez la logique de configuration et la présentation. Vous y trouvez deux barres latérales principales :

• La barre latérale gauche sert à créer et organiser les catégories et les attributs
• La barre latérale droite sert à modifier chaque élément sélectionné (par exemple définir les valeurs par défaut ou lier des pièces du modèle)

Étape 4 : regrouper les attributs dans une catégorie

Dans Amaspace, chaque ensemble d'options personnalisables doit se trouver dans une catégorie. Votre éditeur reste ainsi structuré et lisible. Pour cet exemple, créez une catégorie nommée par exemple « Matière et couleur du canapé ».

Dans cette catégorie, vous définissez un attribut pour chaque option de matériau.

Étape 5 : créer les attributs de matériau

Créez maintenant deux attributs distincts, un pour chaque matériau du canapé (par exemple « Options tissu » et « Options cuir »). Chacun contiendra quelques variantes de couleur ou de texture parmi lesquelles le client pourra choisir.

Étape 6 : ajouter des PCO avec l'Asset Library

En bas de la barre latérale gauche, ouvrez l'Assets Library. Allez dans l'onglet « Assets » et filtrez par :

• Current product (produit actuel)
• Asset type: Material (type d'asset : matériau)

Faites glisser les matériaux voulus dans l'attribut correspondant. Ils sont convertis en PCO (Product Customization Options). Une fois ajoutés, vous pouvez modifier :

• L'impact sur le prix
• Le nom d'affichage
• La miniature d'aperçu
• La sélection par défaut

Étape 7 : lier les matériaux au modèle

Pour que vos options fonctionnent, vous devez les lier à des parties précises de votre modèle 3D.

• Sélectionnez un attribut
• Utilisez le Part Picker pour cliquer sur la zone de maillage ou de matériau correspondante du modèle

Ainsi, les choix du client mettent à jour le modèle en temps réel.

Étape 8 : définir des règles pour une UX plus claire

Vous voulez empêcher les utilisateurs de choisir des options dans les deux attributs à la fois. Pour cela, créez des règles :

• Chaque règle comprend une Condition (par exemple « si Tissu est sélectionné »)
• Et une Action (par exemple « régler l'attribut Cuir sur aucun »)

Vous devez créer une règle pour chaque combinaison incompatible. Ainsi, un seul groupe est actif à la fois et vous évitez les configurations incohérentes.

Dupliquer puis modifier des règles existantes accélère nettement cette étape.

Étape 9 : régler la caméra dans le Scene Editor

Pour présenter votre produit sous son meilleur jour, ouvrez le 3D Scene Editor.

• Ouvrez la section « Camera » dans la barre latérale droite
• Choisissez la vue Configurator
• Ajustez la position de la caméra avec votre souris ou votre pavé tactile
• Une fois le cadrage idéal trouvé, cliquez sur « Save »

Vos utilisateurs voient ainsi le produit sous le bon angle dès le chargement de la page.

Étape 10 : activer un environnement par défaut

Dans le même éditeur, activez l'environnement 3D par défaut. Il ajoute un décor avec un sol réfléchissant pour un rendu plus réaliste.

Étape 11 : publier votre produit

Revenez dans l'éditeur de produit et cliquez sur Manage → Publish. Votre configurateur est alors disponible pour l'aperçu en direct et les tests.

Étape 12 : prévisualiser et tester

Parcourez vos groupes de matériaux et les textures disponibles. Vous verrez le prix se mettre à jour, le modèle réagir à chaque choix et les règles bloquer les combinaisons non valides.

Récapitulatif

En quelques étapes guidées, vous avez créé un configurateur de canapé 3D fonctionnel avec :

• Deux familles de matériaux
• Mise à jour du modèle en temps réel
• Logique de prix personnalisée
• Interface claire et simple à utiliser

Cette configuration peut servir de modèle réutilisable pour d'autres types de produits de votre catalogue. Pour ajouter à ce configurateur une vue AR ou une intégration à un showroom, consultez nos autres guides dans la section suivante.