3D-Produktvisualisierung, die man anfassen kann.
Renderings zeigen ein Produkt so, wie der Fotograf es wollte. Eine interaktive 3D-Produktvisualisierung zeigt es so, wie der Kunde es sehen will: von unten, von innen, in seiner Farbe, in seinem Raum. Direkt auf deiner Website — und danach im Vertrieb, auf der Messe und in der Schulung.
3D-Produktvisualisierung bedeutet, ein Produkt als dreidimensionales Modell darzustellen. Es gibt zwei Formen: statische Renderings — fotorealistische Bilder und Videos aus einem 3D-Programm — und interaktive Visualisierungen, bei denen Besucher das Modell im Browser selbst drehen, zerlegen oder konfigurieren. Ich baue die interaktive Form, auf Basis von Three.js.
Rendering oder interaktiv?
| Rendering / Video | Interaktive Visualisierung | |
|---|---|---|
| Realismus | Maximal fotorealistisch | Sehr gut, selten ganz fotorealistisch |
| Blickwinkel | Vom Ersteller festgelegt | Frei durch den Nutzer |
| Varianten | Je Variante neues Bild | Per Klick |
| Innenleben | Nur in vorbereiteten Ansichten | Zerlegen, schneiden, ausblenden |
| Einsatz | Katalog, Anzeige, Social Media | Website, Shop, Vertrieb, Messe |
| Nutzer | Schaut an | Probiert aus |
Beides hat seinen Platz, und viele Unternehmen nutzen beides — oft aus demselben Modell. Für die Website ist der entscheidende Unterschied: Ein Bild wird angesehen, ein Modell wird benutzt. Wer ein Produkt selbst gedreht, geöffnet oder konfiguriert hat, hat eine konkretere Vorstellung und fragt eher an.
Sechs Formen der Visualisierung.
Produkt-Viewer
Drehen und zoomen auf der Produktseite, optional mit Hotspots. Der schlanke Einstieg. → 3D-Produktansicht im Shop
Konfigurator
Farbe, Material, Maße und Zubehör wählen — mit Live-Preis und Übergabe an Anfrage oder Warenkorb. → 3D-Konfigurator
Explosionsansicht
Das Produkt fährt auseinander, jedes Bauteil wird erklärt. → Explosionszeichnung
Schnittansicht
Das Gehäuse wird transparent oder aufgeschnitten, das Innenleben sichtbar — für Technik, Geräte und Medizinprodukte.
AR-Ansicht
Das Produkt per Smartphone-Kamera in Originalgröße im eigenen Raum. → AR auf der Website
Scroll-Story
Beim Scrollen entsteht das Produkt Schicht für Schicht, Funktionen werden nacheinander erklärt. → 3D-Scroll-Animation
Einmal bauen, überall nutzen.
Eine browserbasierte Visualisierung ist kein Einmalprojekt für die Website. Dasselbe Modell und dieselbe Anwendung laufen:
- auf der Website und im Shop als Produktseite,
- im Außendienst auf dem Tablet — auch ohne Muster im Kofferraum,
- auf der Messe am Touchscreen (3D-Messepräsentation),
- in Schulung und Service zur Erklärung von Aufbau und Wartung,
- als Quelle für Renderings, Produktbilder und Social-Media-Videos.
Die Kosten verteilen sich damit auf viele Einsätze statt auf eine einzelne Seite.
Woher das Modell kommt.
- CAD-Daten: präzise, aber für den Browser viel zu detailliert. Sie werden vereinfacht, unsichtbare Innenteile entfernt, Materialien neu angelegt. Vertrauliche Konstruktionsdetails verlassen dabei nicht das Modell im Browser, wenn sie vorher entfernt werden.
- Modellierung in Blender: wenn keine Daten vorliegen oder das Produkt stilisiert gezeigt werden soll (Export fürs Web).
- Prozedural im Code: bei Produkten mit stufenlosen Maßen oder sehr vielen Varianten. Beim Treppen-Konfigurator wird die Treppe bei jeder Änderung Stufe für Stufe neu berechnet.
- 3D-Scan: schnell realistisch, aber große, unordentliche Daten, die aufwendig reduziert werden müssen.
Wie realistisch es aussieht.
Die ehrliche Antwort: sehr gut, aber selten ununterscheidbar von einem Foto. Harte Oberflächen — Metall, Kunststoff, lackiertes Holz, Glas — gelingen hervorragend. Schwierig sind Stoffe mit Flor, Haare, Lebensmittel und sehr feine Transparenzen. Die Qualität hängt vor allem von drei Dingen ab: saubere Materialien mit echten Texturen, gut gewählte Lichtstimmung über eine Umgebungskarte und vorberechnete Schatten. Wichtiger als letzte Fotorealistik ist ohnehin, dass die Visualisierung auf dem Smartphone flüssig läuft.
Für welche Produkte es sich lohnt.
- Erklärungsbedürftige Produkte, deren Vorteile im Inneren liegen
- Konfigurierbare Produkte mit vielen Varianten oder Maßen
- Hochpreisige Produkte, bei denen Vertrauen vor der Anfrage entstehen muss
- Produkte, die zu groß, zu teuer oder noch nicht produziert sind
- Produkte, bei denen die Frage „Passt das in meinen Raum?“ entscheidet
Für ein selbsterklärendes Produkt mit wenigen Varianten reichen gute Fotos. Das sage ich dir, bevor du Geld ausgibst.
Ablauf.
- Erstgespräch: Produkt, Ziel, Einsatzorte, vorhandene Daten.
- Konzept: Form der Visualisierung, Interaktionen, Texte, Abschluss — daraus ein Festpreisangebot.
- Modell: aus CAD, Blender oder prozedural, optimiert fürs Web.
- Entwicklung mit Testlink zum Ausprobieren auf eigenen Geräten.
- Einbindung in Website oder Shop, mit Textfundament für Google.
- Übergabe von Code und Modell, optional Versionen für Messe und Vertrieb.
Kosten.
| Form | Orientierung |
|---|---|
| Produkt-Viewer mit Hotspots | ab ~2.500 € |
| Einfacher Konfigurator | ab ~4.000 € |
| Konfigurator, Explosions- oder Schnittansicht | meist 6.000–15.000 € |
| Mehrere Produktfamilien, Systemanbindung | ab 15.000 € |
Orientierungswerte, keine Fixpreise. Den größten Einfluss haben Zustand der Modelldaten und Umfang der Interaktion. Details: 3D-Konfigurator Kosten.
Die gezeigten Demos stammen aus meiner eigenen Arbeit. Die Markennamen sind überwiegend erfundene Showcases — die Technik ist echt und läuft live im Browser.
Nicht glauben — ausprobieren.
Alle Demos laufen live im Browser, auch auf dem Smartphone.
Treppen-Konfigurator
Gerade, gewendelt oder Spindel – nach DIN 18065 gerechnet und Stufe für Stufe im Haus-Schnitt gezeigt.
Ausprobieren ↗
Verpackungsmaschine FX-40
Scroll-Tour durch acht Stationen, Prozess in Zeitlupe, Explosionsansicht und Konfigurator mit Live-Datenblatt.
Ausprobieren ↗
Sauna-Konfigurator
Innensauna, Gartensauna oder Fass – der Rechenkern legt den Ofen aus und prüft Baurecht aller 16 Bundesländer.
Ausprobieren ↗FAQ — 3D-Produktvisualisierung.
Was ist 3D-Produktvisualisierung?
Die Darstellung eines Produkts als dreidimensionales Modell. Sie kann als statisches, fotorealistisches Rendering entstehen oder als interaktive Anwendung im Browser, bei der Besucher das Produkt selbst drehen, zerlegen, konfigurieren oder per AR in den eigenen Raum stellen.
Was ist besser: Rendering oder interaktives 3D?
Beides hat seinen Einsatzzweck. Renderings sind maximal fotorealistisch und ideal für Katalog und Werbung, zeigen aber festgelegte Blickwinkel. Interaktives 3D beantwortet Fragen zu Rückseite, Innenleben und Varianten und eignet sich besonders für Website, Shop, Vertrieb und Messe. Oft entstehen beide aus demselben Modell.
Brauche ich CAD-Daten für eine 3D-Produktvisualisierung?
Nein, sie senken aber den Aufwand. Vorhandene Daten werden für den Browser vereinfacht, vertrauliche Details können dabei entfernt werden. Ohne CAD-Daten entsteht das Modell in Blender, prozedural im Code oder aus einem 3D-Scan.
Sieht eine interaktive Visualisierung so gut aus wie ein Foto?
Harte Oberflächen wie Metall, Kunststoff, Holz und Glas gelingen hervorragend. Stoffe mit Flor, Haare und Lebensmittel sind schwieriger und selten ganz fotorealistisch. Wichtiger ist, dass die Visualisierung flüssig auf dem Smartphone läuft.
Wo kann ich die Visualisierung einsetzen?
Eine browserbasierte Visualisierung läuft auf Website und Shop, im Außendienst auf dem Tablet, auf der Messe am Touchscreen, in Schulung und Service und kann als Quelle für Produktbilder und Videos dienen.
Was kostet eine interaktive 3D-Produktvisualisierung?
Ein Produkt-Viewer beginnt bei etwa 2.500 Euro, ein einfacher Konfigurator bei etwa 4.000 Euro. Konfiguratoren, Explosions- und Schnittansichten liegen meist zwischen 6.000 und 15.000 Euro. Diese Zahlen sind Orientierung und keine Fixpreise.
Manuel Killert · Webentwickler & DozentErzähl mir, was du zeigen willst.
Ich sage dir ehrlich, ob sich 3D für dein Vorhaben lohnt — und wenn nicht, was stattdessen mehr bringt.
Antwort meist innerhalb von 24 Stunden · hallo@manuelkillert.de