<viewer-3dvue> es un Web Component nativo. Sin dependencias, sin framework necesario. Funciona en cualquier lugar donde pueda pegar HTML — una sección Liquid, theme.liquid o una plantilla de producto.
<!-- En <head> o antes de </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> <!-- Eso es todo. -->
Un Web Component nativo — sin React, Vue ni bundler necesarios. Funciona en cualquier entorno que acepte HTML.
Añada el script a su theme.liquid, dentro de <head> o justo antes de </body>. Una sola inclusión cubre todas sus páginas de producto.
src en el componente <viewer-3dvue> es la URL específica de su configurador — proporcionada por 3DVue al entregar su proyecto.
<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
Pegue la etiqueta <viewer-3dvue> donde quiera mostrar el configurador — en su sección Liquid de producto, un bloque personalizado o una sección dedicada. Se requieren dos atributos: name (identificador único) y src (URL de su configurador).
name se usa para apuntar a este visor desde botones HTML o la API JS. Use un identificador único por página si tiene múltiples visores.
<!-- Atributos requeridos --> <viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Opcional: activa logs de consola --> <viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" debug ></viewer-3dvue>
Añada atributos viewer-3dvue en sus botones o selects existentes para activar cambios de material. Sin JavaScript que escribir — el componente escucha automáticamente los eventos click y change.
<!-- Botón que cambia tela al hacer clic --> <button viewer-3dvue="monViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","2":"1a"}' > Azul medianoche </button> <!-- Select que cambia el color --> <select viewer-3dvue="monViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="2,4" > <option value="0n">Rojo</option> <option value="1a">Azul</option> <option value="2b">Verde</option> </select>
El componente escucha automáticamente los eventos click y change en cualquier elemento que lleve los atributos correctos. Ideal para conectar con sus swatches Shopify existentes.
<button viewer-3dvue="monViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","3":"2b","5":"1c"}' > Tema madera natural </button> // {"meshIndex": "materialId"} // El índice 0 está reservado — empieza en 1
viewer-3dvue-mesh.<select viewer-3dvue="monViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="2,4" > <option value="0n">Rojo</option> <option value="1a">Azul</option> </select> // viewer-3dvue-mesh="2,4" // se aplica a la malla 2 Y a la malla 4
Cuando necesita control programático — carga dinámica de modelos, captura de imagen, exportación SVG. Todos los métodos verifican que el visor esté listo antes de ejecutarse.
const viewer = document.querySelector('viewer-3dvue[name="monViewer"]'); // Todos los métodos verifican que el visor esté cargado (LOAD_COMPLETE) // Si no está listo → aviso en consola, llamada ignorada
// En el objeto 0 (por defecto) viewer.setMaterial({ "1": "0n", "3": "2b" }); // En un objeto específico (multi-segmento) viewer.setMaterial({ "1": "1a" }, 1); // setMaterial(materialList, objectIndex = 0)
// Cargar un nuevo modelo (reemplaza el actual) viewer.loadModel("AB01-CD02"); // Añadir un segmento al modelo existente viewer.addModel("EF03"); viewer.addModel("EF03-GH04"); // Eliminar un segmento por su índice viewer.removeModel(1); // ⚠ No se puede eliminar el último segmento restante
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; });
// Devuelve la cámara a su posición inicial viewer.resetCamera(); // Pausa manual (ahorra GPU) viewer.pauseRenderer(); viewer.startRenderer(); // ℹ Estos métodos se gestionan automáticamente // cuando el componente sale/entra en el viewport
La API SVG le permite añadir texto e imágenes directamente sobre el producto 3D a través de zonas de colocación definidas en el modelo. Se usa para productos personalizables — marcado, grabado de texto, carga de logo del cliente.
| 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) a una zona de colocación. Sin copia via Transferable Objects. |
setSVGElementParam(param, value, id) |
Modifica un parámetro de un elemento SVG existente. id=null apunta al elemento seleccionado. |
exportSVG() |
Genera el archivo SVG del producto configurado — prueba lista para imprimir. |
// 1. Añadir texto sobre el producto viewer.addSVGText("Mi texto", { fill: "#ffffff", fontFamily: "Arial", dropzone: "dropzone001", selectable: true }); // 2. Cargar logo desde un input de archivo const file = input.files[0]; await viewer.addSVGImage(file, { dropzone: "dropzone001" }); // 3. Exportar la prueba SVG viewer.exportSVG(); viewer.addEventListener("onSVGExportComplete", (e) => { const { path, error } = e.detail; // path = URL del archivo SVG generado });
Referencia API, atributos HTML, eventos, ejemplos Liquid de Shopify. Todo está documentado y se mantiene actualizado.
Ver documentaciónSin sistema de tickets automatizado. Habla directamente con Matthieu, el desarrollador que diseñó la API. Respuesta en 24 horas.
Reservar una llamadaPruebe el configurador en condiciones reales antes de integrarlo. Vea exactamente lo que sus clientes verán en su tienda.
Ver demoUsted gestiona el código en el lado Shopify, nosotros nos encargamos de todo lo demás — modelización, materiales, configuración. En 30 minutos, le mostramos lo que podemos hacer con su catálogo.