Aus CAD-Daten zum Web-3D-Modell: STEP, GLB und was dabei verloren geht

CAD-Daten sind für einen Web-3D-Konfigurator der beste Ausgangspunkt, aber nicht das fertige Produkt. Eine STEP-Datei beschreibt ein Bauteil so, dass man es fertigen kann: exakte Flächen, Toleranzen, oft jede Schraube und jedes Innenteil. Ein Browser braucht etwas anderes: ein leichtes Netz aus Dreiecken, Materialien, die gut aussehen, und nur die Teile, die der Kunde sehen soll. Der Weg von CAD zu WebGL ist deshalb eine Übersetzung, bei der bewusst etwas wegfällt.

Dieser Ratgeber erklärt, welche CAD-Daten wir für ein Web-3D-Projekt brauchen, wie die Pipeline von STEP zu GLB aussieht, wie vertrauliche Konstruktionsdetails geschützt bleiben und was Sie tun können, wenn es gar keine CAD-Daten gibt.

Welche CAD-Formate eignen sich?

Am wertvollsten ist dabei nicht das exotischste Format, sondern eine saubere Baugruppenstruktur. Wenn Deckel, Welle und Gehäuse als eigene, benannte Teile ankommen, lassen sich später eine Explosionsansicht, Varianten und Hinweise viel einfacher bauen.

Die Pipeline: von STEP zu GLB in sechs Schritten

Das Zielformat ist fast immer GLB, die binäre Form von glTF. glTF ist der offene Khronos-Standard für die effiziente Übertragung und das Laden von 3D-Szenen und seit 2022 als ISO/IEC 12113:2022 genormt ^[1]. Der Weg dorthin sieht so aus:

1. Sichten und ausdünnen

Zuerst klären wir, welche Teile der Kunde im Browser sehen muss. Von den Einzelteilen einer Maschine ist oft nur ein kleiner Teil außen sichtbar oder für die Erklärung wichtig. Schrauben im Inneren, Kabelbäume, Gewinde, Bohrungen hinter Abdeckungen: Was niemand sieht, kommt nicht ins Web-Modell. Das macht die Datei leichter und schützt gleichzeitig Ihr Know-how (dazu unten mehr).

2. Tessellierung: aus Flächen werden Dreiecke

CAD-Systeme rechnen mit exakten mathematischen Flächen (B-Rep, NURBS). Grafikkarten zeichnen nur Dreiecke. Bei der Tessellierung werden die Flächen in Dreiecke zerlegt, mit einer einstellbaren Toleranz: Wie weit darf das Netz von der echten Fläche abweichen? Eine zu grobe Toleranz macht runde Teile eckig, eine zu feine erzeugt Millionen Dreiecke. Gute Werte hängen von der Bauteilgröße ab; eine Ringschiene braucht eine andere Auflösung als ein Hallenrahmen.

3. Reduktion und Aufräumen

Nach der Tessellierung ist das Netz meist noch zu schwer. Dezimierung reduziert Dreiecke dort, wo man es nicht sieht (große ebene Flächen), und lässt sie, wo die Form lebt (Kanten, Radien). Dazu kommen typische Reparaturen: doppelte Flächen, falsch herum zeigende Normalen, winzige Spalte zwischen Teilen, die im Licht flackern. Harte Kanten und weiche Rundungen brauchen eigene Normalen, sonst wirkt ein gefrästes Aluminiumteil wie Knetmasse.

4. Materialien und UV-Koordinaten

CAD-Dateien tragen höchstens eine Farbe pro Teil. Für den Browser braucht jedes sichtbare Material physikalisch plausible Werte: Metall oder nicht, Rauheit, Farbe, bei Glas Transparenz. glTF bringt dafür ein PBR-Materialmodell mit, das in allen gängigen Viewern gleich aussieht ^[1]. Sollen Oberflächen wie gebürstetes Metall, Holz, Stoff oder ein Logo erscheinen, brauchen die Teile UV-Koordinaten, also eine Abwicklung, auf der eine Textur liegt. CAD-Exporte haben selten brauchbare UVs; die entstehen in diesem Schritt, zum Beispiel in Blender.

5. Struktur für Interaktion

Damit ein Konfigurator Teile tauschen, ein- und ausblenden oder auseinanderziehen kann, brauchen sie sinnvolle Namen, Drehpunkte und eine Hierarchie. Wir bauen das Modell so auf, dass die Logik im Browser später „Deckel“, „Welle“ oder „Modul links“ direkt ansprechen kann. Bei unseren eigenen Demos laufen diese Schritte über Blender-Skripte, die das GLB reproduzierbar erzeugen – ändert sich ein Maß, wird das Modell neu gebaut statt von Hand nachgebessert.

6. Komprimieren und prüfen

Zum Schluss wird das GLB komprimiert. Verbreitet sind Draco (KHR_draco_mesh_compression) ^[2] und Meshopt (EXT_meshopt_compression) ^[3]. Meshopt ist auf schnelles Dekodieren ausgelegt und arbeitet gut mit quantisierten Vertex-Daten zusammen (KHR_mesh_quantization) ^[3]. Für die meisten unserer Demos nutzen wir gltfpack mit Meshopt und Quantisierung ^[4]; die fertigen GLB-Dateien liegen zwischen etwa 0,35 und 1,6 MB. Im Browser lädt three.js solche Dateien mit dem GLTFLoader und einem Meshopt-Decoder ^[5]. Danach folgt die Sichtprüfung: Stimmen Maße und Proportionen? Flackert etwas? Läuft die Ansicht auch mit gedrosselter CPU flüssig? Ob sie auf Ihren Zielgeräten flüssig läuft, prüfen Sie im Projekt über einen privaten Link auf Ihren eigenen Geräten.

Eigene Demo · fiktives Produkt

Stirnradgetriebe

Ein Lehrbuch-Getriebe für Vertrieb und Schulung: Deckel transparent, Explosion, laufender Antrieb mit Übersetzung.

In 3D ansehen →

Was dabei verloren geht – und was nicht

Bewusst verloren gehen: exakte Flächen (das Web-Modell ist eine Annäherung), Toleranzen, Konstruktionshistorie, Parameter, verdeckte Innenteile und oft Gewinde oder kleine Fasen. Das Web-Modell ist keine Fertigungsgrundlage und auch kein CAD-Export für Ihre Kunden. Wer im Konfigurator eine STEP-Datei der gewählten Variante zum Download braucht, braucht eine zusätzliche Anbindung an das CAD-System – das ist ein eigenes Thema, das wir je Projekt prüfen und nicht als Standard versprechen.

Erhalten bleiben: Maße und Proportionen, die sichtbare Form, die Baugruppenstruktur (wenn sie im CAD sauber ist), Teilenamen und auf Wunsch Artikelnummern als Daten am Bauteil. Das genügt für Vertrieb, Shop, Messe, Schulung und Service-Orientierung.

Vertrauliche Daten: Innenleben, Lizenzen und NDA

Konstruktionsdaten sind Betriebsgeheimnisse. Drei Punkte sollten vor dem Versand geklärt sein:

1. Was darf ins Web? Alles, was im Browser ankommt, kann ein technisch versierter Besucher herunterladen. Ein Web-Modell lässt sich nicht wirksam „verschlüsseln“. Der einzige zuverlässige Schutz ist, vertrauliche Teile gar nicht erst ins Web-Modell zu übernehmen: Innenleben weglassen, Details vereinfachen, Bohrbilder schließen. Für eine Explosionsansicht reicht oft eine vereinfachte, aber glaubwürdige Darstellung der inneren Teile.
2. Wem gehören die Daten? Kommen Bauteile von Zulieferern (Motoren, Lager, Normteile aus Herstellerkatalogen), gelten deren Nutzungsbedingungen. Nicht jedes Katalogmodell darf öffentlich im Web gezeigt werden. Das klären Sie oder wir vor dem Start.
3. Vertraulichkeit. Eine Vertraulichkeitsvereinbarung (NDA) können Sie vor dem Datenaustausch mit uns abschließen. Ihre Unterlagen und Zwischenstände sehen nur Sie, über private Links; Kundenarbeiten erscheinen in unserer Galerie nur mit ausdrücklicher Freigabe. Unsere öffentlichen Beispiele sind fiktive Produkte mit eigener Geometrie.

Eigene Demo · fiktives Produkt

Modulare Automationszelle

Eine fiktive Fertigungszelle mit Modulen, Roboter und Schutzkabine: Regeln, Aufstellung in der Halle, laufender Prozess und Stückliste mit Beispielpreis.

In 3D ansehen →

Was Sie uns schicken sollten

• STEP (oder IGES) der Baugruppe mit erhaltener Baugruppenstruktur, gern zusätzlich den nativen Export Ihres CAD-Systems.
• Eine Liste der sichtbaren Varianten: Größen, Farben, Optionen, welche Teile sich dabei ändern.
• Fotos oder Renderings des echten Produkts, vor allem für Oberflächen, Farben und Glanz.
• Farb- und Materialangaben: RAL- oder Herstellercodes, Oberflächen (eloxiert, pulverbeschichtet, gebürstet).
• Markierung des Vertraulichen: Was darf im Web auf keinen Fall zu sehen sein?
• Optional: Explosionszeichnung oder Montageanleitung, wenn eine Explosions- oder Aufbauansicht geplant ist.

Ohne CAD: Fotos und Maße reichen oft

Viele Produkte haben keine brauchbaren CAD-Daten: Textilien, Möbel aus der Werkstatt, ältere Produkte, deren Konstruktion nur auf Papier existiert. Dann bauen wir das Modell aus Fotos, Maßen und Zeichnungen neu auf. Dafür brauchen wir:

• Fotos von allen Seiten, möglichst mit wenig Perspektive (Teleobjektiv oder Abstand), plus Detailfotos von Kanten, Nähten, Beschlägen.
• Hauptmaße und die Maße der Teile, die sich in Varianten ändern.
• Material- und Farbmuster oder Referenzen.
• Wenn vorhanden: 2D-Zeichnungen (auch als DWG/DXF oder PDF).

Ein solches Modell ist kein exakter Nachbau jeder Toleranz, aber für eine 3D-Produktansicht oder einen 3D-Konfigurator oft genau richtig. Auch unsere eigenen Demos, etwa die Ohrhörer mit Ladecase, sind ohne Kunden-CAD entstanden: fiktive Produkte, aus eigenen Maßen modelliert.

Eigene Demo · fiktives Produkt

Ohrhörer mit Ladecase

Ein generisches Elektronikprodukt: Deckel öffnen, Bauteile auseinanderziehen, Funktionen am Modell erklären.

In 3D ansehen →

Schnellcheck: Sind Ihre Daten geeignet?

• Liegt eine Baugruppe vor, in der Teile einzeln und benannt sind?
• Lassen sich die Teile, die der Kunde sehen soll, klar von den inneren trennen?
• Sind die Varianten als Teile oder Parameter im CAD abgebildet, oder nur in einer Preisliste?
• Gibt es Zuliefer- oder Katalogteile mit eigenen Lizenzbedingungen?
• Gibt es Fotos oder Muster für die Oberflächen?

Je mehr Fragen Sie mit Ja beantworten, desto schneller geht die Umwandlung. Wir prüfen die Daten vor dem Start und sagen Ihnen ehrlich, ob der CAD-Weg oder der Neuaufbau aus Fotos sinnvoller ist. Mehr zu unseren Leistungen unter Leistungen: Aus CAD- und 3D-Daten. Wie das fertige Modell auf die Website kommt, erklärt der Ratgeber 3D-Modell in die Website einbinden; typische Einsätze in der Industrie zeigt Produktkonfigurator im Maschinenbau.

Häufige Fragen

Kann ich eine STEP-Datei direkt im Browser anzeigen?

Technisch gibt es Bibliotheken, die STEP im Browser tessellieren. Für eine öffentliche Produktseite ist das selten sinnvoll: Die Datei ist groß, enthält meist alle Innenteile und hat keine Materialien. Besser ist ein vorbereitetes GLB, das nur die sichtbaren Teile mit passenden Materialien enthält ^[1].

Wie viel kleiner wird ein Modell bei der Umwandlung?

Das hängt stark vom Ausgangsmodell ab, deshalb nennen wir keine pauschale Zahl. Der größte Effekt kommt meist nicht von der Kompression, sondern vom Weglassen unsichtbarer Teile und einer passenden Tessellierungstoleranz. Unsere fertigen Demo-Modelle liegen komprimiert bei etwa 0,35 bis 1,6 MB.

Können Kunden aus dem Konfigurator eine CAD-Datei herunterladen?

Nicht aus dem Web-Modell selbst, denn es ist ein vereinfachtes Netz ohne exakte Flächen. Ein CAD-Download der gewählten Variante braucht eine Anbindung an Ihr CAD- oder PDM-System. Das ist möglich, aber kein Standard und wird je Projekt bewertet.

Sind meine Konstruktionsdaten sicher?

Ihre Unterlagen sehen nur Sie, über private Links; auf Wunsch schließen wir vorab eine Vertraulichkeitsvereinbarung. Was ins Web geht, ist dagegen grundsätzlich herunterladbar. Deshalb entfernen wir vertrauliche Innenteile und Details vor der Veröffentlichung, statt sie zu „verstecken“.

Was, wenn ich keine CAD-Daten habe?

Dann bauen wir das Modell aus Fotos, Maßen und Zeichnungen neu auf. Für Produktansicht und Konfigurator reicht das in vielen Fällen; für eine detailgetreue Explosionsansicht sind Zeichnungen der Einzelteile hilfreich.

Quellen

1. Khronos Group: glTF – Runtime 3D Asset Delivery. https://www.khronos.org/gltf/
2. Khronos Group: KHR_draco_mesh_compression (glTF-Erweiterung). https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_draco_mesh_compression/README.md
3. Khronos Group: EXT_meshopt_compression (glTF-Erweiterung). https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Vendor/EXT_meshopt_compression/README.md
4. meshoptimizer: gltfpack. https://meshoptimizer.org/gltf/
5. three.js Dokumentation: GLTFLoader. https://threejs.org/docs/pages/GLTFLoader.html