Documentación Técnica

Formatos aceptados

La plataforma 3DVue acepta varios formatos 3D. GLTF es el formato recomendado — ofrece la mejor relación calidad/tamaño de archivo para el renderizado web en tiempo real.

Recomendado

.GLTF / .GLB

Formato nativo WebGL. Compresión integrada, texturas embebidas, carga rápida. Exportación directa desde Blender con los ajustes correctos.

.FBX

Compatible, pero menos optimizado que GLTF para la web. Usar si GLTF no está disponible en tu software.

.DAE (Collada)

Útil como formato intermedio al convertir desde SolidWorks u otro software CAD via FreeCAD.

Fotos / Planos

Si no tienes archivos 3D — fotos de frente, lado, arriba y abajo. Empezamos desde cero.

Convertir desde SolidWorks — STEP / STL → GLTF

Los archivos de software CAD (SolidWorks, Fusion 360, CATIA) generalmente están en formato .STEP, .STP o .STL. Deben convertirse antes de la integración.

Método recomendado: FreeCAD — gratuito, de código abierto, excelente para la conversión CAD → GLTF sin pérdida de geometría.

1. Abrir FreeCAD
2. Importar el archivo STEP/STL
   Ctrl + I → seleccionar tu archivo .stp o .stl

3. Exportar a GLTF o DAE
   Ctrl + E → elegir formato DAE o GLTF

Conversor en línea (alternativa rápida):
   https://imagetostl.com/fr/convertir/un-fichier/stp/en/glb

Los archivos CAD industriales a menudo contienen millones de caras — demasiadas para el renderizado web en tiempo real. Con frecuencia se requiere retopología después de la conversión. 3DVue se encarga de esto como parte del proyecto de modelización.

Exportación desde Blender

Si trabajas directamente en Blender, aquí están los ajustes de exportación GLTF recomendados para la plataforma 3DVue. Usar la compresión Draco reduce significativamente el tamaño del archivo.

Formato:          glTF Binary (.glb)  ← agrupa todo en un archivo
Compresión:       Draco activado      ← reduce el tamaño entre 60-80%
Texturas:         Incluir → marcar
Materiales:       Exportar materiales → marcar
Transformadas:    Aplicar → marcar    ← obligatorio, ver sección Transformadas

Nomenclatura de colecciones en Blender

Los scripts automatizan la exportación de archivos GLTF y mapas UV. Para que funcionen correctamente, las colecciones de Blender deben seguir una estructura precisa.

Sin mayúsculas, sin caracteres acentuados, sin espacios en los nombres de colecciones. Los scripts no pueden funcionar si no se sigue esta regla.

Collection
  └── nombre-producto          ← sin acentos ni espacios
        ├── modelisation         ← todos los objetos 3D
        └── gltf                 ← archivos de exportación generados

Ejemplos correctos:
  nombre-producto: butterfly-chair      ✓
  nombre-producto: tolix-chair-a        ✓

Ejemplos incorrectos:
  nombre-producto: Butterfly Chair      ✗ mayúsculas + espacio
  nombre-producto: silla-estantería     ✗ caracteres acentuados

Transformadas & escala

Siempre aplicar transformadas Ctrl + A → Todas las Transformadas antes de exportar — de lo contrario los mapas UV son incorrectos
Trabajar a escala 1 (escala real en metros) — evita errores de escala en el configurador
Si un objeto no toca el suelo (ej. una lámpara colgante), añadir un plano invisible llamado RA de tamaño 0.0001m en la posición 0,0,0 para la realidad aumentada

Addons recomendados para Blender

Estos addons son utilizados sistemáticamente por el equipo de 3DVue para garantizar UVs de calidad en todos los proyectos.

Addon	Uso principal
UV Toolkit	Mapa de checker para visualizar distorsiones UV — esencial para verificar la calidad del desplegado antes de exportar
Texel Density	Garantiza la coherencia de densidad entre todos los objetos del mismo proyecto. Si la madera aparece en varios objetos, siempre debe tener el mismo tamaño aparente
UVPackmaster	Optimiza la colocación de islas UV en el mapa, gestiona la orientación según la dirección del objeto (útil para madera, tejidos con patrón direccional)
Mio3	Endereza UVs distorsionados, permite superponer UVs similares (ahorra espacio en el mapa UV)

Coherencia de Texel Density

La densidad de texels define cuántos píxeles de textura cubren una superficie real determinada. Si dos objetos del mismo cliente tienen densidades de texels diferentes, una textura de madera aparecerá a escalas diferentes en cada objeto — lo que no es realista.

Regla: definir un valor de densidad de texels común por proyecto al inicio de la modelización, y aplicarlo a todos los objetos mediante el addon Texel Density. Los materiales (madera, tejido, metal) siempre aparecerán a la misma escala de un objeto a otro.

Favorecer desplegados UV basados en costuras con el método Conformal — excepto para objetos de color uniforme que no necesitan un desplegado preciso.

UV para BAT SVG

Cuando el configurador usa un BAT SVG (personalización con carga de logo o texto), se aplican reglas adicionales al desplegado UV.

Todos los UVs deben caber en un único mapa UV
Exportar el mapa UV a 4096×4096 px
El GLTF debe corresponder exactamente al mapa UV exportado
Un script de Blender automatiza la exportación del GLTF y del mapa UV — las colecciones deben estar correctamente nombradas para que funcione
Si es necesario, pintar en el mapa UV para ayudar a crear el archivo de Illustrator (alineación de patrones)

Nomenclatura de archivos de textura

Cada canal PBR corresponde a un archivo de textura con un nombre estandarizado. La plataforma identifica el rol de cada textura por su nombre.

Nombre de archivo	Rol	Soporte
albedo	Color base del material (también llamado difuso)	✅ Completo
roughness	Nivel de brillo — blanco = mate, negro = brillante	✅ Completo
metallic	Propiedades metálicas — reflejo del entorno	✅ Completo
normal	Relieve falso — simula salientes y hundimientos sin polígonos adicionales	✅ Completo
emissive	Zonas luminosas (LEDs, pantallas, piezas retroiluminadas)	✅ Completo
occlusion	Sombras de contacto entre superficies (oclusión ambiental)	✅ Completo
bump	Alternativa al mapa normal — ignorado si ya hay un mapa normal	⚠️ Ignorado si hay normal
alpha	Transparencia — a probar caso por caso, no compatible con RA	⚠️ No compatible con RA

Formatos & resolución

Formato cuadrado obligatorio — 1024×1024 o 2048×2048 (máximo 2K)
Formato de archivo: PNG (recomendado para transparencia y calidad) o JPEG (tamaño de archivo más ligero)
Un mapa normal demasiado pesado puede comprimirse sin pérdida via imagecompressor.com

Las texturas no cuadradas o superiores a 2K pueden causar problemas de visualización o rendimiento en móvil. Siempre exportar en formato cuadrado.

Reglas generales

Formato cuadrado obligatorio, resolución 4K (4096×4096 px)
Nomenclatura: BAT-nombremodelo-dimension_albedo.svg
Sin caracteres acentuados, sin espacios en el nombre del archivo
Todos los elementos editables deben estar vectorizados en el SVG — sin elementos raster

Formato:  BAT-nombremodelo-dimension_albedo.svg

Ejemplos:
  BAT-camiseta-tallaL_albedo.svg      ✓
  BAT-taza-25cl_albedo.svg            ✓
  BAT-camiseta talla L albedo.svg     ✗ espacios no permitidos
  BAT-camiseta-tallaé_albedo.svg      ✗ caracteres acentuados no permitidos

Estructura de capas en Illustrator

Las capas de Illustrator deben organizarse según una estructura precisa para que el configurador pueda identificar las zonas editables y las zonas de referencia.

Nombre de capa	Rol	¿Editable?
masqué	Capa de trabajo — elementos de prueba o apartados sin eliminar	✅ Libre
non vecto	Texto no vectorizado conservado para reutilización — no exportado	✅ Libre
gabarit	Contornos del modelo 3D — guía de colocación, no modificar	🚫 No tocar
logo	Todos los logos correctamente renombrados	✅ Libre
design, design-1, design-2…	Elementos gráficos para cada variante de diseño	✅ Libre
présentation	Plantilla común a todos los diseños — no modificar	🚫 No tocar

Exportación SVG desde Illustrator

Vectorizar todos los elementos editables antes de exportar — Shift + Ctrl + O
Nombrar el archivo exportado con la convención nombrediseño_albedo.svg
Sin elementos raster en el archivo exportado — todo debe ser vectorial
Verificar que las capas gabarit y présentation estén ocultas al exportar

Atajos útiles de Illustrator:
Shift + Ctrl + O — vectorizar forma seleccionada
Ctrl + C — copiar
Ctrl + Shift + V — pegar en el mismo lugar

Instalación

1. Copiar el código siguiente en un archivo de texto
2. Renombrar el archivo como RenameColor.jsx
3. Copiar a la carpeta de scripts de Illustrator:
   C:\Program Files\Adobe\Adobe Illustrator 2026\Presets\fr_FR\Scripts\
4. Ejecutar desde Illustrator:
   Archivo → Scripts → RenameColor

Código del script

// Script Rename Color — Ultra Fast
// Renombra todos los objetos seleccionados a "color_XXX"

(function() {
  if (app.documents.length === 0) {
    alert("Por favor abre un documento de Illustrator.");
    return;
  }

  var doc       = app.activeDocument;
  var selection = doc.selection;

  if (selection.length === 0) {
    alert("Por favor selecciona al menos un objeto para renombrar.");
    return;
  }

  var number = prompt("Número (ej. 001, 002, etc.):", "001");

  if (number === null || number === "") { return; }

  var finalName = "color" + number;

  for (var i = 0; i < selection.length; i++) {
    selection[i].name = finalName;
  }

  alert(selection.length + " objeto(s) renombrado(s) a: " + finalName);
})();

Cómo usar: seleccionar una o varias capas en Illustrator, ejecutar el script via Archivo → Scripts → RenameColor, introducir el número (001, 002…) y confirmar. Todos los objetos seleccionados se renombran a color001 simultáneamente.

Incluir el script

Añade el script una vez en tu <head> o antes de </body>. Una sola inclusión es suficiente para todas las páginas de tu sitio.

<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>

Declarar el componente

Coloca la etiqueta <viewer-3dvue> donde quieras que aparezca el visor. Dos atributos son obligatorios: name (identificador único en la página) y src (URL de tu configurador, proporcionada por 3DVue en la entrega).

<!-- Atributos obligatorios -->
<viewer-3dvue
  name="miVisor"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>

<!-- Con debug activado (logs en consola) -->
<viewer-3dvue
  name="miVisor"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
  debug
></viewer-3dvue>

La URL del parámetro src es específica de cada proyecto — codifica los objetos y materiales del configurador. Te la proporciona 3DVue en la entrega.

Control sin JavaScript

El componente escucha automáticamente los eventos click y change en cualquier elemento que tenga los atributos siguientes. Sin JavaScript necesario.

Atributo	Valor	Uso
viewer-3dvue	Nombre del visor objetivo	Obligatorio en cada elemento disparador
viewer-3dvue-clic	setMaterial	Dispara un cambio de material al hacer clic
viewer-3dvue-change	setMaterial	Dispara un cambio al seleccionar en <select>
viewer-3dvue-meshs-materials	JSON {"meshIndex":"materialId"}	Materiales a aplicar (varios meshes admitidos)
viewer-3dvue-mesh	"1,2,3"	Índices de mesh objetivo para un <select>

<!-- Botón que cambia varios materiales al hacer clic -->
<button
  viewer-3dvue="miVisor"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{"1":"0n","3":"2b"}'
>
  Azul Medianoche
</button>

<!-- Select que aplica el valor elegido -->
<select
  viewer-3dvue="miVisor"
  viewer-3dvue-change="setMaterial"
  viewer-3dvue-mesh="2,4"
>
  <option value="0n">Rojo</option>
  <option value="1a">Azul</option>
</select>

API JavaScript

Para casos avanzados — carga dinámica, captura de imagen, exportación SVG. Recuperar la referencia del componente via querySelector.

Método	Descripción
setMaterial(materials, index)	Aplica materiales a los meshes de un objeto
loadModel(id)	Reemplaza el modelo actual
addModel(id)	Añade un objeto a la escena
removeModel(index)	Elimina un objeto por su índice
resetCamera()	Restablece la cámara a su posición inicial
pauseRenderer() / startRenderer()	Control manual del renderizador (gestionado automáticamente por IntersectionObserver)
captureToBase64()	Captura el render como imagen base64 → evento onCaptureBase64Complete
exportSVG()	Genera el BAT SVG del producto → evento onSVGExportComplete
addSVGText(text, opts)	Añade texto en una zona editable del producto
addSVGImage(source, opts)	Añade una imagen (File o ArrayBuffer) en una zona editable
loadFonts(fonts)	Precarga fuentes de Google Fonts o fuentes .woff2 personalizadas

// Obtener la referencia del componente
const viewer = document.querySelector('viewer-3dvue[name="miVisor"]');

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

// Capturar el render actual
viewer.captureToBase64();
viewer.addEventListener("onCaptureBase64Complete", (e) => {
  const { base64, error } = e.detail;
  if (!error) document.querySelector("#preview").src = base64;
});

Guías de integración por plataforma: Shopify, WooCommerce, PrestaShop, WordPress.

Buenas prácticas
3DVue

Preparar tus archivos 3D

Formatos aceptados

Convertir desde SolidWorks — STEP / STL → GLTF

Exportación desde Blender

Nomenclatura de colecciones en Blender

Transformadas & escala

UV Mapping

Addons recomendados para Blender

Coherencia de Texel Density

UV para BAT SVG

Texturas PBR

Nomenclatura de archivos de textura

Formatos & resolución

Crear un BAT SVG

Reglas generales

Estructura de capas en Illustrator

Exportación SVG desde Illustrator

Script de renombrado para Illustrator

Instalación

Código del script

Integrar el visor 3DVue

Incluir el script

Declarar el componente

Control sin JavaScript

API JavaScript

Buenas prácticas3DVue

Preparar tus archivos 3D

Formatos aceptados

Convertir desde SolidWorks — STEP / STL → GLTF

Exportación desde Blender

Nomenclatura de colecciones en Blender

Transformadas & escala

UV Mapping

Addons recomendados para Blender

Coherencia de Texel Density

UV para BAT SVG

Texturas PBR

Nomenclatura de archivos de textura

Formatos & resolución

Crear un BAT SVG

Reglas generales

Estructura de capas en Illustrator

Exportación SVG desde Illustrator

Script de renombrado para Illustrator

Instalación

Código del script

Integrar el visor 3DVue

Incluir el script

Declarar el componente

Control sin JavaScript

API JavaScript

Buenas prácticas
3DVue