<viewer-3dvue> est un Web Component natif. Aucune dépendance, aucun framework requis. Il fonctionne partout où vous pouvez coller du HTML — section Liquid, theme.liquid, product template.
<!-- Dans <head> ou avant </body> --> <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
<viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- C'est tout. -->
Un Web Component natif — aucun React, Vue ou bundler requis. Ça marche dans tout environnement qui accepte du HTML.
Ajoutez le script dans votre theme.liquid, dans <head> ou juste avant </body>. Une seule inclusion suffit pour toutes vos pages produit.
src du composant <viewer-3dvue> est l'URL spécifique à votre configurateur — elle vous est fournie par 3DVue à la livraison du projet.
<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
Collez la balise <viewer-3dvue> là où vous voulez afficher le configurateur — dans votre section produit Liquid, dans un bloc personnalisé ou dans une section dédiée. Deux attributs sont requis : name (identifiant unique) et src (URL de votre configurateur).
name sert à cibler ce viewer depuis les boutons HTML ou l'API JS. Utilisez un identifiant unique par page si vous avez plusieurs viewers.
<!-- Attributs requis --> <viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Optionnel : active les logs console --> <viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" debug ></viewer-3dvue>
Ajoutez des attributs viewer-3dvue sur vos boutons ou selects existants pour déclencher des changements de matériaux. Aucun JavaScript à écrire — le composant écoute automatiquement les événements click et change.
<!-- Bouton qui change le tissu au clic --> <button viewer-3dvue="monViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","2":"1a"}' > Coloris Bleu nuit </button> <!-- Select qui change la couleur --> <select viewer-3dvue="monViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="2,4" > <option value="0n">Rouge</option> <option value="1a">Bleu</option> <option value="2b">Vert</option> </select>
Le composant écoute automatiquement les événements click et change sur tout élément portant les bons attributs. Idéal pour brancher vos swatches Shopify existants.
<button viewer-3dvue="monViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","3":"2b","5":"1c"}' > Thème bois naturel </button> // {"indexMesh": "idMaterial"} // L'index 0 est réservé — commence à 1
viewer-3dvue-mesh.<select viewer-3dvue="monViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="2,4" > <option value="0n">Rouge</option> <option value="1a">Bleu</option> </select> // viewer-3dvue-mesh="2,4" // applique à mesh 2 ET mesh 4
Quand vous avez besoin de contrôle programmatique — chargement dynamique de modèles, capture d'image, export SVG. Toutes les méthodes vérifient que le viewer est prêt avant d'exécuter.
const viewer = document.querySelector('viewer-3dvue[name="monViewer"]'); // Toutes les méthodes vérifient que le viewer est chargé (LOAD_COMPLETE) // Si pas prêt → warning console, appel ignoré
// Sur l'objet 0 (défaut) viewer.setMaterial({ "1": "0n", "3": "2b" }); // Sur un objet spécifique (multi-segments) viewer.setMaterial({ "1": "1a" }, 1); // setMaterial(materialList, objectIndex = 0)
// Charger un nouveau modèle (remplace l'actuel) viewer.loadModel("AB01-CD02"); // Ajouter un segment au modèle existant viewer.addModel("EF03"); viewer.addModel("EF03-GH04"); // Supprimer un segment par son index viewer.removeModel(1); // ⚠ Impossible de supprimer le dernier segment restant
viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { const { base64, error } = e.detail; if (error) { console.error(error); return; } // base64 = "data:image/png;base64,..." document.querySelector("#preview").src = base64; });
// Ramène la caméra à sa position initiale viewer.resetCamera(); // Mise en pause manuelle (économise le GPU) viewer.pauseRenderer(); viewer.startRenderer(); // ℹ Ces méthodes sont gérées automatiquement // quand le composant sort/entre dans le viewport
L'API SVG permet d'ajouter du texte et des images directement sur le produit 3D via des dropzones définies dans le modèle. Utilisée pour les produits personnalisables — marquage, gravure de texte, upload de logo client.
| Méthode | Description |
|---|---|
addSVGText(text, opts) |
Ajoute un texte dans une dropzone. Options : fill, fontFamily, selectable |
addSVGImage(source, opts) |
Ajoute une image (File ou ArrayBuffer) dans une dropzone. Zero-copy via Transferable Objects. |
setSVGElementParam(param, value, id) |
Modifie un paramètre d'un élément SVG existant. id=null cible l'élément sélectionné. |
exportSVG() |
Génère le fichier SVG du produit configuré — BAT prêt pour production. |
// 1. Ajouter du texte sur le produit viewer.addSVGText("Mon texte", { fill: "#ffffff", fontFamily: "Arial", dropzone: "dropzone001", selectable: true }); // 2. Upload logo depuis un input file const file = input.files[0]; await viewer.addSVGImage(file, { dropzone: "dropzone001" }); // 3. Exporter le BAT SVG viewer.exportSVG(); viewer.addEventListener("onSVGExportComplete", (e) => { const { path, error } = e.detail; // path = URL du fichier SVG généré });
Référence API, attributs HTML, événements, exemples Shopify Liquid. Tout est documenté et maintenu à jour.
Voir la documentationPas de ticketing automatisé. Vous parlez directement à Matthieu, le développeur qui a conçu l'API. Réponse sous 24h.
Prendre un RDVTestez le configurateur en conditions réelles avant d'intégrer. Voyez ce que vos clients verront sur votre boutique.
Voir la démoVous gérez le code côté Shopify, on s'occupe de tout le reste — modélisation, matières, configuration. En 30 minutes, on vous explique ce qu'on peut faire sur votre catalogue.