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.
Best Practices für 3D Visualization zur Conversion-Optimierung | Chamevo Support Center
Best Practices für 3D Visualization zur Conversion-Optimierung
Optimieren Sie Ihre 3D-Produktvorschauen für schnelleres Laden, besseres Kundenerlebnis und höhere Conversion-Raten.
Aktualisiert am 28. April 20265 Min. Lesezeit
3D Visualization kann die Conversion-Rate um bis zu 30 % steigern – aber nur, wenn das Erlebnis schnell, intuitiv und wirklich wertvoll ist. Eine langsam ladende, schlecht konfigurierte 3D-Vorschau schadet mehr als sie nützt. Diese Anleitung enthält praktische Techniken, um das Beste aus 3D-Produktvorschauen herauszuholen.
Modelloptimierung
Dateigrößen klein halten
Jedes Kilobyte Modelldaten erhöht die initiale Ladezeit. Kunden mit mobilen Verbindungen bemerken Verzögerungen über 2–3 Sekunden.
Auflösung 512 × 512 oder 1024 × 1024. Als PNG komprimieren
Modellordner gesamt
Unter 4 MB
Kombiniertes Ziel für schnelles Laden auf Mobilgeräten
Polygon-Anzahl ohne Qualitätsverlust reduzieren
Die meisten Produktformen lassen sich mit 5.000–15.000 Polygonen darstellen. Eine Kaffeetasse braucht keine 50.000 Polygone – die zusätzliche Geometrie ist bei Produktvorschauen unsichtbar, verdoppelt aber die Ladezeit.
Verwenden Sie in Blender den Decimate-Modifier, um Polygone zu reduzieren. Setzen Sie ein Verhältnis (z. B. 0,5) und prüfen Sie, ob die Form noch glatt aussieht. Aktivieren Sie Smooth Shading, damit Modelle mit weniger Polygonen gerundet wirken.
Löschen Sie jede Geometrie, die Kunden nie sehen werden:
Innenflächen (Innenseite einer Tasse, Innenseite einer Box).
Bodenflächen, die aus dem Standard-Kamerawinkel immer verdeckt sind.
Konstruktionsgeometrie oder Hilfsobjekte aus dem Modellierungsprozess.
Jedes versteckte Polygon kostet trotzdem GPU-Zeit und Dateigröße.
Druckbereich-Einrichtung
Seitenverhältnisse exakt abgleichen
Das häufigste visuelle Problem bei 3D-Vorschauen ist Designverzerrung durch nicht übereinstimmende Seitenverhältnisse zwischen dem Canvas-Druckbereich und dem Druckbereich des Modells.
Vor dem Start eines Produkts mit 3D-Vorschau:
Notieren Sie das Seitenverhältnis des Modell-Druckbereichs aus config.json (z. B. 800 × 600 = 4:3).
Setzen Sie den Canvas-Druckbereich auf dasselbe Verhältnis (z. B. 1200 × 900, 800 × 600 oder beliebige 4:3-Abmessungen).
Zeigen Sie das Produkt in der Vorschau an und fügen Sie ein Testdesign mit geraden horizontalen und vertikalen Linien hinzu. Wenn Linien auf dem 3D-Modell gebogen oder gestreckt erscheinen, stimmen die Verhältnisse nicht überein.
Höhere Druckbereich-Auflösung für scharfe Texturen verwenden
Die print_area-Abmessungen in config.json steuern die Texturauflösung auf dem 3D-Modell. Höhere Werte erzeugen schärfere Designs auf Kosten des GPU-Speichers.
Produkttyp
Empfohlene print_area
Warum
Tassen, Flaschen (kleine sichtbare Fläche)
800 × 600
Kleine Fläche – moderate Auflösung reicht
T-Shirts, Bekleidung (große sichtbare Fläche)
1200 × 1600
Große Fläche benötigt mehr Pixel, um Unschärfe zu vermeiden
Handyhüllen (detailreiche Designs)
1000 × 1800
Kunden zoomen bei detailreichen Produkten heran
Platzierungsstrategie
Platzierung zum Produkttyp passend wählen
Die Platzierung beeinflusst, wie prominent die 3D-Vorschau im Kauferlebnis ist.
Produkttyp
Beste Platzierung
Begründung
Produkte mit markanter Form (Tassen, Flaschen, Helme)
Im Product Designer (Panel) oder Vor dem Product Designer
Die Form IST das Produkt – zeigen Sie sie prominent
Flache Produkte (T-Shirts, Poster, Karten)
Im Product Designer (Overlay)
Das Design steht im Vordergrund, nicht die Form. 3D gibt Kontext, sollte aber nicht dominieren
Produkte, die durch Form + Design verkauft werden (Handyhüllen, Schuhe)
Im Product Designer (Panel)
Sowohl Design als auch 3D-Form sind wichtig. Zeigen Sie sie nebeneinander
Desktop vs. Mobilgeräte
Auf dem Desktop bietet die Panel-Platzierung eine effektive geteilte Ansicht – Canvas auf einer Seite, 3D-Modell auf der anderen. Auf Mobilgeräten stapelt sich dasselbe Panel-Layout vertikal und schiebt Canvas und 3D-Vorschau in schmale Bereiche.
Für Shops mit über 70 % mobilem Traffic empfiehlt sich die Overlay-Platzierung. Sie gibt dem Canvas die volle Bildschirmbreite und lässt Kunden die 3D-Vorschau bei Bedarf aufklappen.
Materialeinstellungen
Metalness und Roughness präzise einstellen
Diese beiden config.json-Werte steuern, wie die Produktoberfläche aussieht:
Material
Metalness
Roughness
Beispiel
Mattes Keramik (Tassen)
0,0–0,1
0,7–0,9
Kaffeetasse, Blumentopf
Glänzender Kunststoff (Handyhüllen)
0,0–0,1
0,2–0,4
Handyhülle, harte Kunststoffflasche
Metall (Wasserflaschen, Tumblers)
0,7–1,0
0,2–0,5
Edelstahlflasche, Aludose
Stoff (T-Shirts, Taschen)
0,0
0,9–1,0
T-Shirt, Tragetasche, Mütze
Die richtigen Werte machen den Unterschied zwischen einer überzeugenden Produktvorschau und einem plastisch wirkenden Mockup. Testen Sie zunächst mit einer neutralen grauen Materialfarbe (Dezimal: 13421772 für #CCCCCC), um den Metalness/Roughness-Effekt zu isolieren, und wechseln Sie dann zur tatsächlichen Produktfarbe.
Die richtige Umgebungskarte wählen
Die HDR-Umgebungskarte bestimmt Beleuchtung und Reflexionen auf Ihrem Produkt. Die falsche Umgebung lässt Produkte künstlich wirken.
Umgebungstyp
Ideal für
Neutrales Studio (weiches, gleichmäßiges Licht)
Die meisten Produkte. Sichere Standardwahl
Helles Außenlicht
Produkte, die von natürlichem Licht profitieren (Sportbekleidung, Outdoor-Ausrüstung)
Metallische Produkte, bei denen starke Reflexionen das Material hervorheben
Vermeiden Sie komplexe Umgebungen (Stadtstraßen, Landschaften) für Produktvorschauen – die Reflexionen lenken vom Produkt selbst ab.
Farbverknüpfung für interaktive Produkte
Wenn Ihr Produkt Teile hat, die Kunden nach Farbe personalisieren können (Schuhpanele, Hutsektionen, Hüllenränder), verwenden Sie Color Link 3D Layer, um Canvas-Farbelelmente mit 3D-Modell-Meshes zu verbinden.
Farbverknüpfung einrichten
Geben Sie in Ihrem 3D-Modell jedem farbbaren Teil einen eindeutigen Mesh-Namen (z. B. upper, sole, laces).
Wählen Sie im Product Builder ein Designelement, das eine Farbauswahl steuert.
Setzen Sie in den Elementeigenschaften das Feld Color Link 3D Layer auf den entsprechenden Mesh-Namen.
Wenn der Kunde die Farbe dieses Elements ändert, wird der 3D-Modellteil entsprechend aktualisiert.
Dies schafft eine direkte visuelle Rückkopplungsschleife: Der Kunde wählt eine Farbe, und das 3D-Modell spiegelt die Änderung sofort wider. Bei Produkten wie benutzerdefinierten Schuhen oder mehrfarbigen Accessoires steigert dies das Engagement erheblich.
Performance-Tipps
Auf echten Mobilgeräten vorab testen
Die 3D-Vorschau rendert mit WebGL, dessen Performance auf verschiedenen Geräten variiert. Vor dem Launch:
Testen Sie auf einem Android-Mittelklasse-Smartphone (die häufigste Geräteklasse bei Kunden).
Testen Sie auf einem 2–3 Jahre alten iPhone.
Prüfen Sie, ob das Modell bei einer 4G-Verbindung innerhalb von 3 Sekunden lädt.
Überprüfen Sie eine flüssige Rotation (mindestens 30 Bilder pro Sekunde).
Wenn die Performance schlecht ist, reduzieren Sie die Polygon-Anzahl des Modells und die HDR-Auflösung.
Auto-Rotation sparsam einsetzen
Auto-Rotation lässt das Modell kontinuierlich rotieren. Obwohl es Aufmerksamkeit erzeugt, kann es Kunden nerven, die einen bestimmten Winkel inspizieren wollen. Kunden bevorzugen es tendenziell, die Rotation selbst zu kontrollieren.
Wenn Sie Auto-Rotation aktivieren, stoppt die Rotation, sobald der Kunde mit dem Modell interagiert – sie dient also als initialer Blickfang.
Auswirkung auf die Seitenladezeit überwachen
Verwenden Sie den Netzwerk-Tab Ihres Browsers, um die gesamte Übertragungsgröße beim Laden einer 3D-Produktseite zu prüfen. Wenn die Modelldateien die Gesamtseitenlast über 10 MB treiben, optimieren Sie die Modelle:
FBX mit weniger Polygonen komprimieren.
HDR auf 1024 × 512 verkleinern.
Nicht benötigte Normal Maps entfernen.
Häufige Fehler
Dasselbe Modell für unterschiedlich geformte Produkte verwenden
Ein Tassenmodell für einen Tumbler wirkt falsch – die Proportionen stimmen nicht. Jede eigenständige Produktform benötigt ihr eigenes 3D-Modell. Dehnen Sie kein Modell für mehrere Produkte.
Mobile Nutzer ignorieren
Eine 3D-Vorschau, die auf einem Desktop-Monitor toll aussieht, aber auf einem Smartphone ruckelt, kostet Sie Verkäufe. Mobile ist, wo die meisten Ihrer Kunden sind. Testen und optimieren Sie zuerst für Mobile.
Zu komplizierte Modelle
Modelle mit über 100.000 Polygonen, mehreren 4K-Texturen und komplexen Materialien sehen in einem 3D-Portfolio beeindruckend aus, sind aber für Web-Produktvorschauen ungeeignet. Kunden wollen schnelle, funktionale Vorschauen – keine kinematischen Renderings.
Druckbereich-Verhältnis nicht abgleichen
Verzerrte Designs untergraben den gesamten Zweck der 3D-Vorschau. Überprüfen Sie immer, ob das Canvas-Druckbereich-Verhältnis mit dem Modell-Druckbereich-Verhältnis übereinstimmt, bevor Sie ein Produkt starten.
