Technik · 3D-Konfigurator
Echtes 3D statt Bildfolge: so funktioniert unser Konfigurator
Bei Surprise for Business gestalten Firmen ihre Werbeartikel an einem echten 3D-Modell im Browser. Das Logo liegt live auf der Oberfläche, und aus demselben Modell entsteht die Druckfreigabe. Diese Seite erklärt die Technik und ordnet ein, wo sie im Markt steht.
Auf einen Blick
- WebGL im BrowserLäuft ohne App und ohne Plug-in auf Computer, Tablet und Handy (three.js).
- 8'500–33'000 Dreieckepro Artikel: echte 3D-Modelle, komprimiert auf 0.2 bis 2.3 MB.
- Logo auf der FlächeDas hochgeladene Motiv liegt über Texturkoordinaten (UV) auf dem Modell und folgt seiner Form.
- PBR-MaterialienKunststoff, Metall, eloxiertes Aluminium und Gewebe reagieren beim Drehen auf das Licht.
- Freigabe aus dem ModellJede bedruckte Fläche frontal, mit Lage und Grösse des Motivs in Zentimetern.
- Ein AblaufGestalten, freigeben, bestellen und bezahlen (Karte, TWINT, QR-Rechnung) ohne Medienbruch.
Echtes 3D und 360°-Ansicht: der Unterschied
Im Online-Handel heisst vieles «3D», das keines ist. Zwei Verfahren muss man auseinanderhalten:
360°-Ansicht (Bildfolge)
Ein Artikel wird aus meist 24 bis 72 Blickwinkeln fotografiert oder vorgerendert. Beim Ziehen zeigt die Seite diese Bilder nacheinander. Der Artikel dreht sich nur um eine feste Achse; Ober- und Unterseite, Kippen oder Heranzoomen gibt es nur, wenn dafür eigene Bilder gemacht wurden. Ein Kundenlogo wird meist als flaches Bild über das Foto gelegt oder perspektivisch verzerrt.
Echtzeit-3D (unser Konfigurator)
Der Browser lädt ein Modell aus Dreiecken in die Grafikkarte und berechnet jedes Bild neu, rund 60 Mal pro Sekunde. Man dreht den Artikel rundum, kippt ihn (bei den meisten Artikeln bis fast senkrecht von oben und unten), zoomt heran, und Licht und Spiegelungen wandern mit. Farbe und Logo sind keine Bilder, sondern Eigenschaften des Modells: Ein Farbwechsel oder ein neues Logo ist sofort auf jeder Seite des Artikels sichtbar.
Woher die 3D-Modelle kommen
Alle 3D-Modelle stammen aus unserer eigenen Produktion. Wir bauen sie nach den Originalartikeln und ihren Massen und gliedern sie in ihre Teile, beim Feuerzeug etwa Gehäuse, Kappe und Reibrad, bei der Fahrradklingel Ring, Schelle und Hebel. So lässt sich jedes Teil einzeln einfärben, und jedes Material verhält sich im Licht wie am echten Artikel.
Die Modelle sind für das Web aufbereitet: so wenige Dreiecke wie nötig, Geometrie komprimiert (glTF mit KHR_mesh_quantization). Bevor das 3D geladen ist, zeigt die Seite ein Standbild, das aus demselben Modell gerendert wurde.
Ausprobieren lässt sich das an jedem Artikel: Hultafors Schwedenmeter mit Logo, BIC Feuerzeuge bedrucken, PP-Tragetaschen mit Logo, Mini-Fender Schlüsselanhänger und Fahrradklingel mit Lasergravur.
Wie das Logo auf den Artikel kommt
- Hochladen: SVG, PDF, AI, EPS, JPG oder PNG. Der Shop stellt das Motiv frei und vektorisiert es auf Wunsch.
- Auf die Druckfläche: Jede bedruckbare Fläche hat eine eigene Druckleinwand. Sie liegt über Texturkoordinaten (UV-Mapping) auf der Oberfläche des Modells, deshalb folgt das Logo der Wölbung eines Feuerzeugs oder dem Ring einer Klingel. Lage, Grösse und Drehung lassen sich verschieben, und die Vorschau zeigt das Ergebnis sofort am Artikel.
- Farben: Druckfarben werden als Pantone-Farben gewählt. Bei der Klingel wird gelasert statt gedruckt: Die Gravur erscheint so, wie sie tatsächlich wird, als blankes Aluminium.
- Mehrere Flächen: Feuerzeuge haben Vorder- und Rückseite, PP-Tragetaschen fünf Flächen. Jede wird einzeln gestaltet und einzeln freigegeben.
Licht und Material
Die Materialien sind physikalisch basiert (PBR): Rauheit, Metallanteil und eine Klarlackschicht bestimmen, wie eine Oberfläche Licht zurückwirft. Eine Studio-Umgebung liefert die Spiegelungen, mehrere Lichtquellen und weiche Schatten die Form. Matter Kunststoff, glänzendes Metall und eloxiertes Aluminium sehen deshalb unterschiedlich aus und verändern sich beim Drehen.
Wichtig: Jeder Bildschirm zeigt Farben etwas anders. Die 3D-Vorschau zeigt Form, Lage, Grösse und Farbeindruck, verbindlich für den Druck ist die gewählte Pantone-Farbe.
Von der Vorschau zur Druckfreigabe
Klassisch entsteht ein «Gut zum Druck» so: Eine Grafikerin baut ein Muster in einem Bildprogramm, schickt es per E-Mail, der Kunde korrigiert, das Muster geht erneut hin und her. Bei uns entsteht die Druckfreigabe direkt aus dem 3D-Modell: Für jede bedruckte Fläche rendert der Shop eine frontale Ansicht und schreibt Datei, Farbzahl, Lage und Grösse des Motivs in Zentimetern dazu. Der Kunde gibt sie digital frei und bestellt im selben Ablauf.
Das verkürzt die Abstimmung deutlich, ersetzt aber nicht die Sorgfalt: Jede Freigabe wird vor der Produktion zusätzlich von Hand geprüft, ohne Aufpreis.
Vergleich
| Merkmal | 360°-Ansicht (Bildfolge) | Echtzeit-3D bei Surprise for Business |
|---|---|---|
| Drehen | Um eine feste Achse, so viele Stufen wie Bilder | Rundum und stufenlos, kippen und zoomen |
| Logo | Flaches Bild über dem Foto oder perspektivisch verzerrt | Auf der Oberfläche des Modells (UV-Mapping), auf jeder Fläche |
| Licht und Material | Im Foto festgehalten | Live berechnet (PBR), Glanzlichter wandern mit |
| Farbvarianten | Je Farbe eine eigene Bildfolge | Ein Modell, Farbe wird live umgestellt |
| Datenmenge | Dutzende Bilder je Ansicht und Farbe | Ein Modell mit 0.2 bis 2.3 MB, einmal geladen |
| Druckfreigabe | Meist separat erstellt und per E-Mail abgestimmt | Aus dem Modell erzeugt, digital freigegeben, im selben Ablauf bestellt |
Wo das im Markt steht
Wir haben im Oktober 2026 Schweizer und europäische Anbieter angesehen. Das Ergebnis, so ehrlich wie möglich:
- Die meisten Schweizer Werbeartikel-Shops zeigen das Logo auf Produktfotos, entweder flach darübergelegt oder perspektivisch verzerrt. Einige bieten 2D-Konfiguratoren oder vorgerenderte Ansichten.
- Einzelne Markenhersteller, etwa bei Taschenmessern und Schreibgeräten, zeigen ihre eigenen Produkte bereits in interaktivem 3D mit Logo. In Europa verkaufen zudem Softwarefirmen solche 3D-Vorschauen an Händler.
- Einen Schweizer Werbeartikel-Shop mit Artikeln mehrerer Marken, der Echtzeit-3D mit Live-Logo direkt mit Bestellung und automatisch erzeugter Druckfreigabe verbindet, haben wir dabei nicht gefunden.
Häufige Fragen
Braucht der 3D-Konfigurator eine App oder ein Plug-in?
Nein. Er läuft in jedem aktuellen Browser auf Computer, Tablet und Handy. Die 3D-Darstellung nutzt WebGL, das in alle gängigen Browser eingebaut ist.
Was ist der Unterschied zwischen echtem 3D und einer 360°-Ansicht?
Eine 360°-Ansicht ist eine Folge von meist 24 bis 72 Fotos oder Bildern; der Artikel dreht sich nur um eine feste Achse, und ein Logo liegt meist als flaches Bild darüber. Echtes 3D ist ein Modell aus Dreiecken: man dreht es rundum, kippt und zoomt, und das Logo liegt auf der gewölbten Oberfläche.
Sind die Farben auf dem Bildschirm verbindlich?
Nein. Jeder Bildschirm zeigt Farben etwas anders. Verbindlich ist die gewählte Pantone-Farbe; die 3D-Vorschau zeigt Form, Lage und Grösse des Logos sowie den Farbeindruck.
Wie genau ist die Lage des Logos?
Die Druckfreigabe nennt für jede bedruckte Fläche die Lage und Grösse des Motivs in Zentimetern. Vor der Produktion prüft zusätzlich ein Mensch jede Freigabe, ohne Aufpreis.
Was passiert, wenn ein Gerät kein 3D darstellen kann?
Dann zeigt die Seite Standbilder, die aus denselben 3D-Modellen gerendert sind, und man kann trotzdem gestalten und bestellen.
Stand: 11. Oktober 2026 · Surprise for Business, Bottighofen