Showcase · Eigenentwicklung · 3D / WebGL
3D-Uhren-Konfigurator: ein WebGL-Showcase, der ganz im Browser läuft
Ein konfigurierbares 3D-Produkt in Echtzeit — Gehäuse, Zifferblatt, Indizes und Glas frei kombinierbar, vollständig im Browser, ohne Backend und ohne externe Server. Entstanden als freiwilliges Weiterbildungsprojekt von osnabyte, um Praxis in 3D im Web (React Three Fiber) und in der 3D-Modellierung mit Blender aufzubauen.
Live-Demo
Die Demo öffnet sich als Vollbild-Ansicht (mit „Zurück"-Banner): Optionen verändern Material und Teile der Uhr in Echtzeit, die Zeiger laufen nach der echten Uhrzeit. Das Kontaktformular in der Demo ist bewusst nicht funktional — es verschickt nichts. Für ein echtes Projekt nutze die Anfrage weiter unten auf dieser Seite.
Live-Demo öffnenÖffnet die interaktive Vollbild-Demo. Läuft vollständig im Browser, ohne Backend.
Was das ist — und warum es kein Kundenprojekt ist
Diese Referenz ist bewusst ehrlich eingeordnet: Sie ist kein bezahltes Kundenprojekt, sondern ein Proof of Concept und eine freiwillige Eigenentwicklung. Der Anlass war Weiterbildung — wir wollten echtes, übertragbares Handwerk in zwei Feldern aufbauen, die für moderne, visuell anspruchsvolle Web-Produkte zunehmend relevant sind: interaktives 3D im Browser und die zugehörige 3D-Modellierung.
Das gewählte Beispiel — ein Tesla-artiger Produktkonfigurator für eine fiktive Automatikuhr („Abyss Automatic") — ist anspruchsvoll genug, um die typischen Probleme eines echten Konfigurators durchzuspielen: saubere Materialwechsel, glaubwürdige Beleuchtung, performante Interaktion und eine Bedienung, die auf Desktop und Smartphone funktioniert. Genau diese Muster lassen sich später auf reale Produkte übertragen.
Die technische Umsetzung
Die 3D-Szene basiert auf React Three Fiber und three.js. Das Modell der Uhr ist in Blender gebaut und als glTF/GLB exportiert; geladen wird es zur Laufzeit in den Browser. Materialien werden nicht ersetzt, sondern getintet: Die in Blender gebackenen Material-Maps bleiben erhalten und werden je nach Auswahl eingefärbt — so wirken Metalle und Oberflächen weiterhin glaubwürdig. Das Glas ist die einzige Ausnahme und wird als transparentes Material zur Laufzeit erzeugt.
Der gesamte Konfigurator ist datengetrieben: Eine einzige Schema-Definition beschreibt, welche Optionen welche Bauteile der Uhr verändern, welche Kameraperspektive dazugehört und wie sich der Preis zusammensetzt. Neue Optionen sind damit primär eine Datenänderung, nicht neuer Szenencode. Kleine Details runden das Bild ab — die Zeiger laufen nach der echten Uhrzeit, und eine fertige Konfiguration lässt sich über einen kompakten Link teilen und wieder öffnen.
Wichtig war uns, dass das Ganze vollständig statisch ausgeliefert werden kann: kein Backend, keine externen Asset-Server, alles läuft im Browser. Genau deshalb lässt sich der Konfigurator auch direkt hier auf der osnabyte-Seite kapseln, statt ihn separat zu hosten. Barrierefreiheit ist dabei kein Nachgedanke — die Optionsgruppen sind per Tastatur bedienbar, der Preis wird Screenreadern als Live-Region angekündigt, und reduzierte Bewegung (prefers-reduced-motion) wird respektiert.
Was wir daraus mitgenommen haben
- 3D im Web ist produktionsreif: Ein interaktiver Konfigurator lässt sich performant und vollständig statisch ausliefern — ein realer Baustein für Produktseiten, die sich von Wettbewerbern abheben wollen.
- Asset-Pipeline von Blender bis Browser: Modellierung, gebackene Materialien, glTF-Export und das Laden im Web greifen ineinander. Dieses Zusammenspiel sauber zu beherrschen ist die halbe Miete für glaubwürdige 3D-Visualisierung.
- Datengetriebene Konfiguratoren skalieren: Optionen, Preislogik und Kameraführung aus einer Schema-Quelle zu speisen, hält die Komplexität beherrschbar und macht Erweiterungen günstig.
So etwas für dein Produkt?
Ob 3D-Produktkonfigurator, interaktive Visualisierung oder eine Website, die sich abhebt — wenn du eine Idee hast, setzen wir sie technisch sauber um. Lass uns darüber sprechen.