3D und Motion für Industrie: Technik auf der Website verständlich erklären

Kurz gesagt: Maschinenbauer und Engineering-Firmen verkaufen Produkte, die man ohne Erklärung kaum versteht. 3D und Motion helfen dort, wo ein Foto an seine Grenze kommt: bei Innenleben, Abläufen, Verfahren und Varianten. Damit das auf der Website funktioniert, braucht es drei Dinge: eine klare Aussage pro Szene, ein webtaugliches Modell statt der CAD-Rohdaten und geklärte Nutzungsrechte vor dem Start. Wie das gebaut wird, steht auf der Leistungsseite zu 3D und Scroll-Animation in Webflow.

Warum Industrie-Websites Erklärung brauchen

Wer in der Industrie einkauft, kauft selten allein. Gartner hat 632 B2B-Käufer befragt (August bis September 2024): 61 % bevorzugen ein Kauferlebnis ganz ohne Vertriebsmitarbeiter (Gartner, Juni 2025). Die Umfrage ist branchenübergreifend und nicht auf Maschinenbau zugeschnitten. Für Industrie-Entscheider gibt es eine Studie von Contentful (über 900 Entscheider in Fertigung, Industrie und Tech, EMEA): 84 % halten Self-Service-Tools für kritisch bei der Anbieterwahl. Reibungspunkte sind fehlende Preistransparenz (39 %), umständliches Nachbestellen (35 %) und langsame Reaktion des Anbieters (24 %) (Contentful, B2B Buyer Benchmark Report 2025).

Daraus folgt für die Website: Sie muss einen Teil der Vertriebsarbeit übernehmen. Der Einkäufer will wissen, ob du liefern kannst. Der Ingenieur will verstehen, wie es funktioniert. Beide Fragen beantwortet die Seite, bevor jemand anruft. Eine aktuelle, belastbare Studie speziell zur Online-Lieferantenrecherche im deutschen Maschinenbau haben wir für 2024 bis 2026 nicht gefunden. Die Zahlen oben sind daher Hinweise, keine Branchenstatistik.

Wo 3D und Motion in der Industrie wirklich helfen

Nicht jede Industrieseite braucht Animation. Diese Fälle lohnen sich:

Und diese nicht: Standardteile, die jeder kennt, Katalogprodukte mit vielen Artikeln, bei denen der Datenblatt-Download genügt, und Seiten, bei denen Einkäufer eigentlich nur Zertifikate und Lieferzeiten suchen. Dort bringt eine saubere Produktkatalog-Struktur mehr. Dazu: Produktkatalog im CMS für Industriefirmen und Datenblätter und Zertifikate auf der Industrie-Website.

2D-Motion, 3D-Rendering oder Echtzeit-3D?

Die Technik richtet sich nach der Frage, die die Seite beantworten muss.

Für die meisten Industrie-Seiten ist die 3D-Animation als Video oder Bildsequenz der beste Kompromiss. Sie sieht aus wie ein Render, weil es einer ist, und belastet den Browser kaum. Echtzeit-3D lohnt sich, wenn Kunden Varianten selbst durchspielen. Den Vergleich haben wir ausführlicher beschrieben: 3D-Konfigurator oder Rendering. Für reine Erklärvideos: Technik erklären mit 3D-Erklärvideo.

Vom CAD-Modell zur Web-Szene

Viele Industriekunden haben bereits CAD-Daten und denken, die lassen sich direkt verwenden. Meistens nicht, aus drei Gründen:

1. Zu schwer. Konstruktionsmodelle enthalten jede Schraube und jedes Gewinde. Für eine Web-Szene werden sie vereinfacht, und Materialien kommen neu dazu.
2. Zu viel verraten. Ein vollständiges CAD-Modell enthält Konstruktionswissen. Für die Website zeigst du, was Kunden verstehen sollen, nicht, was Wettbewerber nachbauen können. Wer ein Modell veröffentlicht, sollte vorher entscheiden, welche Details sichtbar bleiben.
3. Falsche Aufgabe. Konstruktion rechnet auf Genauigkeit, Web-Darstellung auf Verständlichkeit und Dateigröße.

Der übliche Weg: Konstruktionsmodell als Referenz, darauf ein vereinfachtes Visual-Modell mit Materialien und Beleuchtung, daraus Rendering oder Animation. Für Echtzeit-3D im Browser wird das Modell zusätzlich in glTF exportiert, einen offenen Standard für die Auslieferung von 3D-Szenen (ISO/IEC 12113:2022), mit Binärvariante .glb und komprimierten Texturen (Khronos Group, glTF).

Ladezeit und Mobil: keine Ausrede, aber ein Risiko

Eine Industrie-Seite wird oft vom Büro-PC aus gelesen und trotzdem vom Handy auf der Messe. Google bewertet Ladeerlebnis an LCP bis 2,5 Sekunden, INP bis 200 Millisekunden und CLS bis 0,1, gemessen am 75. Perzentil der Seitenaufrufe (web.dev, Web Vitals). Wichtig für 3D-Inhalte:

• Das erste sichtbare Element ist ein kleines Standbild, nicht die 3D-Szene.
• Die Szene lädt erst, wenn sie in die Nähe des Sichtbereichs kommt. Das LCP-Element selbst wird nie lazy geladen (web.dev, Optimize LCP).
• Mobile bekommt eine leichtere Variante.
• Wer die Bewegung nicht sehen will oder soll, bekommt den Endzustand. Die Systemeinstellung dafür heißt prefers-reduced-motion (MDN).

Die technische Seite dazu steht ausführlich auf der Leistungsseite 3D und Scroll-Animation in Webflow.

Mehrsprachigkeit: einmal produzieren, mehrfach nutzen

Industrieunternehmen exportieren, die Website braucht mehrere Sprachen. Bei Animation geht dabei oft Geld verloren, wenn Text im Video steckt. Sinnvoll ist:

• Beschriftungen als HTML-Text über dem Medium, nicht eingebrannt.
• Eine sprachneutrale Szene mit Symbolen, Zahlen und Formen.
• Eine Struktur, in der neue Sprachen nur Textfelder ergänzen. In Webflow läuft das über Localization. Webflow bietet dafür das Add-on Localize an: Essential mit bis zu 3 Sprachen für 9 USD im Monat, Advanced mit bis zu 10 Sprachen für 29 USD im Monat (Webflow Pricing). Dazu kommen Übersetzung und die technische Einrichtung von hreflang.

Wenn eine Szene Sprechertext hat, gelten dieselben Überlegungen für Untertitel: als Datei, nicht als Teil des Bildes.

Rechte und Kosten klären, bevor produziert wird

Viele Industriekunden fragen zuerst nach transparenten Kosten und geregelten Nutzungsrechten. Beides ist vor dem Start leichter zu klären als nachher.

Nutzungsrechte. Wenn der Vertrag die Nutzungsarten nicht ausdrücklich nennt, richtet sich der Umfang der Rechteeinräumung nach dem von beiden Seiten zugrunde gelegten Vertragszweck (§ 31 Abs. 5 UrhG). Das spricht dafür, die Nutzung konkret aufzuschreiben. Das sollte im Vertrag stehen:

• Wo darf das Ergebnis laufen (Website, Messe, Vertrieb, Social Media, Print)?
• Wie lange und in welchen Ländern?
• Gehören dir die Quelldateien (3D-Szene, Texturen, Projektdateien) oder nur die fertigen Renderings?
• Wer darf Varianten später ändern oder weiterverwenden?
• Wer haftet für die Rechte an gelieferten Daten, etwa CAD-Modellen, Logos oder Fremdmaterial?

Das ist keine Rechtsberatung. Bei Verträgen mit großem Volumen lohnt der Blick einer Juristin oder eines Juristen.

Kosten. Eine feste Preisliste gibt es nicht, weil sich Projekte stark unterscheiden. Als Orientierung: Ein Anbieter nennt auf seiner Leistungsseite für Website-Projekte mit Motion Spannen von 8.000 bis 15.000 Euro (Business-Website) und 15.000 bis 30.000 Euro (Premium-Website), für einzelne 3D-Modelle und Animationen keine Zahlen (in-sync, Motion Design Agentur). Das ist eine Einzelangabe. Die wichtigsten Kostentreiber in der Industrie:

Wie wir das umsetzen

Webwavers gehört zu den sieben Webflow Premium Partnern in Deutschland und setzt Motion Design und Webentwicklung im selben Team um. Der Leistungsumfang für 3D und Motion umfasst Konzept, Storyboard, 3D-Modellierung, Rendering und Web-Motion, laut unserer Motion-Design-Seite.

Referenzen, die zum Thema passen:

• HyImpulse (2025, Mobilität und Luftfahrt): Die Raketen- und Antriebssysteme SL1, SR75 und HyMove wurden detailliert in 3D modelliert, um Aufbau, Funktion und technische Merkmale sichtbar zu machen. Die Projektseite nennt keine Messwerte (Projekt HyImpulse).
• Phasic Energy (2025, Industrie und Maschinenbau): Webdesign für ein Unternehmen mit KI-gestützter Abwärmenutzung. Die komplexe Technik wird mit reduzierten Layouts, präziser Typografie und gezielten Animationen erklärt. Die Projektseite nennt keine Zahlen und keine 3D-Elemente (Projekt Phasic Energy).
• Heigl Blaubeuren (2025, Industrie und Maschinenbau): Webdesign für Schweißen, CNC-Fräsen, Biegen und Lasertechnik, mit Zertifizierungen, Fertigungstiefe, Referenzen und Karriere. Ohne Animationsschwerpunkt, aber ein Beispiel dafür, wie Fertigungskompetenz strukturiert wird (Projekt Heigl).

Wann du keine Agentur für 3D brauchst

• Du hast nur Standardprodukte und der Datenblatt-Download beantwortet alle Fragen.
• Dein Vertrieb erklärt ohnehin jede Anlage persönlich, und die Website soll nur Kontakt vermitteln.
• Es gibt kein Budget für Pflege. Veraltete 3D-Szenen schaden mehr, als dass sie nützen.
• Ein gutes Video vom echten Produkt im Betrieb zeigt, was du brauchst.

FAQ

Wie erkläre ich komplexe Fertigungsverfahren auf der Website?

Zerlege das Verfahren in 5 bis 8 Schritte, gib jedem Schritt eine Aussage und zeige ihn per 2D-Infografik oder 3D-Sequenz. Scrollgesteuert läuft die Erklärung im Tempo des Besuchers. Ergänze Text, Datenblatt und Zertifikate, damit nichts nur in der Animation steckt.

Was ist besser für Maschinenbau: 3D-Animation oder Produktfotos?

Fotos zeigen das reale Produkt und schaffen Vertrauen. 3D zeigt, was Fotos nicht können: Innenleben, Abläufe, Varianten, noch nicht gebaute Anlagen. Viele Seiten nutzen beides. Fotos für Beweis, 3D für Verständnis.

Kann ich unsere CAD-Daten direkt verwenden?

Selten. CAD-Modelle sind meist zu schwer für das Web und verraten Konstruktionsdetails. Üblich ist ein vereinfachtes Visual-Modell, das aus der Konstruktion abgeleitet wird. Für Echtzeit-3D im Browser wird zusätzlich ein glTF-Export erzeugt.

Wie lässt sich die mobile Ladezeit bei 3D-Inhalten niedrig halten?

Mit einem kleinen Standbild als erstem Element, nachgeladenen Szenen, einer leichteren mobilen Variante und einem Standbild bei prefers-reduced-motion. Messen kannst du mit Lighthouse und den Felddaten aus dem Chrome-UX-Report.

Wie regle ich Nutzungsrechte an 3D-Animationen?

Schreibe Nutzungsarten, Dauer, Gebiet und Quelldateien in den Vertrag. Ohne ausdrückliche Regelung gilt nach § 31 Abs. 5 UrhG der Vertragszweck. Kläre auch, wer für die Rechte an gelieferten CAD-Daten und Logos einsteht.

Lassen sich Animationen für mehrere Sprachen wiederverwenden?

Ja, wenn Beschriftungen als Text über der Szene liegen und nicht eingebrannt sind. Dann ändert sich pro Sprache nur das Textfeld, nicht das gerenderte Medium.

Welche Agenturen haben Referenzen für 3D im Maschinenbau?

Frag nach konkreten Projekten mit Ladezeit-Messwerten, Dateiformaten und geklärten Rechten, nicht nach Showreels. Prüfe, ob Beispiele die Technik wirklich erklären oder nur hübsch aussehen. Bei uns sind Referenzen mit Projektseiten verlinkt, und was dort nicht steht, versprechen wir nicht.

Gespräch zu deiner Anlage oder deinem Verfahren

Beschreib kurz, was Besucher nach der Seite verstanden haben sollen, und schick uns, was du an Daten und Fotos schon hast. Wir sagen dir ehrlich, ob 3D, 2D-Motion oder ein Video der bessere Weg ist. Schreib an Edip Kilinc, Gründer von Webwavers. Zum Kontakt

Quellen

• Gartner: Sales Survey, 61 % der B2B-Käufer bevorzugen rep-freies Kauferlebnis (2025)
• Contentful: 2025 B2B Buyer Benchmark Report
• web.dev: Web Vitals
• web.dev: Optimize Largest Contentful Paint
• MDN: prefers-reduced-motion
• Khronos Group: glTF
• Webflow: Pricing
• Gesetze im Internet: § 31 UrhG
• in-sync: Motion Design Agentur