Guides techniques pour préparer vos fichiers 3D, vos textures, vos BAT et intégrer le configurateur sur votre site. Mis à jour en avril 2026.
Formats acceptés, règles de conversion et bonnes pratiques Blender pour une intégration sans friction.
La plateforme 3DVue accepte plusieurs formats 3D. Le GLTF est le format recommandé — il offre le meilleur rapport qualité/poids pour le rendu web temps réel.
Les fichiers issus de logiciels CAO (SolidWorks, Fusion 360, CATIA) sont généralement en formats .STEP, .STP ou .STL. Ils doivent être convertis avant intégration.
1. Ouvrir FreeCAD 2. Importer le fichier STEP/STL Ctrl + I → sélectionner votre fichier .stp ou .stl 3. Exporter en GLTF ou DAE Ctrl + E → choisir format DAE ou GLTF Convertisseur en ligne (alternative rapide) : https://imagetostl.com/fr/convertir/un-fichier/stp/en/glb
Si vous travaillez directement dans Blender, voici les réglages d'export GLTF recommandés pour la plateforme 3DVue. Utiliser la compression Draco réduit significativement le poids du fichier.
Format : glTF Binary (.glb) ← embarque tout dans un seul fichier Compression : Draco activé ← réduit le poids de 60 à 80% Textures : Include → cocher Matériaux : Export materials → cocher Transformations : Apply → cocher ← obligatoire, voir section Transformations
Des scripts automatisent l'export des GLTF et des UV maps. Pour qu'ils fonctionnent correctement, les collections Blender doivent respecter une structure précise.
Collection └── nom-du-produit ← sans accent ni espace ├── modelisation ← tous les objets 3D └── gltf ← fichiers d'export générés Exemples corrects : nom-du-produit : fauteuil-butterfly ✓ nom-du-produit : table-tolix-a ✓ Exemples incorrects : nom-du-produit : Fauteuil Butterfly ✗ majuscule + espace nom-du-produit : siège-étagère ✗ accent
Le dépliage UV conditionne la qualité du rendu des textures. Un UV mal fait crée des distorsions visibles — le motif s'étire ou se compresse sur certaines faces.
Ces addons sont utilisés systématiquement par l'équipe 3DVue pour garantir des UV de qualité sur tous les projets.
| Addon | Usage principal |
|---|---|
| UV Toolkit | Checker map pour visualiser les distorsions UV — indispensable pour vérifier la qualité du dépliage avant export |
| Texel Density | Assure une cohérence de densité entre tous les objets d'un même projet. Si un bois apparaît dans plusieurs objets, il doit toujours avoir la même "taille" apparente |
| UVPackmaster | Optimise le placement des îles UV sur la carte, gère l'orientation selon le sens des objets (utile pour le bois, les tissus à motifs directionnels) |
| Mio3 | Rectifie les UV déformés, permet de superposer des UV similaires (gain de place sur la carte UV) |
Le texel density définit combien de pixels de texture couvrent une surface réelle donnée. Si deux objets d'un même client ont des texel densities différents, une texture bois aura une taille différente sur chaque objet — ce qui n'est pas réaliste.
Privilegier les dépliages UV basés sur des coutures (seams) avec la méthode Conformal — sauf pour les objets avec une couleur uniforme (uni) qui n'ont pas besoin d'un dépliage précis.
Quand le configurateur utilise un BAT SVG (personnalisation avec upload de logo ou texte), des règles supplémentaires s'appliquent au dépliage UV.
Nommage, formats et spécifications pour les fichiers de texture compatibles avec la plateforme 3DVue.
Chaque couche PBR correspond à un fichier de texture avec un nom standardisé. La plateforme identifie le rôle de chaque texture par son nom.
| Nom de fichier | Rôle | Support |
|---|---|---|
| albedo | Couleur de base de la matière (aussi appelé diffuse) | ✅ Complet |
| roughness | Niveau de brillance — blanc = mat, noir = brillant | ✅ Complet |
| metallic | Propriétés métalliques — reflets environnement | ✅ Complet |
| normal | Relief en trompe-l'œil — simule les bosses et creux sans polygones | ✅ Complet |
| emissive | Zones lumineuses (LED, écrans, parties rétroéclairées) | ✅ Complet |
| occlusion | Ombres de contact entre surfaces (ambient occlusion) | ✅ Complet |
| bump | Alternative à la normal map — non pris en charge si une normal map est déjà présente | ⚠️ Ignoré si normal présent |
| alpha | Transparence — à tester selon le cas d'usage, non compatible RA | ⚠️ Non compatible RA |
Guide Illustrator pour les projets avec personnalisation — upload de logo, texte gravé, zones de marquage. Le BAT SVG est le fichier de production généré par le configurateur.
Format : BAT-nomdumodele-dimension_albedo.svg Exemples : BAT-maillotmatch-tailleL_albedo.svg ✓ BAT-gobelet-25cl_albedo.svg ✓ BAT-maillot match taille L albedo.svg ✗ espaces interdits BAT-maillotmatch-tailléL_albedo.svg ✗ accent interdit
Les calques Illustrator doivent être organisés selon une structure précise pour que le configurateur puisse identifier les zones éditables et les zones de référence.
| Nom du calque | Rôle | Toucher ? |
|---|---|---|
| masqué | Calque de travail — éléments de test ou mis de côté sans suppression | ✅ Libre |
| non vecto | Textes non vectorisés gardés pour réutilisation — non exportés | ✅ Libre |
| gabarit | Limites du modèle 3D — guide de placement, ne pas modifier | 🚫 Ne pas toucher |
| logo | Tous les logos renommés correctement | ✅ Libre |
| design, design-1, design-2… | Éléments graphiques de chaque variante de design | ✅ Libre |
| présentation | Template commun à tous les designs — ne pas modifier | 🚫 Ne pas toucher |
Script JSX pour renommer automatiquement les calques sélectionnés au format color_XXX. Gain de temps considérable sur les projets avec de nombreuses zones éditables.
1. Copier le code ci-dessous dans un fichier texte 2. Renommer le fichier en RenameColor.jsx 3. Copier dans le dossier scripts Illustrator : C:\Program Files\Adobe\Adobe Illustrator 2026\Presets\fr_FR\Scripts\ 4. Exécuter depuis Illustrator : Fichier → Script → RenameColor
// Script Rename Color — Ultra Rapide // Renomme tous les objets sélectionnés en "color_XXX" (function() { if (app.documents.length === 0) { alert("Veuillez ouvrir un document Illustrator."); return; } var doc = app.activeDocument; var selection = doc.selection; if (selection.length === 0) { alert("Veuillez sélectionner au moins un objet à renommer."); return; } var number = prompt("Numéro (ex: 001, 002, etc.) :", "001"); if (number === null || number === "") { return; } var finalName = "color" + number; for (var i = 0; i < selection.length; i++) { selection[i].name = finalName; } alert(selection.length + " objet(s) renommé(s) en : " + finalName); })();
Le viewer 3DVue est un Web Component natif. Il fonctionne dans tout environnement HTML — Shopify, WooCommerce, PrestaShop, WordPress, ou site custom.
Ajoutez le script une seule fois dans votre <head> ou avant </body>. Une inclusion suffit pour toutes les pages de votre site.
<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
Placez la balise <viewer-3dvue> là où vous souhaitez afficher le viewer. Deux attributs sont requis : name (identifiant unique sur la page) et src (URL de votre configurateur, fournie par 3DVue à la livraison).
<!-- Attributs requis --> <viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Avec debug activé (logs console) --> <viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" debug ></viewer-3dvue>
Le composant écoute automatiquement les événements click et change sur tout élément portant les attributs ci-dessous. Aucun JavaScript à écrire.
| Attribut | Valeur | Usage |
|---|---|---|
| viewer-3dvue | Nom du viewer ciblé | Obligatoire sur tout élément déclencheur |
| viewer-3dvue-clic | setMaterial | Déclenche un changement de matière au clic |
| viewer-3dvue-change | setMaterial | Déclenche un changement à la sélection d'un <select> |
| viewer-3dvue-meshs-materials | JSON {"indexMesh":"idMatiere"} | Matières à appliquer (plusieurs meshes possibles) |
| viewer-3dvue-mesh | "1,2,3" | Index de meshes ciblés pour un <select> |
<!-- Bouton qui change plusieurs matières au clic --> <button viewer-3dvue="monViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","3":"2b"}' > Coloris Bleu nuit </button> <!-- Select qui applique la valeur choisie --> <select viewer-3dvue="monViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="2,4" > <option value="0n">Rouge</option> <option value="1a">Bleu</option> </select>
Pour les cas avancés — chargement dynamique, capture d'image, export SVG. Récupérez la référence du composant via querySelector.
| Méthode | Description |
|---|---|
| setMaterial(materials, index) | Applique des matières sur les meshes d'un objet |
| loadModel(id) | Remplace le modèle courant |
| addModel(id) | Ajoute un objet à la scène |
| removeModel(index) | Supprime un objet par son index |
| resetCamera() | Remet la caméra en position initiale |
| pauseRenderer() / startRenderer() | Contrôle manuel du rendu (géré automatiquement par IntersectionObserver) |
| captureToBase64() | Capture le rendu en image base64 → événement onCaptureBase64Complete |
| exportSVG() | Génère le BAT SVG du produit → événement onSVGExportComplete |
| addSVGText(text, opts) | Ajoute un texte sur une zone éditable du produit |
| addSVGImage(source, opts) | Ajoute une image (File ou ArrayBuffer) sur une zone éditable |
| loadFonts(fonts) | Précharge des polices Google Fonts ou .woff2 personnalisées |
// Récupérer la référence du composant const viewer = document.querySelector('viewer-3dvue[name="monViewer"]'); // Changer les matières viewer.setMaterial({ "1": "0n", "3": "2b" }); // Capturer le rendu courant viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { const { base64, error } = e.detail; if (!error) document.querySelector("#preview").src = base64; });
Matthieu répond directement — pas de ticketing, pas de délai. Si quelque chose n'est pas clair ou si votre cas n'est pas couvert ici, prenez un RDV.
