Buenas prácticas
3DVue

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.

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.

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

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.

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.

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.

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.

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

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.

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

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>

Control sin JavaScript

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

<!-- 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.

Eventos

Escuche los eventos directamente en el elemento viewer-3dvue mediante addEventListener.

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

// Esperar a que el viewer esté listo (recomendado para loadFonts)
viewer.addEventListener("onLoadComplete", () => {
  viewer.loadFonts([{ family: "Bebas Neue" }, { family: "Pacifico" }]);
});

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

// Modificar el elemento SVG seleccionado
viewer.setSVGElementParam("fill", "#ff0000");          // color
viewer.setSVGElementParam("text", "Mi texto");          // contenido de texto
viewer.setSVGElementParam("colorStop.0", "#7C3AED", "zone-id"); // degradado

// Reaccionar a la selección de un elemento SVG
viewer.addEventListener("onSVGObjectSelected", (e) => {
  const obj = e.detail.obj;
  if (obj.type === "text") inputText.value = obj.text ?? "";
});
viewer.addEventListener("onSVGObjectDeselected", () => { inputText.value = ""; });

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