<viewer-3dvue> es un Web Component nativo. Sin dependencias, sin plugin adicional. Se integra en cualquier plantilla de WooCommerce — single-product.php, un shortcode o un bloque HTML de Gutenberg personalizado.
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> <!-- Listo. -->
Un Web Component nativo — sin dependencia de React, Vue o jQuery. Compatible con todos los temas y constructores de páginas de WordPress (Elementor, Divi, Bricks).
Usa wp_enqueue_script() en tu functions.php para cargar el componente. El true final lo carga en el pie de página — recomendado para evitar bloquear el renderizado.
src del componente es la URL específica de tu configurador, proporcionada por 3DVue en la entrega.
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 ); }); // O vía WPCode — fragmento HTML // <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
Pega la etiqueta en tu plantilla de producto, en un shortcode PHP o en un bloque HTML de Gutenberg. Dos atributos obligatorios: name (identificador único) y src (la URL de tu configurador proporcionada por 3DVue).
<viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Con debug activado --> <viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" debug ></viewer-3dvue>
Añade los atributos viewer-3dvue en tus elementos <select> de variaciones nativas de WooCommerce o en tus muestras personalizadas. El componente escucha automáticamente — no hay JS que escribir.
<!-- En un select existente de WooCommerce --> <select name="attribute_pa_colour" viewer-3dvue="monViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1,2" > <option value="0n">Negro</option> <option value="1a">Blanco</option> <option value="2b">Roble natural</option> </select> <!-- O en un botón de muestra personalizado --> <button viewer-3dvue="monViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"2b","3":"0n"}' >Roble / Negro</button>
El componente escucha automáticamente los eventos click y change en cualquier elemento que lleve los atributos correctos. Compatible con los selects nativos de WooCommerce y plugins de muestras (Variation Swatches, etc.).
<button viewer-3dvue="monViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","3":"2b"}' > Tejido gris terciopelo </button> // {"meshIndex": "materialId"} // Índice 0 reservado — empieza en 1
<select> de variaciones de WooCommerce existente. El visor se sincroniza automáticamente.<select name="attribute_pa_colour" viewer-3dvue="monViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1,3" > <option value="0n">Negro</option> <option value="1a">Blanco</option> </select> // viewer-3dvue-mesh="1,3" // se aplica a mesh 1 Y mesh 3
Control programático completo — útil para sincronizar el visor con las variaciones de WooCommerce vía JS, o para casos de uso avanzados como la captura de imagen o exportación de BAT.
const viewer = document.querySelector('viewer-3dvue[name="monViewer"]'); // Sincronizar con las variaciones de WooCommerce document.querySelector('.variations select') .addEventListener('change', (e) => { viewer.setMaterial({ "1": e.target.value }); });
// En el objeto 0 (por defecto) viewer.setMaterial({ "1": "0n", "3": "2b" }); // En un segmento específico (producto multi-parte) viewer.setMaterial({ "1": "1a" }, 1); // setMaterial(materialList, objectIndex = 0)
// Carga un modelo diferente (ej. cambio de forma) viewer.loadModel("AB01-CD02"); // Añade un componente al modelo existente // Ej: añadir un reposabrazos, estante, pata viewer.addModel("EF03"); // Elimina un componente (el índice empieza en 0) viewer.removeModel(1); // ⚠ No se puede eliminar el último segmento restante
viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { const { base64, error } = e.detail; if (error) return; // Almacenar en un campo oculto para el pedido WC document.querySelector('input[name="config_preview"]').value = base64; });
La API SVG te permite añadir texto e imágenes directamente sobre el producto 3D mediante zonas de colocación definidas en el modelo. Se usa para productos personalizables — marcado, carga de logo, grabado de texto.
| Método | Descripción |
|---|---|
addSVGText(text, opts) |
Añade texto a una zona de colocación. Opciones: fill, fontFamily, selectable |
addSVGImage(source, opts) |
Añade una imagen (File o ArrayBuffer). Sin copia vía Transferable Objects. |
setSVGElementParam(param, value, id) |
Modifica un parámetro de un elemento SVG. id=null apunta al elemento seleccionado. |
exportSVG() |
Genera el archivo SVG del producto configurado — prueba de impresión lista para producción. |
// 1. Cargar logo desde un input de archivo de WooCommerce const file = input.files[0]; await viewer.addSVGImage(file, { dropzone: "dropzone001", selectable: true }); // 2. Texto personalizado (grabado, marcado) viewer.addSVGText("Mi texto", { fill: "#ffffff", fontFamily: "Arial" }); // 3. Exportar la prueba SVG para producción viewer.exportSVG(); viewer.addEventListener("onSVGExportComplete", (e) => { const { path } = e.detail; // path = URL del archivo SVG listo para imprimir });
Referencia de la API, atributos HTML, eventos, ejemplos PHP de WooCommerce. Todo está documentado y se mantiene actualizado.
Ver la documentaciónSin sistema de tickets automatizado. Hablas directamente con Matthieu, el desarrollador que diseñó la API. Respuesta en menos de 24 horas.
Reservar una llamadaPrueba el configurador en condiciones reales antes de integrarlo. Ve exactamente lo que verán tus clientes en tu tienda WooCommerce.
Ver la demoTú gestionas el código en el lado de WooCommerce, nosotros nos encargamos de todo lo demás — modelado, materiales, configuración. En 30 minutos, te mostramos lo que podemos hacer con tu catálogo.