Bonnes pratiques
3DVue

Formats acceptés

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.

Conversion depuis SolidWorks : STEP / STL → GLTF

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

Export depuis Blender

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

Nommage des collections Blender

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

Transformations & échelle

• Toujours appliquer les transformations Ctrl + A → Toutes les transformations avant export : sinon les UV sont incorrects
• Travailler à l'échelle 1 (comme dans le vrai monde en mètres) : évite les erreurs d'échelle dans le configurateur
• Si un objet ne touche pas le sol (ex: pendentif, luminaire suspendu), ajouter un plan invisible nommé RA de taille 0.0001m en position 0,0,0 pour la réalité augmentée

Addons Blender recommandés

Ces addons sont utilisés systématiquement par l'équipe 3DVue pour garantir des UV de qualité sur tous les projets.

Cohérence du Texel Density

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.

UV pour les BAT SVG

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.

• Tous les UV doivent tenir sur une seule carte UV
• Exporter la carte UV en 4096×4096 px
• Le GLTF doit correspondre exactement à la carte UV exportée
• Un script Blender automatise l'export du GLTF et de la UV map : les collections doivent être correctement nommées pour qu'il fonctionne
• Si besoin, peindre sur la carte UV pour aider la création du fichier Illustrator (alignement de motifs)

Nommage des fichiers de texture

Chaque couche PBR correspond à un fichier de texture avec un nom standardisé. La plateforme identifie le rôle de chaque texture par son nom.

Formats & résolution

• Format carré obligatoire : 1024×1024 ou 2048×2048 (maximum 2K)
• Format de fichier : PNG (recommandé pour transparence et qualité) ou JPEG (plus léger)
• Une normal map trop lourde peut être compressée sans perte visible via imagecompressor.com

Règles générales

• Format carré obligatoire, résolution 4K (4096×4096 px)
• Nommage : BAT-nomdumodele-dimension_albedo.svg
• Aucun accent, aucun espace dans le nom du fichier
• Tous les éléments éditables doivent être vectorisés dans le SVG : aucun élément raster

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

Structure des calques Illustrator

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.

Export SVG depuis Illustrator

• Vectoriser tous les éléments éditables avant export : Maj + Ctrl + O
• Nommer le fichier exporté avec la convention nomdudesign_albedo.svg
• Aucun élément raster dans le fichier exporté : tout doit être vectoriel
• Vérifier que les calques gabarit et présentation sont masqués à l'export

Inclure le script

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>

Déclarer le composant

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>

Contrôle sans JavaScript

Le composant écoute automatiquement les événements click et change sur tout élément portant les attributs ci-dessous. Aucun JavaScript à écrire.

<!-- 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>

API JavaScript

Pour les cas avancés : chargement dynamique, capture d'image, export SVG. Récupérez la référence du composant via querySelector.

Événements

Écoutez les événements directement sur l'élément viewer-3dvue via addEventListener.

// Récupérer la référence du composant
const viewer = document.querySelector('viewer-3dvue[name="monViewer"]');

// Attendre que le viewer soit prêt (recommandé pour loadFonts)
viewer.addEventListener("onLoadComplete", () => {
  viewer.loadFonts([{ family: "Bebas Neue" }, { family: "Pacifico" }]);
});

// Changer les matières
viewer.setMaterial({ "1": "0n", "3": "2b" });

// Modifier l'élément SVG sélectionné
viewer.setSVGElementParam("fill", "#ff0000");          // couleur
viewer.setSVGElementParam("text", "Mon texte");         // contenu texte
viewer.setSVGElementParam("colorStop.0", "#7C3AED", "zone-id"); // gradient

// Réagir à la sélection d'un élément SVG
viewer.addEventListener("onSVGObjectSelected", (e) => {
  const obj = e.detail.obj;
  // obj.id, obj.type, obj.text, obj.fill, obj.fontFamily, obj.scale, obj.angle
  if (obj.type === "text") inputText.value = obj.text ?? "";
});
viewer.addEventListener("onSVGObjectDeselected", () => { inputText.value = ""; });

// Capturer le rendu courant
viewer.captureToBase64();
viewer.addEventListener("onCaptureBase64Complete", (e) => {
  const { base64, error } = e.detail;
  if (!error) document.querySelector("#preview").src = base64;
});