Eine 3D-Umgebung in WordPress — ein Raum, den Besucher betreten.
Nicht nur ein Produkt, sondern ein ganzer Ort: dein Showroom, deine Produktionshalle, dein Messestand oder ein Gebäude, das es noch gar nicht gibt. Als interaktive 3D-Umgebung direkt in deiner WordPress-Website, mit Informationspunkten, die deine Redaktion selbst pflegt.
Eine 3D-Umgebung in WordPress ist ein interaktiver, dreidimensionaler Raum — etwa ein Showroom, eine Werkshalle oder ein Gebäude —, der mit Three.js im Browser dargestellt und in eine WordPress-Seite eingebunden wird. Besucher bewegen sich durch den Raum, klicken auf Informationspunkte und gelangen von dort zu Produkten, Kontaktformularen oder weiteren Seiten.
Was eine 3D-Umgebung von einem Produkt-Viewer unterscheidet.
Ein Produkt-Viewer zeigt ein Objekt, das man dreht. Eine 3D-Umgebung zeigt einen Ort, in dem man sich bewegt. Das klingt nach einem kleinen Unterschied, verändert aber fast alles:
| Produkt-Viewer | 3D-Umgebung | |
|---|---|---|
| Blick | Von außen auf ein Objekt | Von innen in einen Raum |
| Bewegung | Drehen und zoomen | Wege, Standpunkte, Etagen |
| Inhalt | Ein Produkt | Viele Objekte, Stationen, Informationen |
| Dateigröße | Klein | Groß — muss aufgeteilt werden |
| Ziel | Produkt verstehen | Ort erleben, Überblick bekommen |
Das bedeutet auch: Eine 3D-Umgebung braucht mehr Konzept. Wo startet der Besucher? Was sieht er zuerst? Wie findet er zurück? Wie kommt er von der Maschine zum Kontaktformular? Ohne Antworten auf diese Fragen wird aus einem beeindruckenden Raum schnell ein Ort, in dem man sich verläuft.
Einsatzbereiche.
Virtueller Showroom
Deine Ausstellung, rund um die Uhr geöffnet. Besucher gehen von Produkt zu Produkt, öffnen Details, starten Konfiguratoren und fragen direkt an. Besonders sinnvoll für Küchen, Bäder, Möbel, Fahrzeuge und alles, was man sonst nur im Ausstellungsraum sehen kann.
Werks- und Produktionsrundgang
Zeig, wie bei dir gefertigt wird — für Kunden, die Qualität verstehen wollen, und für Bewerber, die wissen möchten, wo sie arbeiten würden. Stationen erklären Arbeitsschritte, Maschinen laufen in Bewegung. Wie so etwas als Scroll-Tour aussieht, zeigt der TAKT Digital Twin.
Messestand und Veranstaltung
Der Stand der letzten Messe als dauerhafter Raum auf der Website, oder eine virtuelle Ausstellung für Kunden, die nicht anreisen konnten.
Gebäude und Immobilien
Ein Neubau vor dem ersten Spatenstich, ein Bauablauf Schritt für Schritt oder ein Gutachten, bei dem Befunde an der richtigen Stelle im Gebäude liegen. Die Horizont-Baureise läuft dabei eingebettet in einer WordPress-Website, der Inspector Samui zeigt ein Gutachten als begehbares Modell.
Schulung und Einweisung
Sicherheitsunterweisungen, Anlagenbedienung oder Onboarding im geschützten Mitgliederbereich deiner WordPress-Seite — nur für angemeldete Benutzer sichtbar.
Wie sich Besucher bewegen.
Die wichtigste Designentscheidung einer 3D-Umgebung ist die Navigation. Aus Spielen kennt man das freie Laufen mit Tastatur und Maus. Auf einer Website ist das fast immer die falsche Wahl: Auf dem Smartphone gibt es keine Tastatur, viele Besucher haben nie ein Computerspiel gespielt, und wer sich verläuft, verlässt die Seite.
Bewährt haben sich drei Formen:
- Standpunkte: Der Besucher springt per Klick zwischen festen Punkten, die Kamera fliegt weich dorthin. Man kann sich umsehen, aber nicht verlaufen. Das ist für die meisten Websites die beste Lösung.
- Geführte Tour per Scrollen: Beim Scrollen bewegt sich die Kamera auf einem festgelegten Weg durch den Raum. Sehr zugänglich, auch auf dem Smartphone. Mehr dazu unter 3D-Scroll-Animation.
- Übersicht mit Umkreisen: Der Raum wird wie ein Modell von außen gezeigt, man dreht ihn und klickt Bereiche an, um hineinzuzoomen.
Oft ist eine Kombination sinnvoll: Übersicht zum Einstieg, Standpunkte für Details, und immer ein sichtbarer Weg zurück zum Anfang.
Hotspots im WordPress-Backend pflegen.
Eine 3D-Umgebung lebt von ihren Informationen: Produkte wechseln, Texte ändern sich, neue Maschinen kommen hinzu. Wenn für jede Änderung ein Entwickler nötig ist, veraltet der Raum innerhalb eines Jahres.
Deshalb werden Informationspunkte, sogenannte Hotspots, als eigene Inhaltsart in WordPress angelegt. Jeder Hotspot hat einen Titel, einen Text, optional Bild, Video und Link — und eine Position im Raum. Die Redaktion bearbeitet Hotspots wie Beiträge. Die Position kann über einen kleinen Positionsmodus im Frontend gesetzt werden: Hotspot auswählen, im 3D-Raum an die richtige Stelle klicken, speichern.
<?php
add_action( 'init', function () {
register_post_type( 'hotspot', [
'label' => 'Hotspots',
'public' => false,
'show_ui' => true,
'show_in_rest' => true,
'menu_icon' => 'dashicons-location',
'supports' => [ 'title', 'editor', 'thumbnail' ],
] );
// Position im Raum und Zuordnung zur Szene als Metafelder
foreach ( [ 'pos_x', 'pos_y', 'pos_z' ] as $feld ) {
register_post_meta( 'hotspot', $feld, [
'type' => 'number',
'single' => true,
'show_in_rest' => true,
'auth_callback' => fn() => current_user_can( 'edit_posts' ),
] );
}
register_post_meta( 'hotspot', 'szene', [
'type' => 'string', 'single' => true, 'show_in_rest' => true,
'auth_callback' => fn() => current_user_can( 'edit_posts' ),
] );
} );
// Die 3D-Szene laedt ihre Hotspots dann z. B. ueber:
// /wp-json/wp/v2/hotspot?_fields=id,title,content,metapublic auf false hält die Hotspots aus Suchergebnissen und eigenen URLs heraus — sie existieren nur als Inhalt für die 3D-Szene. Die eigentlichen Texte stehen trotzdem zusätzlich lesbar auf der Seite, siehe Abschnitt Barrierefreiheit und SEO.
Große Szenen schnell laden.
Eine ganze Halle ist naturgemäß größer als ein einzelnes Produkt. Wer sie als eine einzige 60-MB-Datei ausliefert, verliert die meisten Besucher im Ladebalken. Die Lösung ist, die Umgebung wie ein Spiel zu behandeln:
- Grundgerüst zuerst: Wände, Boden und grobe Formen laden sofort, damit der Besucher nach wenigen Sekunden etwas sieht.
- Details nach Bedarf: Maschinen, Möbel und hochauflösende Texturen laden nach, wenn sich der Besucher dem Bereich nähert.
- Wiederholungen einmal laden: 40 gleiche Regale sind ein Modell, das 40-mal gezeichnet wird — mit Instancing kostet das kaum mehr als eins.
- Licht vorberechnen: Schatten und indirektes Licht werden in Blender in Texturen gebacken, statt in Echtzeit berechnet. Das sieht besser aus und entlastet schwächere Geräte.
- Komprimieren: Geometrie mit Draco oder Meshopt, Texturen als KTX2 oder WebP.
Außerdem startet die Umgebung nicht automatisch beim Seitenaufruf. Zuerst steht ein Vorschaubild mit einem klaren Button „Rundgang starten“. So bleibt die WordPress-Seite selbst schnell, und nur wer den Raum wirklich betreten will, lädt ihn. Mehr dazu im Ratgeber 3D in WordPress schnell halten.
Barrierefreiheit und SEO.
Eine 3D-Umgebung ist für Screenreader und Suchmaschinen weitgehend unsichtbar. Das ist kein Grund, darauf zu verzichten, aber ein Grund, sie richtig einzubetten:
- Alle Inhalte auch als Text: Die Informationen der Hotspots erscheinen zusätzlich als normale, gegliederte Liste auf der Seite — für Google, für Screenreader und für alle, die lieber lesen.
- Tastaturbedienung: Standpunkte und Hotspots lassen sich mit der Tab-Taste erreichen.
- Bewegung reduzieren: Wer im Betriebssystem „Bewegung reduzieren“ eingestellt hat, bekommt ruhigere Kamerafahrten.
- Fallback: Unterstützt ein Gerät kein WebGL, erscheinen Bilder und Texte statt einer leeren Fläche.
Weil WordPress die Hotspot-Texte ohnehin verwaltet, lassen sich beide Ausgaben — 3D-Raum und Textliste — aus denselben Daten erzeugen. Niemand muss Inhalte doppelt pflegen.
Umsetzung, Daten und Kosten.
Woher das 3D-Modell kommt
Für bestehende Räume gibt es mehrere Wege: Grundrisse und Fotos, aus denen der Raum in Blender aufgebaut wird; CAD- oder BIM-Daten von Architekten oder Anlagenplanern, die für den Browser vereinfacht werden; oder 3D-Scans. Scans liefern schnell realistische Ergebnisse, erzeugen aber sehr große, unordentliche Daten, die aufwendig aufbereitet werden müssen. Für Websites ist ein sauber modellierter, reduzierter Raum oft die bessere Grundlage.
Ablauf
- Ziel und Zielgruppe klären: Wer soll den Raum betreten, und was soll danach passieren?
- Drehbuch: Startpunkt, Standpunkte, Stationen, Wege zu Kontakt und Produkten.
- Modell aufbauen oder aus vorhandenen Daten aufbereiten.
- Entwicklung der Szene und des WordPress-Plugins mit Hotspot-Verwaltung auf einer Testumgebung.
- Test auf Smartphones, Tablets und schwächeren Laptops.
- Einweisung der Redaktion, Livegang, Messung.
Kosten
3D-Umgebungen sind in der Regel aufwendiger als ein einzelner Produkt-Konfigurator, weil Raum, Navigation und viele Inhalte zusammenkommen. Ein überschaubarer Showroom mit einigen Standpunkten und pflegbaren Hotspots liegt meist im Bereich 6.000 bis 15.000 Euro. Große Anlagen, mehrere Etagen oder integrierte Konfiguratoren liegen darüber. Das sind Orientierungswerte; nach dem Erstgespräch bekommst du ein Festpreisangebot.
Für eine bestehende Ausstellung, die einfach nur fotorealistisch gezeigt werden soll, ist ein 360-Grad-Rundgang aus Panoramafotos oft günstiger. Eine modellierte 3D-Umgebung lohnt sich, wenn der Raum noch nicht existiert, wenn Inhalte sich häufig ändern oder wenn mehr gezeigt werden soll, als eine Kamera sieht — Innenleben, Abläufe, Varianten.
Die Horizont-Baureise läuft eingebettet in einer WordPress-Website. Die übrigen Demos laufen als eigenständige Three.js-Anwendungen — technisch dieselbe Grundlage, die sich genauso in WordPress einbinden lässt. Die Markennamen sind überwiegend erfundene Showcases.
Nicht glauben — ausprobieren.
Alle Demos laufen live im Browser, auch auf dem Smartphone.
FAQ — 3D-Umgebung in WordPress.
Kann man eine 3D-Umgebung in WordPress einbinden?
Ja. Eine mit Three.js entwickelte 3D-Umgebung wird als Plugin mit Shortcode, Gutenberg-Block oder Elementor-Widget in eine WordPress-Seite eingebunden. Informationspunkte im Raum lassen sich als eigene Inhaltsart im Backend pflegen, sodass die Redaktion Texte, Bilder und Links selbst ändern kann.
Was ist der Unterschied zwischen 3D-Umgebung und Produkt-Viewer?
Ein Produkt-Viewer zeigt ein einzelnes Objekt, das man von außen dreht und zoomt. Eine 3D-Umgebung zeigt einen ganzen Raum wie einen Showroom oder eine Halle, in dem sich der Besucher zwischen Standpunkten bewegt und viele Informationen entdeckt. Sie braucht mehr Konzept und eine durchdachte Ladestrategie.
Wie bewegen sich Besucher durch die 3D-Umgebung?
Auf Websites haben sich feste Standpunkte bewährt, zwischen denen die Kamera per Klick weich fliegt, sowie geführte Touren per Scrollen. Freies Laufen mit Tastatur wie in Spielen ist meist ungeeignet, weil es auf Smartphones nicht funktioniert und viele Besucher sich verlaufen.
Wird eine große 3D-Umgebung nicht zu langsam?
Nicht, wenn sie richtig aufgebaut ist. Zuerst lädt ein grobes Grundgerüst, Details folgen nach Bedarf, wiederholte Objekte werden per Instancing nur einmal geladen und Licht wird vorberechnet. Außerdem startet die Umgebung erst nach einem Klick, sodass die WordPress-Seite selbst schnell bleibt.
Kann Google die Inhalte einer 3D-Umgebung lesen?
Die 3D-Szene selbst kaum. Deshalb werden die Texte der Informationspunkte zusätzlich als normale Liste auf der Seite ausgegeben. Weil WordPress diese Inhalte verwaltet, entstehen 3D-Raum und Textfassung aus denselben Daten, ohne doppelte Pflege.
Brauche ich 3D-Scans meiner Räume?
Nein. Räume können auch aus Grundrissen und Fotos in Blender aufgebaut oder aus CAD- und BIM-Daten aufbereitet werden. 3D-Scans liefern schnell realistische Ergebnisse, erzeugen aber sehr große Daten, die für den Browser aufwendig reduziert werden müssen.
Was kostet eine 3D-Umgebung für WordPress?
Ein überschaubarer Showroom mit einigen Standpunkten und pflegbaren Informationspunkten liegt meist zwischen 6.000 und 15.000 Euro. Große Anlagen, mehrere Etagen oder integrierte Konfiguratoren liegen darüber. Diese Zahlen sind Orientierung und keine Fixpreise.
Das bin ich – rechts im BildErzä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