Un configurador 3D
en WooCommerce.
2 líneas de código.
<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. -->
Listo en 3 pasos. Sin plugin dedicado.
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).
-
1Registrar el script
Usa
wp_enqueue_script()en tufunctions.phppara cargar el componente. Eltruefinal lo carga en el pie de página : recomendado para evitar bloquear el renderizado.El script CDN es público. También puedes incluirlo mediante un widget HTML de Elementor o WPCode : en todos los casos, el atributosrcdel componente es la URL específica de tu configurador, proporcionada por 3DVue en la entrega.functions.phpadd_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>
-
2Colocar el componente
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) ysrc(la URL de tu configurador proporcionada por 3DVue).Con Elementor, simplemente pega la etiqueta en un widget HTML. Como el script ya se carga globalmente, no se necesita ninguna configuración adicional.single-product.php o widget HTML<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>
-
3Conectar las variaciones de WooCommerce
Añade los atributos
viewer-3dvueen tus elementos<select>de variaciones nativas de WooCommerce o en tus muestras personalizadas. El componente escucha automáticamente : no hay JS que escribir.variable.php : select de variación de color<!-- 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>
Cero JavaScript.
Todo en atributos HTML.
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
Para casos de uso avanzados.
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; });
Textos, logos, pruebas de impresión.
Todo en SVG.
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. Sin 3er argumento: se aplica al elemento seleccionado. |
removeSVGElement(id) |
Elimina un elemento SVG (texto o imagen). Sin argumento: elimina el 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]; 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 });
Lectura recomendada
Este configurador en su sector
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 demo¿Listo para integrar?
Nosotros nos encargamos de los modelos 3D.
Tú 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.