Best Practices
3DVue

Akzeptierte Formate

Die 3DVue-Plattform akzeptiert mehrere 3D-Formate. GLTF ist das empfohlene Format : es bietet das beste Qualitäts-/Dateigröße-Verhältnis für Echtzeit-Web-Rendering.

Konvertierung von SolidWorks : STEP / STL → GLTF

CAD-Software-Dateien (SolidWorks, Fusion 360, CATIA) liegen in der Regel im Format .STEP, .STP oder .STL vor. Sie müssen vor der Integration konvertiert werden.

1. FreeCAD öffnen
2. STEP/STL-Datei importieren
   Ctrl + I → Ihre .stp oder .stl-Datei auswählen

3. Als GLTF oder DAE exportieren
   Ctrl + E → Format DAE oder GLTF auswählen

Online-Konverter (schnelle Alternative):
   https://imagetostl.com/fr/convertir/un-fichier/stp/en/glb

Export aus Blender

Wenn Sie direkt in Blender arbeiten, hier sind die empfohlenen GLTF-Exporteinstellungen für die 3DVue-Plattform. Die Verwendung der Draco-Komprimierung reduziert die Dateigröße erheblich.

Format:          glTF Binary (.glb)  ← fasst alles in einer Datei zusammen
Komprimierung:   Draco aktiviert     ← reduziert die Größe um 60-80%
Texturen:        Einbeziehen → aktivieren
Materialien:     Materialien exportieren → aktivieren
Transformationen: Anwenden → aktivieren ← obligatorisch, siehe Abschnitt Transformationen

Kollektionsbezeichnung in Blender

Die Skripte automatisieren den Export von GLTF-Dateien und UV-Karten. Damit sie korrekt funktionieren, müssen die Blender-Kollektionen einer präzisen Struktur folgen.

Collection
  └── produktname              ← keine Akzente oder Leerzeichen
        ├── modelisation         ← alle 3D-Objekte
        └── gltf                 ← generierte Exportdateien

Richtige Beispiele:
  produktname: butterfly-chair      ✓
  produktname: tolix-chair-a        ✓

Falsche Beispiele:
  produktname: Butterfly Chair      ✗ Großbuchstaben + Leerzeichen
  produktname: silla-estantería     ✗ Akzentzeichen

Transformationen & Maßstab

• Transformationen immer anwenden Ctrl + A → Alle Transformationen vor dem Export : sonst sind die UV-Karten falsch
• Mit Maßstab 1 arbeiten (reale Maße in Metern) : vermeidet Maßstabsfehler im Konfigurator
• Wenn ein Objekt den Boden nicht berührt (z. B. eine hängende Lampe), eine unsichtbare Ebene namens RA mit der Größe 0.0001m an Position 0,0,0 für Augmented Reality hinzufügen

Empfohlene Addons für Blender

Diese Addons werden vom 3DVue-Team systematisch eingesetzt, um in allen Projekten qualitativ hochwertige UVs zu gewährleisten.

Texel-Density-Konsistenz

Die Texel-Dichte definiert, wie viele Textur-Pixel eine bestimmte reale Oberfläche abdecken. Wenn zwei Objekte desselben Kunden unterschiedliche Texel-Dichten haben, erscheint eine Holztextur in jedem Objekt in unterschiedlichen Maßstäben : was nicht realistisch ist.

UV-Unwrapping auf Basis von Nähten mit der Conformal-Methode bevorzugen : außer für einfarbige Objekte, die kein präzises Unwrapping benötigen.

UV für BAT SVG

Wenn der Konfigurator ein BAT SVG verwendet (Personalisierung mit Logo- oder Texteingabe), gelten zusätzliche Regeln für das UV-Unwrapping.

• Alle UVs müssen in eine einzige UV-Karte passen
• UV-Karte in 4096×4096 px exportieren
• Die GLTF-Datei muss genau der exportierten UV-Karte entsprechen
• Ein Blender-Skript automatisiert den Export der GLTF-Datei und der UV-Karte : die Kollektionen müssen korrekt benannt sein, damit es funktioniert
• Bei Bedarf auf der UV-Karte malen, um die Erstellung der Illustrator-Datei zu unterstützen (Musterausrichtung)

Dateibezeichnung für Texturen

Jeder PBR-Kanal entspricht einer Texturdatei mit einem standardisierten Namen. Die Plattform identifiziert die Rolle jeder Textur anhand ihres Namens.

Formate & Auflösung

• Quadratisches Format obligatorisch : 1024×1024 oder 2048×2048 (maximal 2K)
• Dateiformat: PNG (empfohlen für Transparenz und Qualität) oder JPEG (leichtere Dateigröße)
• Eine zu schwere Normal-Map kann verlustfrei über imagecompressor.com komprimiert werden

Allgemeine Regeln

• Quadratisches Format obligatorisch, 4K-Auflösung (4096×4096 px)
• Namenskonvention: BAT-modellname-abmessung_albedo.svg
• Keine Akzentzeichen, keine Leerzeichen im Dateinamen
• Alle bearbeitbaren Elemente müssen im SVG vektorisiert sein : keine Rasterelemente

Format:  BAT-modellname-abmessung_albedo.svg

Beispiele:
  BAT-trikot-groesseL_albedo.svg      ✓
  BAT-becher-25cl_albedo.svg          ✓
  BAT-trikot groesse L albedo.svg     ✗ Leerzeichen nicht erlaubt
  BAT-trikot-groessee_albedo.svg      ✗ Akzentzeichen nicht erlaubt

Ebenenstruktur in Illustrator

Die Illustrator-Ebenen müssen nach einer präzisen Struktur organisiert sein, damit der Konfigurator bearbeitbare Zonen und Referenzzonen identifizieren kann.

SVG-Export aus Illustrator

• Alle bearbeitbaren Elemente vor dem Export vektorisieren : Shift + Ctrl + O
• Die exportierte Datei nach der Konvention designname_albedo.svg benennen
• Keine Rasterelemente in der exportierten Datei : alles muss vektoriell sein
• Sicherstellen, dass die Ebenen gabarit und présentation beim Export ausgeblendet sind

Das Script einbinden

Fügen Sie das Script einmalig in Ihren <head> oder vor </body> ein. Eine einzige Einbindung reicht für alle Seiten Ihrer Website.

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

Die Komponente deklarieren

Platzieren Sie das Tag <viewer-3dvue>, wo der Viewer erscheinen soll. Zwei Attribute sind obligatorisch: name (eindeutige Kennung auf der Seite) und src (URL Ihres Konfigurators, von 3DVue bei der Lieferung bereitgestellt).

<!-- Obligatorische Attribute -->
<viewer-3dvue
  name="meinViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>

<!-- Mit aktiviertem Debug (Konsolen-Logs) -->
<viewer-3dvue
  name="meinViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
  debug
></viewer-3dvue>

Steuerung ohne JavaScript

Die Komponente lauscht automatisch auf click- und change-Ereignisse an jedem Element mit den folgenden Attributen. Kein JavaScript erforderlich.

<!-- Button der beim Klicken mehrere Materialien ändert -->
<button
  viewer-3dvue="meinViewer"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{"1":"0n","3":"2b"}'
>
  Mitternachtsblau
</button>

<!-- Select der den gewählten Wert anwendet -->
<select
  viewer-3dvue="meinViewer"
  viewer-3dvue-change="setMaterial"
  viewer-3dvue-mesh="2,4"
>
  <option value="0n">Rot</option>
  <option value="1a">Blau</option>
</select>

API JavaScript

Für erweiterte Fälle : dynamisches Laden, Bilderfassung, SVG-Export. Den Komponentenverweis über querySelector abrufen.

Ereignisse

Hören Sie Ereignisse direkt am viewer-3dvue-Element über addEventListener.

// Komponentenverweis abrufen
const viewer = document.querySelector('viewer-3dvue[name="meinViewer"]');

// Auf Viewer-Bereitschaft warten (empfohlen für loadFonts)
viewer.addEventListener("onLoadComplete", () => {
  viewer.loadFonts([{ family: "Bebas Neue" }, { family: "Pacifico" }]);
});

// Materialien ändern
viewer.setMaterial({ "1": "0n", "3": "2b" });

// Ausgewähltes SVG-Element ändern
viewer.setSVGElementParam("fill", "#ff0000");          // Farbe
viewer.setSVGElementParam("text", "Mein Text");        // Textinhalt
viewer.setSVGElementParam("colorStop.0", "#7C3AED", "zone-id"); // Gradient

// Auf SVG-Element-Auswahl reagieren
viewer.addEventListener("onSVGObjectSelected", (e) => {
  const obj = e.detail.obj;
  if (obj.type === "text") inputText.value = obj.text ?? "";
});
viewer.addEventListener("onSVGObjectDeselected", () => { inputText.value = ""; });

// Aktuelles Render erfassen
viewer.captureToBase64();
viewer.addEventListener("onCaptureBase64Complete", (e) => {
  const { base64, error } = e.detail;
  if (!error) document.querySelector("#preview").src = base64;
});