Technische Leitfäden zur Vorbereitung Ihrer 3D-Dateien, Texturen, BAT-Assets und zur Integration des Konfigurators auf Ihrer Website. Letzte Aktualisierung: April 2026.
Akzeptierte Formate, Konvertierungsregeln und Best Practices in Blender für eine reibungslose Integration.
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.
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
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
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
Das UV-Unwrapping bestimmt die Qualität des Textur-Renderings. Ein schlecht gemachtes UV erzeugt sichtbare Verzerrungen — Muster strecken oder stauchen sich auf bestimmten Flächen.
Diese Addons werden vom 3DVue-Team systematisch eingesetzt, um in allen Projekten qualitativ hochwertige UVs zu gewährleisten.
| Addon | Hauptverwendung |
|---|---|
| UV Toolkit | Checker-Map zur Visualisierung von UV-Verzerrungen — essenziell zur Überprüfung der Unwrapping-Qualität vor dem Export |
| Texel Density | Gewährleistet Dichtekonsistenz zwischen allen Objekten desselben Projekts. Wenn Holz auf mehreren Objekten erscheint, muss es immer die gleiche scheinbare Größe haben |
| UVPackmaster | Optimiert die Platzierung von UV-Inseln auf der Karte, verwaltet die Ausrichtung gemäß der Objektrichtung (nützlich für Holz, Stoffe mit gerichteten Mustern) |
| Mio3 | Begradigt verzerrte UVs, ermöglicht das Überlagern ähnlicher UVs (spart Platz auf der UV-Karte) |
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.
Wenn der Konfigurator ein BAT SVG verwendet (Personalisierung mit Logo- oder Texteingabe), gelten zusätzliche Regeln für das UV-Unwrapping.
Namenskonventionen, Formate und Spezifikationen für Texturdateien, die mit der 3DVue-Plattform kompatibel sind.
Jeder PBR-Kanal entspricht einer Texturdatei mit einem standardisierten Namen. Die Plattform identifiziert die Rolle jeder Textur anhand ihres Namens.
| Dateiname | Rolle | Unterstützung |
|---|---|---|
| albedo | Grundfarbe des Materials (auch Diffus genannt) | ✅ Vollständig |
| roughness | Glanzgrad — weiß = matt, schwarz = glänzend | ✅ Vollständig |
| metallic | Metalleigenschaften — Umgebungsreflexion | ✅ Vollständig |
| normal | Falsches Relief — simuliert Vorsprünge und Vertiefungen ohne zusätzliche Polygone | ✅ Vollständig |
| emissive | Leuchtbereiche (LEDs, Bildschirme, hinterleuchtete Teile) | ✅ Vollständig |
| occlusion | Kontaktschatten zwischen Oberflächen (Ambient Occlusion) | ✅ Vollständig |
| bump | Alternative zur Normal-Map — ignoriert, wenn bereits eine Normal-Map vorhanden | ⚠️ Ignoriert wenn Normal |
| alpha | Transparenz — je nach Fall zu testen, nicht kompatibel mit AR | ⚠️ Nicht kompatibel mit AR |
Illustrator-Leitfaden für Personalisierungsprojekte — Logo-Upload, gravierter Text, Markierungsbereiche. Das BAT SVG ist die vom Konfigurator generierte Produktionsdatei.
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
Die Illustrator-Ebenen müssen nach einer präzisen Struktur organisiert sein, damit der Konfigurator bearbeitbare Zonen und Referenzzonen identifizieren kann.
| Ebenenname | Rolle | Bearbeitbar? |
|---|---|---|
| masqué | Arbeitsebene — Testelemente oder zurückgestellte Elemente ohne Löschen | ✅ Frei |
| non vecto | Nicht vektorisierter Text zur Wiederverwendung aufbewahrt — nicht exportiert | ✅ Frei |
| gabarit | 3D-Modell-Konturen — Platzierungshilfe, nicht ändern | 🚫 Nicht anfassen |
| logo | Alle korrekt umbenannten Logos | ✅ Frei |
| design, design-1, design-2… | Grafikelemente für jede Design-Variante | ✅ Frei |
| présentation | Gemeinsame Vorlage für alle Designs — nicht ändern | 🚫 Nicht anfassen |
JSX-Skript zum automatischen Umbenennen der ausgewählten Elemente im Format color_XXX. Erhebliche Zeitersparnis bei Projekten mit vielen bearbeitbaren Zonen.
1. Den folgenden Code in eine Textdatei kopieren 2. Die Datei in RenameColor.jsx umbenennen 3. In den Illustrator-Skriptordner kopieren: C:\Program Files\Adobe\Adobe Illustrator 2026\Presets\fr_FR\Scripts\ 4. Aus Illustrator ausführen: Datei → Skripte → RenameColor
// Script Rename Color — Ultra Fast // Benennt alle ausgewählten Objekte in "color_XXX" um (function() { if (app.documents.length === 0) { alert("Bitte öffnen Sie ein Illustrator-Dokument."); return; } var doc = app.activeDocument; var selection = doc.selection; if (selection.length === 0) { alert("Bitte wählen Sie mindestens ein Objekt zum Umbenennen aus."); return; } var number = prompt("Nummer (z.B. 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 + " Objekt(e) umbenannt in: " + finalName); })();
Der 3DVue-Viewer ist eine native Web-Komponente. Er funktioniert in jeder HTML-Umgebung — Shopify, WooCommerce, PrestaShop, WordPress oder einer maßgeschneiderten Website.
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>
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>
Die Komponente lauscht automatisch auf click- und change-Ereignisse an jedem Element mit den folgenden Attributen. Kein JavaScript erforderlich.
| Attribut | Wert | Verwendung |
|---|---|---|
| viewer-3dvue | Name des Ziel-Viewers | Obligatorisch bei jedem auslösenden Element |
| viewer-3dvue-clic | setMaterial | Löst eine Materialänderung beim Klicken aus |
| viewer-3dvue-change | setMaterial | Löst eine Änderung bei der Auswahl in <select> aus |
| viewer-3dvue-meshs-materials | JSON {"meshIndex":"materialId"} | Anzuwendende Materialien (mehrere Meshes unterstützt) |
| viewer-3dvue-mesh | "1,2,3" | Ziel-Mesh-Indizes für ein <select> |
<!-- 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>
Für erweiterte Fälle — dynamisches Laden, Bilderfassung, SVG-Export. Den Komponentenverweis über querySelector abrufen.
| Methode | Beschreibung |
|---|---|
| setMaterial(materials, index) | Wendet Materialien auf die Meshes eines Objekts an |
| loadModel(id) | Ersetzt das aktuelle Modell |
| addModel(id) | Fügt ein Objekt zur Szene hinzu |
| removeModel(index) | Entfernt ein Objekt anhand seines Index |
| resetCamera() | Setzt die Kamera auf ihre Anfangsposition zurück |
| pauseRenderer() / startRenderer() | Manuelle Renderer-Steuerung (automatisch durch IntersectionObserver verwaltet) |
| captureToBase64() | Erfasst das aktuelle Render als base64-Bild → Ereignis onCaptureBase64Complete |
| exportSVG() | Generiert das BAT SVG des Produkts → Ereignis onSVGExportComplete |
| addSVGText(text, opts) | Fügt Text in einem bearbeitbaren Bereich des Produkts hinzu |
| addSVGImage(source, opts) | Fügt ein Bild (File oder ArrayBuffer) in einem bearbeitbaren Bereich hinzu |
| loadFonts(fonts) | Lädt Google Fonts- oder benutzerdefinierte .woff2-Schriftarten vor |
// Komponentenverweis abrufen const viewer = document.querySelector('viewer-3dvue[name="meinViewer"]'); // Materialien ändern viewer.setMaterial({ "1": "0n", "3": "2b" }); // Aktuelles Render erfassen viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { const { base64, error } = e.detail; if (!error) document.querySelector("#preview").src = base64; });
Matthieu antwortet direkt — kein Ticketing, keine Verzögerungen. Wenn etwas unklar ist oder Ihr Fall hier nicht abgedeckt wird, buchen Sie ein Gespräch.
