Guía para desarrolladores — WordPress

Un configurador 3D
en WordPress.
2 líneas de código.

<viewer-3dvue> es un Web Component nativo. Funciona en cualquier contexto WordPress — widget HTML de Elementor, bloque Gutenberg, shortcode, template PHP custom, CPT con ACF. Sin plugin dedicado, sin dependencias.

Compatible WordPress 6+

Widget HTML de Elementor

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

<!-- Eso es todo. -->

Cargar el script — 3 formas

El método recomendado es wp_enqueue_script() en functions.php. También puedes incluirlo via WPCode (snippet global), o directamente en un widget HTML de Elementor si no quieres tocar los archivos.

Si usas WPCode, crea un snippet de tipo "HTML" con la etiqueta <script> y actívalo en todas las páginas o solo en las páginas de producto.

// 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. En un widget HTML de Elementor
<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
<viewer-3dvue name="miVisor" src="..."></viewer-3dvue>

Colocar el componente

Pega la etiqueta en tu template PHP, en un widget HTML de Elementor, o via un shortcode. Para CPT con ACF, puedes condicionar la visualización según el valor de un campo personalizado.

3DVue usa exactamente este método en su propio sitio — widget HTML de Elementor, sin plugin, sin código PHP. La etiqueta se pega directamente en el widget.

<?php
// Recuperar el ID del configurador desde un campo ACF
$viewer_id = get_field('configurateur_3d_id');
?>

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

Conectar tus selectores de variantes

WordPress no tiene un sistema de variaciones nativo — todo se hace mediante tus componentes HTML custom. Añade los atributos viewer-3dvue en tus botones o selects de configuración de producto. Sin JS que escribir.

<!-- Botones de color custom -->
<button
  viewer-3dvue="miVisor"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{"1":"0n","2":"1a"}'
>Roble natural</button>

<!-- Select de acabado -->
<select
  viewer-3dvue="miVisor"
  viewer-3dvue-change="setMaterial"
  viewer-3dvue-mesh="1"
>
  <option value="0n">Lacado negro</option>
  <option value="1a">Lacado blanco</option>
  <option value="2b">Roble</option>
</select>

Via un shortcode PHP

Registra un shortcode en functions.php para poder insertarlo en cualquier página o entrada desde el editor.

// En 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>';
  }
);

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

Bloque HTML personalizado de Gutenberg

Sin código PHP — pega directamente en un bloque "HTML personalizado" de Gutenberg. El script debe estar ya cargado globalmente.

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

<!-- Botones de variante en el mismo bloque -->
<button
  viewer-3dvue="miVisor"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{"1":"0n"}'
>Negro</button>

Integración con wp_localize_script() Pasar datos PHP (ID configurador desde ACF) hacia el JS del visor

// functions.php — pasar los datos ACF al JS
wp_localize_script('mi-script', 'ViewerConfig', [
  'viewerId' => get_field('configurateur_id'),
  'materials' => get_field('materials_map'),
]);

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

setMaterial() / loadModel() / addModel() La misma API que en todas las plataformas — la referencia completa está en la documentación

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

// Cambiar los materiales
viewer.setMaterial({ "1": "0n", "3": "2b" });

// Cargar otro modelo
viewer.loadModel("AB01-CD02");

// Capturar el renderizado (ej: preview del pedido)
viewer.captureToBase64();
viewer.addEventListener("onCaptureBase64Complete", (e) => {
  console.log(e.detail.base64);
});

Un configurador 3D
en WordPress.
2 líneas de código.

Listo en 3 pasos. Varias formas de integrarlo.

Shortcode, Gutenberg
o widget Elementor.

Para los casos avanzados.

¿Listo para integrar?
Nosotros nos ocupamos de los modelos 3D.

Un configurador 3D en WordPress. 2 líneas de código.

Listo en 3 pasos. Varias formas de integrarlo.

Shortcode, Gutenbergo widget Elementor.

Para los casos avanzados.

¿Listo para integrar?Nosotros nos ocupamos de los modelos 3D.

Un configurador 3D
en WordPress.
2 líneas de código.

Shortcode, Gutenberg
o widget Elementor.

¿Listo para integrar?
Nosotros nos ocupamos de los modelos 3D.