Um configurador 3D
no WooCommerce.
2 linhas de código.

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;
});