So bringen Sie ein 3D-CAD-Modell auf Ihre Website: 4 Wege im Vergleich

Um ein 3D-CAD-Modell auf Ihre Website zu bringen, exportieren Sie die Baugruppe als STEP-Datei, wandeln sie in ein schlankes Anzeigemodell im Format glTF oder GLB um und zeigen dieses Modell in einem Web-Viewer auf Ihrer Produktseite. Ihre CAD-Datei selbst muss nie veröffentlicht werden: Der Browser lädt nur das Anzeigemodell herunter. Für Tutamens Kühlmittelverteiler ICM-21 mit 42 Teilen sind das 2,0 MB, erzeugt aus seiner STEP-Datei.

STEP ist das neutrale 3D-Format, das jedes gängige CAD-System exportieren kann (ISO 10303). glTF ist das offene Format für 3D im Web, von der Khronos Group, und GLB ist glTF in einer einzigen Datei. Die vier Wege vom einen zum anderen unterscheiden sich vor allem darin, was Ihre Kunden tun können, was Sie aus der Hand geben und wer das Ganze am Laufen hält.

Warum kann eine Website keine STEP-Datei direkt anzeigen?

Eine STEP-Datei beschreibt ein Produkt als exakte mathematische Flächen, ein Browser kann aber nur flache Dreiecke zeichnen. Jede Fläche muss zuerst mit kleinen Dreiecken bedeckt werden (den Polygonen, aus denen ein „Mesh“ besteht), ein Schritt namens Tessellierung. Mehr Dreiecke machen Rundungen glatter und die Datei größer, deshalb hört ein guter Konverter dort auf, wo Rundungen im Vollbild glatt aussehen.

Die Umwandlung entscheidet auch darüber, was die Seite kann. Ein gutes Anzeigemodell hält jedes Teil getrennt, benannt und mit einem Material versehen, sodass sich die Baugruppe in einer Explosionsdarstellung zerlegen und jedes Teil anklicken lässt. Wiederholte Teile speichert es nur einmal: Die Datei des ICM-21 enthält 214.168 Dreiecke, der Bildschirm zeichnet 654.948. Das Anzeigemodell enthält keinen Konstruktionsbaum, keine Skizzen und keine Parameter. Werte wie Masse und Volumen werden deshalb vorher am exakten CAD-Modell gemessen, und eine gute Seite weist darauf hin, dass bei Abweichungen das Datenblatt maßgeblich ist.

Das hat die Verarbeitungskette für die vier Live-Modelle von Proofscene ergeben, gemessen an den Dateien, die ihre Seiten laden:

Der Download ist das, worauf ein Besucher wartet; Seite und Viewer drumherum kommen mit etwa einem halben Megabyte hinzu. *STRAVIK, HALVORN und ARTIXO sind fiktive Marken, die Proofscene selbst modelliert hat, um weitere Branchen zu zeigen; der ICM-21 ist ein echtes Produkt von Tutamen, gebaut aus seiner STEP-Datei.

Welche vier Wege gibt es, ein CAD-Modell auf Ihre Website zu bringen?

Die vier Wege sind das Einbetten eines kostenlosen Online-Viewers, eine gehostete 3D-Plattform oder ein Konfigurator, eine selbst gebaute Seite auf Basis einer offenen Webkomponente wie Googles model-viewer und eine interaktive Produktseite, die für Sie aus den CAD-Daten gebaut wird. So schneiden sie bei den Fragen ab, die bei einem Industrieprodukt den Ausschlag geben:

Welcher Weg passt zu Ihrem Produkt?

Ein kostenloser Viewer eignet sich für einen schnellen Blick eines Kunden auf ein einzelnes Teil. Er ist der schnellste Weg und gibt am meisten aus der Hand, denn ein kostenloser CAD-Viewer arbeitet mit Ihrer STEP-Datei selbst.

Eine gehostete Plattform eignet sich für Produkte, die über Optik und Optionen verkauft werden, bei denen ein Käufer eine Farbe oder eine Größe wählt. Diese Auswahl trifft er in einem Konfigurator.

Der Eigenbau mit model-viewer, der kostenlosen Webkomponente von Google auf Basis der Bibliothek three.js, eignet sich für ein Webteam mit Zeit und für einfache Teile, die sich nur drehen müssen. model-viewer beherrscht Drehen, Beschriftungen und AR gut. Der Preis: Sie wandeln jedes Produkt um, vereinfachen, beleuchten und testen es, bei jeder Änderung erneut, und einen Schnitt, einen Röntgenmodus oder eine anklickbare Teileliste programmieren Sie selbst.

Eine für Sie gebaute interaktive Produktseite eignet sich für technische Produkte, deren Wert im Inneren des Gehäuses steckt (Pumpen, Ventile, Verteiler, Robotergelenke), und für Kunden, die jede Zahl prüfen. Proofscene baut sie in Ihre eigene Website ein, als einzelnes iFrame-Tag oder als gehostete Seite unter ihremarke.proofscene.com; Tutamens ICM-21 war noch am selben Tag live, an dem seine STEP-Datei ankam.

Gehört Ihr Produkt in diese letzte Gruppe, senden Sie die STEP-Datei und das Datenblatt und lassen Sie Ihr Produkt in 3D visualisieren. Produktseiten nach Maß sind in Proofscene Business und Enterprise enthalten, und bevor die Arbeit beginnt, sagt Ihnen unser Team, was es baut und wann die Seite live geht.

Was sollten Kunden mit dem Modell tun können?

Einkäufer technischer Produkte wollen hineinsehen und die Zahlen prüfen. Das Modell sollte sie das Produkt deshalb zerlegen, aufschneiden, durchleuchten und die Daten jedes Teils lesen lassen, nicht nur drehen. Jede dieser Funktionen läuft in einem Live-Modell, das Sie gleich öffnen können:

• Explosionsdarstellung. Der Kugelhahn HALVORN BV25 fährt in Montagereihenfolge in seine 14 Teile auseinander.
• Schnittansicht und Strömung. Schneiden Sie die Pumpe STRAVIK SX 50-160 in zwei Hälften und lassen Sie sie mit 15 bis 40 m³/h laufen.
• Röntgenansicht. Sehen Sie Motor, Wellgetriebe 50:1 und Abtriebslager durch das Gehäuse des Robotergelenks ARTIXO RA90 hindurch.
• Teiledaten und Messen. Klicken Sie auf ein beliebiges Teil des Tutamen ICM-21, um Name, Material und Stückzahl zu sehen, messen Sie zwischen echten Kanten und lassen Sie das Kühlmittel in der Aufteilung laut Datenblatt fließen.
• Teilen. Ein Link und ein QR-Code für jede Ansicht und eine kurze geführte Tour für Besucher, die nicht selbst auf Entdeckungstour gehen.

Aus demselben Modell lassen sich Launch-Filme rendern: Mehr dazu unter 3D-Produktanimation, oder sehen Sie im 35-Sekunden-Film, wie eine interaktive 3D-Produktseite im Browser zerlegt wird.

Wie bleibt ein 3D-Modell auf dem Smartphone schnell?

Halten Sie das Modell bei wenigen Megabyte, laden Sie es erst, wenn der Besucher es erreicht, und sorgen Sie dafür, dass die Seite auch ohne Modell gut lesbar ist. Ein Modell, das zuerst lädt, hält Text und Bilder auf, für die Ihre Kunden gekommen sind.

• Datei komprimieren. glTF kann Zahlen in weniger Bytes speichern und Geometrie mit den Erweiterungen Draco oder meshopt verdichten, und der Server sollte die Datei komprimiert ausliefern. Die Modelle von Proofscene speichern die Ausrichtung der Oberflächen in 16-Bit-Zahlen und werden per gzip komprimiert übertragen: Die GLB-Datei des ICM-21 mit 3,6 MB kommt mit 2,0 MB an.
• Dreiecke dort einsetzen, wo Kunden hinsehen. Gewindedetails, winzige Verrundungen und das Innere von Teilen, die niemand öffnet, kosten ein Smartphone Zeit und bringen nichts.
• Zuerst ein Standbild zeigen. Laden Sie das 3D-Modell, wenn es in den sichtbaren Bereich scrollt oder angetippt wird; model-viewer erledigt das mit einem Posterbild und Lazy Loading.
• Das Scrollen nicht blockieren. Eingebettete Modelle von Proofscene scrollen mit der Seite und zoomen nur mit Strg oder per Zwei-Finger-Geste. Auf Smartphones klappen ihre Bedienfelder als überlagerte Flächen auf, damit das Produkt sichtbar bleibt.
• Fakten in den Text schreiben. Suchmaschinen und KI-Assistenten lesen die Seite, nicht das Modell, also gehören Beschreibung, Teilenamen und technische Daten ins HTML. Die öffentlichen Demo-Seiten von Proofscene ergänzen strukturierte Daten für das 3D-Modell, und ein Browser, der kein 3D darstellen kann, bekommt trotzdem diesen Text.

Sind Ihre CAD-Daten sicher, wenn das Modell auf einer öffentlichen Seite steht?

Ja, denn ein Anzeigemodell ist nicht Ihr CAD-Modell: Es enthält Dreiecke in Bildschirmgenauigkeit, ohne Konstruktionsbaum, Skizzen, Parameter oder exakte Flächen und ohne die internen Details, die Sie weggelassen haben. Schützen Sie vor dem Veröffentlichen, worauf es ankommt:

• Vereinfachen oder entfernen Sie alles geschäftlich Sensible, etwa einen inneren Kanal oder ein Dichtungsprofil.
• Laden Sie die STEP-Datei nie in einen Viewer hoch, bei dem Besucher das Original herunterladen können.
• Prüfen Sie vor dem Start über einen passwortgeschützten Link und unterzeichnen Sie eine Geheimhaltungsvereinbarung (NDA) mit allen, die mit den CAD-Daten arbeiten. Proofscene arbeitet so, und Ihre CAD-Daten und Inhalte bleiben Ihr Eigentum.

Mehr zum Thema

Lesen Sie, wie Tutamens ICM-21 von der STEP-Datei zur Live-Produktseite wurde, probieren Sie alle vier Modelle auf der Seite Interaktive 3D-Produktdemo aus, oder sehen Sie im 36-Sekunden-Film, wie ein 3D-Produktviewer auf Ihre Website kommt.