Guia para programadores — WordPress

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

<viewer-3dvue> é um Web Component nativo. Funciona em qualquer contexto WordPress — widget HTML do Elementor, bloco Gutenberg, shortcode, template PHP personalizado, CPT com ACF. Sem plugin dedicado, sem dependências.

Compatível WordPress 6+

Widget HTML do Elementor

Bloco Gutenberg nativo

Shortcode PHP

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="meuVisor"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>

<!-- É tudo. -->

Carregar o script — 3 formas

O método recomendado é wp_enqueue_script() em functions.php. Também pode incluí-lo via WPCode (snippet global), ou diretamente num widget HTML do Elementor se não quiser tocar nos ficheiros.

Se usar WPCode, crie um snippet do tipo "HTML" com a etiqueta <script> e ative-o em todas as páginas ou apenas nas páginas de produto.

// 1. Via functions.php (recomendado)
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);
});

// 2. Via WPCode — snippet HTML global
<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>

// 3. Num widget HTML do Elementor
<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
<viewer-3dvue name="meuVisor" src="..."></viewer-3dvue>

Colocar o componente

Cole a etiqueta no seu template PHP, num widget HTML do Elementor, ou via um shortcode. Para CPT com ACF, pode condicionar a visualização de acordo com o valor de um campo personalizado.

A 3DVue usa exatamente este método no seu próprio site — widget HTML do Elementor, sem plugin, sem código PHP. A etiqueta é colada diretamente no widget.

<?php
// Obter o ID do configurador a partir de um campo ACF
$viewer_id = get_field('configurateur_3d_id');
?>

<?php if ($viewer_id) : ?>
<viewer-3dvue
  name="meuVisor"
  src="https://app.3dvue.fr/view?p=<?php echo esc_attr($viewer_id); ?>"
></viewer-3dvue>
<?php endif; ?>

Ligar os seus seletores de variantes

O WordPress não tem um sistema de variações nativo — tudo é feito através dos seus componentes HTML personalizados. Adicione os atributos viewer-3dvue nos seus botões ou selects de configuração de produto. Sem JS para escrever.

<!-- Botões de cor personalizados -->
<button
  viewer-3dvue="meuVisor"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{"1":"0n","2":"1a"}'
>Carvalho natural</button>

<!-- Select de acabamento -->
<select
  viewer-3dvue="meuVisor"
  viewer-3dvue-change="setMaterial"
  viewer-3dvue-mesh="1"
>
  <option value="0n">Lacado preto</option>
  <option value="1a">Lacado branco</option>
  <option value="2b">Carvalho</option>
</select>

Via um shortcode PHP

Registe um shortcode em functions.php para o poder inserir em qualquer página ou artigo a partir do editor.

// Em functions.php
add_shortcode('configurateur3d',
  function($atts) {
    $id = $atts['id'] ?? '';
    return '<viewer-3dvue name="v"
      src="https://app.3dvue.fr/view?p='
      . esc_attr($id)
      . '"></viewer-3dvue>';
  }
);

// No editor:
// [configurateur3d id="AB01-CD02"]

Bloco HTML personalizado do Gutenberg

Sem código PHP — cole diretamente num bloco "HTML personalizado" do Gutenberg. O script já deve estar carregado globalmente.

<!-- Bloco HTML personalizado Gutenberg -->
<viewer-3dvue
  name="meuVisor"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>

<!-- Botões de variante no mesmo bloco -->
<button
  viewer-3dvue="meuVisor"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{"1":"0n"}'
>Preto</button>

Integração com wp_localize_script() Passar dados PHP (ID configurador a partir do ACF) para o JS do visualizador

// functions.php — passar os dados ACF para o JS
wp_localize_script('o-meu-script', 'ViewerConfig', [
  'viewerId' => get_field('configurateur_id'),
  'materials' => get_field('materials_map'),
]);

// o-meu-script.js
const viewer = document.querySelector('viewer-3dvue');
viewer.setMaterial(ViewerConfig.materials);

setMaterial() / loadModel() / addModel() A mesma API que em todas as plataformas — a referência completa está na documentação

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

// Mudar os materiais
viewer.setMaterial({ "1": "0n", "3": "2b" });

// Carregar outro modelo
viewer.loadModel("AB01-CD02");

// Capturar a renderização (ex: pré-visualização da encomenda)
viewer.captureToBase64();
viewer.addEventListener("onCaptureBase64Complete", (e) => {
  console.log(e.detail.base64);
});

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

Pronto em 3 passos. Várias formas de integrar.

Shortcode, Gutenberg
ou widget Elementor.

Para os casos avançados.

Pronto para integrar?
Nós tratamos dos modelos 3D.

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

Pronto em 3 passos. Várias formas de integrar.

Shortcode, Gutenbergou widget Elementor.

Para os casos avançados.

Pronto para integrar?Nós tratamos dos modelos 3D.

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

Shortcode, Gutenberg
ou widget Elementor.

Pronto para integrar?
Nós tratamos dos modelos 3D.