Leistung · 3D & Interaktion

3D Website erstellen lassen, die trotzdem schnell lädt

Eine 3D Website erstellen lassen, die von Hand mit Three.js gebaut ist: Echtzeit-WebGL-Szenen wie ein Produkt, das sich beim Scrollen dreht, eine Marke, die sich aus Partikeln zusammensetzt, oder eine Galerie, durch die man fliegt. Auf Ihre Marke zugeschnitten – mit einer ersten Version in Tagen, nicht Monaten.

Was eine 3D-Website für Sie leisten kann

Eine 3D-Website ist kein Gimmick, wenn sie eine Aufgabe hat. Sie kann ein Produkt schneller erklären als ein Foto, eine Marke greifbar machen oder eine Projektliste in etwas verwandeln, das Menschen tatsächlich erkunden. Alles auf dieser Website ist so gebaut – scrollen Sie über die Startseite, um es zu sehen.

Scroll-Storys

Die Seite bewegt sich mit dem Leser. Objekte setzen sich zusammen, lösen sich auf und verändern sich beim Scrollen – der Laptop oben auf dieser Website zerfällt in Partikel und formt sich neu als Logo, Handy und Globus.

Ihr Produkt in 3D

Ein Produkt, das sich auf dem Bildschirm dreht, öffnet oder selbst erklärt. Sinnvoll überall dort, wo ein flaches Foto nicht reicht: Bausysteme, Materialien, Geräte, alles mit Schichten.

Immersive Galerien

Statt eines Rasters aus Vorschaubildern bewegen sich Besucher durch Ihre Arbeiten. Der Bereich „Arbeiten“ auf dieser Website ist ein Kameraflug durch zwölf Projekt-Bildschirme, die sich live öffnen lassen.

Marke in Bewegung

Ihre Formen und Farben als flüssiges Metall, Licht oder Partikel – eine Animation, die zu Ihrer Marke gehört, statt eines Standardeffekts.

Ein Echtzeit-3D-Laptop, auf dessen Bildschirm die Class’Mat-Website zu sehen ist — Die Eröffnungsszene dieser Website: ein Echtzeit-3D-Laptop mit einer Kundenwebsite. Beim Scrollen zerfällt er in Partikel.

Interaktive Website statt nur animierte Website

Eine Animation läuft vor dem Besucher ab. Interaktion antwortet ihm. Auf einer WebGL-Website kann die Szene auf Mauszeiger oder Finger reagieren, der Scrollposition exakt folgen und per Klick echte Inhalte öffnen.

Partikel, die dem Mauszeiger ausweichen.
Ein Globus, der dem Zeiger folgt, mit Bögen, die von einem realen Ort ausgehen.
Projekt-Bildschirme, die per Klick oder Tippen die Live-Website öffnen.
Flüssiges Chrom, das Wellen schlägt, wenn eine Karte darin zerfließt.

Eine flüssige Chromform, die Website-Screenshots spiegelt, während eine Website-Karte darin zerfließt — Flüssiges Chrom, in das Website-Karten zerfließen (Bereich „Leistungen“ dieser Website).

Eine 3D-Erde bei Nacht mit Stadtlichtern und leuchtenden Bögen, die von Sarajevo ausgehen — Eine Echtzeit-Erde mit Bögen ab Sarajevo, zuerst aus Partikeln aufgebaut.

So gebaut, dass sie trotzdem schnell lädt

Die übliche Sorge bei einer 3D-Website sind Geschwindigkeit und SEO. Beides ist vom ersten Tag an Teil der Umsetzung, nicht etwas, das am Ende repariert wird:

Alle Texte bleiben reines HTML. Suchmaschinen lesen jedes Wort, und die Seite funktioniert auch mit ausgeschaltetem JavaScript.
Erst der Inhalt, dann das 3D. Der Text ist sofort sichtbar; aufwendigere Szenen werden im Hintergrund vorbereitet.
Kein Ruckeln beim Scrollen. Shader und Texturen werden im Voraus vorbereitet, nicht erst in dem Moment, in dem sie erscheinen.
Passt sich dem Gerät an. Die Auflösung sinkt automatisch, wenn ein Gerät langsam ist, und Handys erhalten leichtere Versionen derselben Szenen.
Eine Alternative für jeden Besucher. Kann ein Gerät kein WebGL ausführen, wird eine saubere statische Version angezeigt. Die Einstellung „Bewegung reduzieren“ wird berücksichtigt.

Diese Website selbst, vor dem Launch mit Google Lighthouse gemessen: 100 für Performance auf dem Desktop und 87–88 auf dem Handy sowie 100 für Barrierefreiheit, Best Practices und SEO auf beiden.

Für wen 3D Webdesign sinnvoll ist

Hersteller und Produktmarken, die zeigen müssen, wie etwas aufgebaut ist oder wie es funktioniert.
Bau-, Ingenieur- und Architekturbüros mit Projekten, die mehr verdienen als ein Fotoraster – siehe Webdesign für Bauunternehmen und Ingenieurbüros.
Produktstarts und Kampagnen – eine Landingpage, an die man sich erinnert und die man teilt.
Kreativstudios und Agenturen, die für ein Kundenprojekt einen WebGL- und Three.js-Entwickler brauchen, auch als White-Label-Arbeit unter Ihrem Namen.

Echte Arbeiten

Ich zeige nur, was existiert. Konzepte sind als Konzepte gekennzeichnet.

Diese Website – Partikel, flüssiges Chrom, eine 3D-Galerie und ein Echtzeit-Globus, gebaut mit Three.js. Durchscrollen.
PPG – Redesign-Konzept, keine Kundenarbeit: eine Website für ein Ingenieurunternehmen mit Partikeltunnel und Scroll-Szenen. Mehr über das Konzept.
Class’Mat® – Kundenprojekt in Luxemburg: die mehrsprachige Website (Französisch, Deutsch, Englisch), die Sie auf dem 3D-Laptop oben auf dieser Website sehen. Zur Fallstudie.

PPG-Redesign-Konzept: ein grüner Tunnel aus Partikeln neben dem Text „31 km of tunnels driven“ — PPG – Redesign-Konzept (kein bezahltes Projekt): ein Tunnel aus Partikeln.

Zeitrahmen, Preis und Leistungsumfang

Eine erste Version in Tagen, nicht Monaten. Eine 3D- oder interaktive Website dauert in der Regel bis zu 7 Tage, sobald Ihre Texte und Bilder bereitstehen; eine Landingpage 2–4 Tage. Größere Projekte und Onlineshops planen wir gemeinsam. Das sind Schätzungen, keine Garantien.

Preis nach Vereinbarung – Sie erhalten innerhalb von 24 Stunden eine kostenlose Einschätzung.

In jedem Projekt enthalten:

Individuelles Design und von Hand geschriebener Code – keine Templates, keine Baukästen.
Zuerst für Handys gebaut, auf Geschwindigkeit optimiert.
SEO-Grundlagen: sauberes HTML, Titel und Beschreibungen, Sitemap, strukturierte Daten.
Bei Bedarf mehrere Sprachen, jede mit eigener Adresse für Google.
Unterstützung bei Domain und Hosting.
30 Tage Korrekturen nach dem Launch.

Texte und Bilder liefern Sie – und, falls vorhanden, Produktfotos oder 3D-Modelle.

Ablauf

01
Gespräch
Was soll das 3D leisten – ein Produkt erklären, eine Stimmung erzeugen, durch eine Geschichte führen? Das klären wir, bevor Code entsteht.
02
Erste Szene
Zuerst entsteht eine Szene, damit Sie die Bewegung früh auf Ihrem eigenen Bildschirm sehen und erleben.
03
Umsetzung
Die komplette Website, mit Vorschauen, die Sie zwischendurch auf Ihrem eigenen Handy öffnen können.
04
Launch
Domain, Hosting, Geschwindigkeits- und SEO-Checks – dann geht sie live, gefolgt von 30 Tagen Korrekturen.

Häufige Fragen

Wie lange dauert eine 3D-Website?

In der Regel bis zu 7 Tage, sobald Ihre Texte und Bilder bereitstehen, mit einer ersten Version zur Durchsicht nach wenigen Tagen. Eine einfachere Landingpage dauert 2–4 Tage. Größere Projekte planen wir gemeinsam. Das sind Schätzungen, keine Garantien.

Was kostet eine 3D-Website?

Der Preis hängt von den Szenen und der Anzahl der Seiten ab und wird deshalb pro Projekt vereinbart. Senden Sie eine kurze Beschreibung und Sie erhalten innerhalb von 24 Stunden eine kostenlose Einschätzung.

Macht 3D meine Website langsam?

Nicht, wenn sie von Anfang an auf Geschwindigkeit ausgelegt ist. Der Text lädt zuerst, das 3D wird im Hintergrund vorbereitet, und die Auflösung passt sich dem Gerät an. Diese Website erreicht in Google Lighthouse 100 für Performance auf dem Desktop.

Schadet eine 3D-Website der SEO?

Nein. Alle Texte stehen in reinem HTML, das Suchmaschinen direkt lesen, mit passenden Titeln, Beschreibungen und strukturierten Daten. Das 3D liegt über dem Inhalt; es ersetzt ihn nie.

Funktioniert das auf dem Handy?

Ja. Handys erhalten leichtere Versionen derselben Szenen, Layouts werden zuerst für kleine Bildschirme gestaltet, und wo der Desktop auf Hover setzt, funktioniert auf dem Handy Tippen.

Was passiert auf Geräten, die kein 3D darstellen können?

Besucher sehen eine saubere statische Version mit allen Inhalten. Wer „Bewegung reduzieren“ eingeschaltet hat, sieht die Hintergrundbewegung verlangsamt.

Brauche ich 3D-Modelle?

Nein. Viele Effekte – Partikel, flüssige Formen, Typografie, abstrakte Objekte – entstehen im Code. Wenn Sie bereits 3D-Modelle Ihrer Produkte haben, sagen Sie es mir, dann prüfen wir, ob wir sie verwenden können.

Welche Technologie verwenden Sie?

Three.js auf Basis von WebGL, eigene Shader und reines JavaScript, ohne schweres Framework. Das Ergebnis ist Standard-HTML, -CSS und -JavaScript, das auf jedem guten Hosting läuft.

Kann ich die Texte nach dem Launch selbst ändern?

Die Website ist von Hand geschrieben, nicht in einem Baukasten, deshalb nehme ich Textänderungen vor. Korrekturen sind 30 Tage nach dem Launch inklusive; danach werden Änderungen nach Bedarf vereinbart oder über eine monatliche Wartung abgedeckt.

Wie arbeiten wir zusammen?

Kommunikation auf Englisch – per E-Mail und Online-Videocall. Persönlich in Sarajevo nach Vereinbarung. Sie erhalten innerhalb von 24 Stunden eine Antwort.

Weitere Leistungen

Kontakt

Bauen wir etwas,
das bleibt.

Schreiben Sie mir, was Sie brauchen. Innerhalb von 24 Stunden erhalten Sie nächste Schritte und ein Angebot für Ihr Projekt. Kommunikation auf Englisch.

Projekt starten

Oder direkt schreiben: hello@edweblab.com