<viewer-3dvue> est un Web Component natif. Aucune dépendance, aucun plugin supplémentaire. Il s'intègre dans n'importe quel template WooCommerce — single-product.php, un shortcode, ou un bloc Gutenberg HTML personnalisé.
add_action('wp_enqueue_scripts', function() { wp_enqueue_script( 'viewer-3dvue', 'https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js', [], null, true ); });
<viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- C'est tout. -->
Un Web Component natif — aucune dépendance React, Vue ou jQuery. Compatible avec tous les thèmes WordPress et les builders (Elementor, Divi, Bricks).
Utilisez wp_enqueue_script() dans votre functions.php pour charger le composant. Le true final le charge en pied de page — recommandé pour ne pas bloquer le rendu.
src du composant est l'URL spécifique à votre configurateur, fournie par 3DVue à la livraison.
add_action('wp_enqueue_scripts', function() { wp_enqueue_script( 'viewer-3dvue', 'https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js', [], null, true ); }); // Ou via WPCode — snippet HTML // <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
Collez la balise dans votre template produit, dans un shortcode PHP, ou dans un bloc HTML Gutenberg. Deux attributs requis : name (identifiant unique) et src (URL de votre configurateur fournie par 3DVue).
<viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Avec debug activé --> <viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" debug ></viewer-3dvue>
Ajoutez les attributs viewer-3dvue sur vos <select> de variations natifs WooCommerce ou sur vos swatches custom. Le composant écoute automatiquement — aucun JS à écrire.
<!-- Sur un select WooCommerce existant --> <select name="attribute_pa_couleur" viewer-3dvue="monViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1,2" > <option value="0n">Noir</option> <option value="1a">Blanc</option> <option value="2b">Chêne naturel</option> </select> <!-- Ou sur un swatch bouton custom --> <button viewer-3dvue="monViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"2b","3":"0n"}' >Chêne / Noir</button>
Le composant écoute automatiquement les événements click et change sur tout élément portant les bons attributs. Compatible avec les selects natifs WooCommerce et les plugins de swatches (Variation Swatches, etc.).
<button viewer-3dvue="monViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","3":"2b"}' > Tissu velours gris </button> // {"indexMesh": "idMaterial"} // Index 0 réservé — commence à 1
<select> de variation WooCommerce existant. Le viewer se synchronise automatiquement.<select name="attribute_pa_couleur" viewer-3dvue="monViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1,3" > <option value="0n">Noir</option> <option value="1a">Blanc</option> </select> // viewer-3dvue-mesh="1,3" // applique à mesh 1 ET mesh 3
Contrôle programmatique complet — utile pour synchroniser le viewer avec les variations WooCommerce via JS, ou pour des usages avancés comme la capture d'image ou l'export BAT.
const viewer = document.querySelector('viewer-3dvue[name="monViewer"]'); // Synchronisation avec les variations WooCommerce document.querySelector('.variations select') .addEventListener('change', (e) => { viewer.setMaterial({ "1": e.target.value }); });
// Sur l'objet 0 (défaut) viewer.setMaterial({ "1": "0n", "3": "2b" }); // Sur un segment spécifique (produit multi-pièces) viewer.setMaterial({ "1": "1a" }, 1); // setMaterial(materialList, objectIndex = 0)
// Charger un modèle différent (ex: changement de forme) viewer.loadModel("AB01-CD02"); // Ajouter un composant au modèle existant // Ex: ajouter un accoudoir, un plateau, un pied viewer.addModel("EF03"); // Supprimer un composant (index commence à 0) viewer.removeModel(1); // ⚠ Impossible de supprimer le dernier segment
viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { const { base64, error } = e.detail; if (error) return; // Stocker en champ caché pour la commande WC document.querySelector('input[name="config_preview"]').value = base64; });
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, upload de logo, gravure de texte.
| 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). Zero-copy via Transferable Objects. |
setSVGElementParam(param, value, id) |
Modifie un paramètre d'un élément SVG. id=null cible l'élément sélectionné. |
exportSVG() |
Génère le fichier SVG du produit configuré — BAT prêt pour la production. |
// 1. Upload logo depuis un input WooCommerce const file = input.files[0]; await viewer.addSVGImage(file, { dropzone: "dropzone001", selectable: true }); // 2. Texte personnalisé (gravure, marquage) viewer.addSVGText("Mon texte", { fill: "#ffffff", fontFamily: "Arial" }); // 3. Exporter le BAT SVG pour production viewer.exportSVG(); viewer.addEventListener("onSVGExportComplete", (e) => { const { path } = e.detail; // path = URL du fichier SVG prêt à imprimer });
Référence API, attributs HTML, événements, exemples PHP WooCommerce. 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 WooCommerce.
Voir la démoVous gérez le code côté WooCommerce, 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.