Wir bereiten die neuesten Anleitungen, Releases und Feature-Updates vor.
Anleitungen werden geladen
Wir bereiten die passenden Inhalte der Wissensdatenbank für diese Plattform vor.
FBX-Modelle und Umgebungskarten vorbereiten | Chamevo Support Center
FBX-Modelle und Umgebungskarten vorbereiten
Erstellen Sie benutzerdefinierte 3D-Modelle für Chamevo-Produkte, einschließlich FBX-Export, Einrichtung von Umgebungskarten, config.json-Struktur und Mesh-Namenskonventionen.
Aktualisiert am 28. April 20265 Min. Lesezeit
Wenn Ihr Produkt eine besondere Form hat, die vorgefertigte Modelle nicht abdecken, können Sie ein benutzerdefiniertes 3D-Modell erstellen. Diese Anleitung behandelt die Dateianforderungen, Mesh-Namenskonventionen, die config.json-Struktur und den Upload-Prozess.
Bevor Sie beginnen
Sie benötigen ein 3D-Modellierwerkzeug, das FBX-Dateien exportiert: Blender (kostenlos), Cinema 4D, 3ds Max oder Maya.
Sie benötigen eine HDR-Umgebungskartendatei für realistische Beleuchtung. Kostenlose HDR-Karten sind auf Seiten wie Poly Haven verfügbar.
Grundkenntnisse in 3D-Modellierung: Meshes erstellen, Materialien zuweisen und Dateien exportieren.
Ordnerstruktur des Modells
Jedes 3D-Modell befindet sich in einem eigenen Ordner. Der Ordner muss genau drei Dateien enthalten:
Der Ordnername muss mit dem Feld id in der config.json übereinstimmen.
Schritt 1: Das 3D-Modell erstellen
Mesh-Namen für bedruckbare Bereiche
Die 3D-Engine identifiziert bedruckbare Flächen anhand des Mesh-Namens. Benennen Sie die Meshes, die das Design des Kunden aufnehmen sollen, nach dieser Konvention:
Ein Produkt mit Vorder- und Rückansicht hätte zwei Meshes: custom (vorne) und custom_1 (hinten). Das Design des Kunden aus jeder Canvas-Ansicht wird als Textur auf das entsprechende Mesh aufgetragen.
Alle anderen Meshes im Modell (Produktkörper, Griff, Standfuß usw.) können beliebige Namen haben. Nur Meshes mit den Namen custom, custom_1, custom_2 usw. erhalten Design-Texturen.
Material-Setup
Weisen Sie dem Mesh custom ein Material namens custom zu. Die 3D-Engine ersetzt die Textur dieses Materials durch den Canvas-Inhalt.
Nicht bedruckbare Meshes verwenden Standardmaterialien. Legen Sie Farbe, Metalness und Roughness in Ihrem 3D-Werkzeug fest – diese Eigenschaften übertragen sich auf die Web-Vorschau.
Geben Sie für farb-verlinkbare Teile (Teile, die Kunden umfärben können) jedem Teil einen eindeutigen Mesh-Namen. Sie verweisen auf diese Namen in der Einstellung Color Link 3D Layer des Designelements.
UV-Mapping
Das UV-Mapping bestimmt, wie die 2D-Design-Textur auf die 3D-Oberfläche aufgebracht wird. Das Mesh custom muss ein sauberes UV-Mapping haben:
Die UV-Koordinaten sollten den UV-Raum von 0–1 so vollständig wie möglich ausfüllen.
Vermeiden Sie UV-Überlappungen – überlappende UVs führen dazu, dass das Design an mehreren Stellen erscheint.
Richten Sie das UV so aus, dass das Design auf dem Modell aufrecht erscheint.
Testen Sie das UV, indem Sie in Ihrem 3D-Werkzeug eine Schachbretttextur aufbringen. Wenn die Quadrate gleichmäßig und korrekt ausgerichtet sind, ist das UV in Ordnung.
Polygon-Anzahl
Halten Sie das Modell für die Web-Auslieferung leichtgewichtig:
Produkttyp
Empfohlene Polygon-Anzahl
Einfache Formen (Tassen, Handyhüllen, Flaschen)
5.000–15.000 Polygone
Mittlere Komplexität (Schuhe, Taschen)
15.000–40.000 Polygone
Detaillierte Produkte (mehrteilige Artikel)
40.000–80.000 Polygone
Höhere Polygon-Zahlen erzeugen glattere Oberflächen, erhöhen aber Dateigröße und Ladezeit. Streben Sie für den Web-Einsatz die niedrigste Polygon-Anzahl an, die noch glatt aussieht.
Schritt 2: Als FBX exportieren
Exportieren Sie das Modell aus Ihrem 3D-Werkzeug im binären FBX-Format:
Vorwärts: -Z Vorwärts (oder passend zur Szenenausrichtung).
Oben: Y Oben.
Exportieren als model.fbx.
Allgemeine Exportrichtlinien für jedes Werkzeug:
Exportieren Sie nur Geometrie und Materialien. Schließen Sie keine Kameras, Lichter oder Armatures ein, sofern nicht benötigt.
Betten Sie Texturen ein, wenn das Modell gebackene Texturen auf nicht bedruckbaren Teilen hat.
Verwenden Sie das binäre FBX-Format (nicht ASCII). Binär ist kleiner und lädt schneller.
Schritt 3: Die Umgebungskarte vorbereiten
Die Umgebungskarte sorgt für realistische Beleuchtung und Reflexionen. Es handelt sich um ein HDR-Bild (High Dynamic Range), das sich als sphärische Lichtquelle um die Szene legt.
Erstellen Sie Ihre eigene in Blender, indem Sie eine Szene als HDR-Equirectangular-Bild rendern.
Anforderungen:
Format: .hdr (Radiance HDR).
Auflösung: 1024 × 512 oder 2048 × 1024 ist ausreichend. Höhere Auflösungen erhöhen die Dateigröße ohne sichtbaren Vorteil bei typischen Produktvorschauen.
Benennen Sie die Datei exakt environment_map.hdr.
Wählen Sie eine Umgebung, die zu Ihrem Produkt passt. Eine neutrale Studio-Umgebung eignet sich für die meisten Produkte. Eine Außenumgebung fügt natürliches Licht hinzu, passt aber möglicherweise nicht zu allen Produkttypen.
Schritt 4: config.json erstellen
Die Datei config.json definiert die Identität und Rendereigenschaften des Modells.
Muss mit dem Ordnernamen übereinstimmen. Wird intern zur Identifizierung des Modells verwendet
name
string
Ja
Anzeigename im Product Builder-Dropdown
print_area
object
Empfohlen
{ width, height } in Pixeln. Definiert die Texturauflösung für den bedruckbaren Bereich. Stimmen Sie das Seitenverhältnis mit dem Canvas-Druckbereich ab
camera_z
number
Nein
Kameraabstand zum Modell. Höhere Werte zoomen heraus. Beginnen Sie mit 300 und passen Sie an
Die Werte width und height in print_area definieren die Texturauflösung für das bedruckbare Mesh. Wichtiger ist, dass ihr Seitenverhältnis mit dem Canvas-Druckbereich Ihres Produkts übereinstimmen muss.
Wenn Ihr Canvas-Druckbereich 900 × 600 Pixel beträgt (3:2), setzen Sie print_area auf ein beliebiges 3:2-Verhältnis – z. B. { "width": 900, "height": 600 } oder { "width": 1200, "height": 800 }. Höhere Werte erzeugen schärfere Texturen, verbrauchen aber mehr GPU-Speicher.
Farbformat für Materialien
Farben werden als Dezimalzahlen angegeben, nicht als Hex-Strings. Häufige Werte:
Farbe
Hex
Dezimal
Weiß
#FFFFFF
16777215
Schwarz
#000000
0
Hellgrau
#CCCCCC
13421772
Rot
#FF0000
16711680
Konvertierung: In JavaScript gibt parseInt('CCCCCC', 16) den Wert 13421772 zurück.
Normal Maps (optional)
Normal Maps fügen Oberflächendetails (Textur, Unebenheiten, Maserung) zu Modell-Meshes hinzu, ohne Polygone zu erhöhen. Wenn Ihr Produkt eine strukturierte Oberfläche hat (wie Gewebemuster oder Ledermaserung), fügen Sie Normal-Map-Bilder zum Modellordner hinzu und referenzieren Sie sie in customMaterialLayers:
Jeder Schlüssel ist ein Mesh-Name im FBX-Modell. Der Wert ist der Dateiname des Normal-Map-Bildes im selben Modellordner. Normal Maps sollten im PNG-Format sein, quadratisch und in Potenzen-von-zwei-Auflösung (512 × 512, 1024 × 1024).
Schritt 5: Modell hochladen
Option A: FTP-Upload
Verbinden Sie sich per FTP oder SFTP mit Ihrem Server.
Navigieren Sie zu wp-content/uploads/chamevo/3d_models/.
Erstellen Sie einen neuen Ordner, der dem id-Wert Ihres Modells entspricht (z. B. my-product).
Laden Sie alle drei Dateien (model.fbx, environment_map.hdr, config.json) in diesen Ordner hoch.
Option B: Manuelle ZIP-Installation
Erstellen Sie eine ZIP-Datei, die Ihren Modellordner enthält (den Ordner selbst, nicht nur die Dateien).
Die ZIP-Struktur sollte sein: my-product/model.fbx, my-product/environment_map.hdr, my-product/config.json.
Hosten Sie die ZIP-Datei unter einer öffentlich zugänglichen URL.
Verwenden Sie den Installationsablauf des 3D Models Managers, der die ZIP-Datei herunterlädt und in das richtige Verzeichnis extrahiert.
Nach dem Hochladen erscheint das Modell im Dropdown 3D Preview Model, wenn Sie Produkte unter Chamevo → Products bearbeiten.
Setup überprüfen
Gehen Sie zu Chamevo → Products, öffnen Sie ein Produkt und wählen Sie Ihr benutzerdefiniertes Modell aus dem Dropdown 3D Preview Model aus. Speichern Sie.
Öffnen Sie die Produktseite im Frontend.
Überprüfen Sie, ob das 3D-Modell korrekt lädt und angezeigt wird.
Fügen Sie ein Designelement (Text oder Bild) hinzu und prüfen Sie, ob es auf der Modelloberfläche erscheint.
Drehen Sie das Modell, um zu überprüfen, ob das Design korrekt positioniert und nicht verzerrt ist.
Fehlerbehebung
Modell erscheint nicht im Dropdown
Überprüfen Sie, ob der Ordner in wp-content/uploads/chamevo/3d_models/ liegt.
Überprüfen Sie, ob config.json existiert und gültiges JSON ist (keine nachgestellten Kommas, korrekte Anführungszeichen).
Überprüfen Sie, ob das Feld id in der config.json exakt mit dem Ordnernamen übereinstimmt.
Design erscheint gestreckt oder verzerrt
Das Seitenverhältnis des Druckbereichs in config.json stimmt nicht mit dem Canvas-Druckbereich überein. Passen Sie entweder die print_area-Werte in config.json oder die Abmessungen der Canvas-Druckbox an, damit die Verhältnisse übereinstimmen.
Design erscheint auf dem Kopf oder gedreht
Das UV-Mapping auf dem Mesh custom ist falsch ausgerichtet. Öffnen Sie das Modell in Ihrem 3D-Werkzeug, korrigieren Sie die UV-Rotation und exportieren Sie erneut.
Modell lädt, sieht aber dunkel oder unrealistisch aus
Überprüfen Sie, ob environment_map.hdr eine gültige HDR-Datei und nicht beschädigt ist.
Passen Sie base_material_metalness und base_material_roughness in config.json an. Ein Metalness-Wert von 0,0–0,3 und Roughness von 0,5–0,9 funktioniert für die meisten nicht-metallischen Produkte.
Probieren Sie eine andere HDR-Umgebungskarte aus.
Konsolenfehler: „Failed to load model"
Die FBX-Datei ist möglicherweise beschädigt oder im ASCII-Format. Exportieren Sie erneut als binäres FBX.
Der Dateipfad könnte falsch sein. Überprüfen Sie, ob die URL des Modellordners im Browser zugänglich ist.
