Joermy

Websites — 2026

Atelier Kessler

Eine in Blender gebaute Handaufzugsuhr mit echtem Werk: beim Scrollen schraubt sich der Boden ab, die Uhr zerlegt sich, die Kamera fährt bis an die Unruh.

Rolle
Konzept, Gestaltung, 3D-Modell, Umsetzung
Jahr
2026
Technologie
HTML, CSS, JavaScript, Three.js, Blender
Startseite der Musterwebsite für eine Uhrmacherei: große Überschrift Zeit, in guten Händen, daneben eine 3D-Handaufzugsuhr mit silbernem Zifferblatt, gebläuten Zeigern und braunem Lederband

Musterprojekt. Betrieb, Anschrift und Inhalte sind frei erfunden, die Umsetzung ist es nicht. Die Fotos stammen von Unsplash, das 3D-Modell ist eigene Arbeit in Blender.

Überblick

Fünf Seiten für eine erfundene Meisterwerkstatt in Peine. Die Startseite erzählt eine Revision in fünf Kapiteln — Öffnen, Reinigen, Prüfen, Ölen, Regulieren. Die Uhr dazu, die Kessler K-1, ist ein vollständiges 3D-Modell mit Gehäuse, Lederband und einem Glashütter Handaufzugswerk.

Die Aufgabe

Uhrmacherei ist unsichtbare Arbeit: der Kunde gibt eine Uhr ab und bekommt sie Wochen später zurück. Was dazwischen passiert und warum eine Revision ihren Preis hat, sieht niemand. Eine stilisierte Uhr ohne Werk erzählt davon nichts.

Der Ansatz

Die Arbeit selbst zeigen, an einer Uhr, die echt wirkt. Der Boden wird abgeschraubt, das Werk zerlegt, die Räder liegen nebeneinander auf der Ablage, ein Öler setzt einen Tropfen auf den Lagerstein, und auf der Zeitwaage glättet sich die Gangkurve, während reguliert wird.

Explosionsansicht der 3D-Uhr: Glas, Lünette, Zifferblatt, Gehäuse und die Teile des Werks schweben schräg übereinander, daneben eine Textkarte zum Kapitel Reinigen
Kapitel Prüfen: Federhaus, Minutenrad, Kleinbodenrad, Sekundenrad, Ankerrad und Anker liegen nebeneinander, jedes Teil ist beschriftet
Kapitel Regulieren: Nahaufnahme der Schraubenunruh unter dem gravierten Kloben, links eine Zeitwaage mit Gang, Amplitude und Abfallfehler

Das System

Das Modell entsteht per Python-Skript in Blender: 26 Teile mit rund 195.000 Dreiecken, darunter Dreiviertelplatine, Goldchatons mit gebläuten Schrauben, Ankerrad mit 15 Kolbenzähnen und eine Schraubenunruh mit 18 Regulierschrauben. Glashütter Streifenschliff, Perlage, Sonnenschliff, die Gravur des Unruhklobens und der Zifferblattdruck werden beim Laden im Browser als Texturen erzeugt.

Three.js rendert mit Anisotropie, Dünnschicht-Interferenz auf gebläutem Stahl, Schatten, Tiefenschärfe und einem eigenen Lichtzelt. Das Werk läuft mit 28.800 Halbschwingungen pro Stunde, die Spirale atmet mit, die Zeiger zeigen die Ortszeit von Peine. Ein Leistungswächter senkt auf schwachen Geräten Auflösung und Effekte.

Ergebnis

Statischer Erstaufruf rund 100 KB komprimiert, 3D-Modell und Three.js laden danach. Läuft auf Desktop und Telefon, ohne WebGL steht ein gerendertes Standbild. Keine externe Ressource, keine Konsolenfehler, kein Überlauf bei 390 px.

Technik

HTMLCSSJavaScriptThree.jsBlenderPython
Seite öffnen Quelltext auf GitHub ← Zurück zu den Arbeiten