<viewer-3dvue> é um Web Component nativo. Sem dependências, sem plugin adicional. Integra-se em qualquer template WooCommerce — single-product.php, um shortcode ou um bloco HTML do 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> <!-- Pronto. -->
Um Web Component nativo — sem dependência de React, Vue ou jQuery. Compatível com todos os temas e construtores de páginas do WordPress (Elementor, Divi, Bricks).
Use wp_enqueue_script() no seu functions.php para carregar o componente. O true final carrega-o no rodapé — recomendado para evitar bloquear a renderização.
src do componente é o URL específico do seu configurador, fornecido pela 3DVue na 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 ); }); // Ou via WPCode — fragmento HTML // <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
Cole a etiqueta no seu template de produto, num shortcode PHP ou num bloco HTML do Gutenberg. Dois atributos obrigatórios: name (identificador único) e src (o URL do seu configurador fornecido pela 3DVue).
<viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Com debug ativado --> <viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" debug ></viewer-3dvue>
Adicione os atributos viewer-3dvue nos seus elementos <select> de variações nativas do WooCommerce ou nas suas amostras personalizadas. O componente escuta automaticamente — não há JS para escrever.
<!-- Num select existente do WooCommerce --> <select name="attribute_pa_colour" viewer-3dvue="monViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1,2" > <option value="0n">Preto</option> <option value="1a">Branco</option> <option value="2b">Carvalho natural</option> </select> <!-- Ou num botão de amostra personalizado --> <button viewer-3dvue="monViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"2b","3":"0n"}' >Carvalho / Preto</button>
O componente escuta automaticamente os eventos click e change em qualquer elemento que tenha os atributos corretos. Compatível com os selects nativos do WooCommerce e plugins de amostras (Variation Swatches, etc.).
<button viewer-3dvue="monViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","3":"2b"}' > Tecido cinza veludo </button> // {"meshIndex": "materialId"} // Índice 0 reservado — começa em 1
<select> de variações do WooCommerce existente. O visualizador sincroniza automaticamente.<select name="attribute_pa_colour" viewer-3dvue="monViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1,3" > <option value="0n">Preto</option> <option value="1a">Branco</option> </select> // viewer-3dvue-mesh="1,3" // aplica-se à mesh 1 E mesh 3
Controlo programático completo — útil para sincronizar o visualizador com as variações do WooCommerce via JS, ou para casos de uso avançados como captura de imagem ou exportação de prova de impressão.
const viewer = document.querySelector('viewer-3dvue[name="monViewer"]'); // Sincronizar com as variações do WooCommerce document.querySelector('.variations select') .addEventListener('change', (e) => { viewer.setMaterial({ "1": e.target.value }); });
// No objeto 0 (por omissão) viewer.setMaterial({ "1": "0n", "3": "2b" }); // Num segmento específico (produto multi-parte) viewer.setMaterial({ "1": "1a" }, 1); // setMaterial(materialList, objectIndex = 0)
// Carrega um modelo diferente (ex. mudança de forma) viewer.loadModel("AB01-CD02"); // Adiciona um componente ao modelo existente // Ex: adicionar um apoio de braços, prateleira, pé viewer.addModel("EF03"); // Remove um componente (o índice começa em 0) viewer.removeModel(1); // ⚠ Não é possível remover o último segmento restante
viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { const { base64, error } = e.detail; if (error) return; // Guardar num campo oculto para a encomenda WC document.querySelector('input[name="config_preview"]').value = base64; });
A API SVG permite adicionar texto e imagens diretamente sobre o produto 3D através de zonas de colocação definidas no modelo. Utiliza-se para produtos personalizáveis — marcação, carregamento de logótipo, gravação de texto.
| Método | Descrição |
|---|---|
addSVGText(text, opts) |
Adiciona texto a uma zona de colocação. Opções: fill, fontFamily, selectable |
addSVGImage(source, opts) |
Adiciona uma imagem (File ou ArrayBuffer). Sem cópia via Transferable Objects. |
setSVGElementParam(param, value, id) |
Modifica um parâmetro de um elemento SVG. id=null aponta para o elemento selecionado. |
exportSVG() |
Gera o ficheiro SVG do produto configurado — prova de impressão pronta para produção. |
// 1. Carregar logótipo a partir de um input de ficheiro do WooCommerce const file = input.files[0]; await viewer.addSVGImage(file, { dropzone: "dropzone001", selectable: true }); // 2. Texto personalizado (gravado, marcação) viewer.addSVGText("O meu texto", { fill: "#ffffff", fontFamily: "Arial" }); // 3. Exportar a prova SVG para produção viewer.exportSVG(); viewer.addEventListener("onSVGExportComplete", (e) => { const { path } = e.detail; // path = URL do ficheiro SVG pronto para imprimir });
Referência da API, atributos HTML, eventos, exemplos PHP do WooCommerce. Tudo está documentado e mantido atualizado.
Ver a documentaçãoSem sistema de tickets automatizado. Fala diretamente com Matthieu, o programador que concebeu a API. Resposta em menos de 24 horas.
Reservar uma chamadaExperimente o configurador em condições reais antes de o integrar. Veja exatamente o que os seus clientes verão na sua loja WooCommerce.
Ver a demoVocê gere o código do lado do WooCommerce, nós tratamos de todo o resto — modelação, materiais, configuração. Em 30 minutos, mostramos-lhe o que podemos fazer com o seu catálogo.