Un configuratore 3D
su WooCommerce.
2 righe di codice.

const viewer = document.querySelector('viewer-3dvue[name="mioViewer"]');

// Sincronizzare con le variazioni di WooCommerce
document.querySelector('.variations select')
  .addEventListener('change', (e) => {
    viewer.setMaterial({ "1": e.target.value });
  });

// Sull'oggetto 0 (default)
viewer.setMaterial({ "1": "0n", "3": "2b" });

// Su un segmento specifico (prodotto multi-parte)
viewer.setMaterial({ "1": "1a" }, 1);
// setMaterial(materialList, objectIndex = 0)

// Carica un modello diverso (es. cambio di forma)
viewer.loadModel("AB01-CD02");

// Aggiunge un componente al modello esistente
// Es: aggiungere un bracciolo, ripiano, gamba
viewer.addModel("EF03");

// Rimuove un componente (l'indice inizia da 0)
viewer.removeModel(1);
// ⚠ Non si può rimuovere l'ultimo segmento rimanente

viewer.captureToBase64();

viewer.addEventListener("onCaptureBase64Complete", (e) => {
  const { base64, error } = e.detail;
  if (error) return;
  // Salvare in un campo nascosto per l'ordine WC
  document.querySelector('input[name="config_preview"]').value = base64;
});