Jedes 3D-Stück in unseren Then & now-Remakes begann als Python-Datei. Superman, Batman, Wolverine, Spider-Man, Iron Man, Hulk, R2-D2 und das Game & Watch werden jeweils von einem Skript gebaut, das Blender steuert, ein Modell exportiert und es an eine Seite übergibt, die es live mit three.js beleuchtet. Nichts davon wurde mit der Maus modelliert.
Das klingt nach einem Partytrick. Es war die praktischste Entscheidung des ganzen Projekts.
Warum 3D mit Code bauen
Ein von Hand gebautes Modell ist ein fertiges Objekt. Ein von einem Skript gebautes Modell ist ein Rezept, und Rezepte lassen sich ändern. Als das Feedback zu Hulk lautete "seine Fäuste sehen aus wie Handschuhe", haben wir keine Datei geöffnet und Vertices verschoben; wir haben geändert, wie die Faust gebaut wird, und das Skript neu laufen lassen. Waren die Unterarme zu kurz oder sollte ein Umhang über die Schultern statt dahinter fallen, war die Lösung ein paar Zeilen, und das ganze Modell war in Minuten neu gebaut.
Es bedeutet auch, dass jedes Stück reproduzierbar ist. Die Skripte liegen im Repository neben der Website, und ein gemeinsames Toolkit übernimmt die Teile, die jede Büste braucht: Torso, Sockel, Farbgebung und Export.
Gesichter sind schwer, also haben wir nicht bei null angefangen
Unsere ersten Köpfe waren aus Grundkörpern gebaut und mathematisch verformt. Sie wirkten wie Köpfe, aber nicht wie Menschen. Bei Gesichtern ist das Auge am wenigsten nachsichtig, und kein noch so cleveres Rauschen rettet eine Nase, die etwas zu lang ist.
Also haben wir den Ansatz geändert. Blender Studio veröffentlicht unter CC0 eine Sammlung menschlicher Basis-Meshes, für alle frei nutzbar. Heute beginnt jedes Gesicht mit diesem realistischen Kopf und wird per Skript umgeformt: eine schwerere Stirn und ein breiterer Kiefer für Hulk, ein kantiger Kiefer und ein Grübchenkinn für Superman, ein Fauchen für Wolverine. Die Hände stammen aus derselben Sammlung und werden per Skript zu einem Griff, einer offenen Hand oder einer Faust geformt.
Kleine Details, die am längsten dauerten
Ein paar Lektionen, die wir allen mitgeben würden, die Ähnliches vorhaben:
- Wasserdicht oder gar nicht. Teile zusammen neu zu vernetzen und das Ergebnis dann zu verkleinern, um Dateigröße zu sparen, kann die Oberfläche in sich falten, und Falten werden als dunkle Löcher gerendert. Unser Build bricht jetzt ab, wenn ein Modell keine geschlossene, gültige Oberfläche ist.
- Ein Material pro Mesh. Der glTF-Exporter von Blender behält Vertex-Farben nur beim ersten Material eines Meshes, also ist jedes bemalte Teil ein eigenes Mesh.
- Münder zu, bis sie gebraucht werden. Hulk und Wolverine halten die Lippen in Ruhe geschlossen; das Brüllen und das Fauchen sind Formänderungen, die nur abspielen, solange du gedrückt hältst, und die Zähne bleiben verborgen, bis sich der Mund öffnet.
- Jedes Modell versionieren. Browser cachen Modelle hartnäckig, also wird jede Datei mit einem Versions-Tag geladen, der sich ändert, wenn sich das Modell ändert.
Licht ist das halbe Modell
Auf der Seite wird jedes Stück in Echtzeit mit three.js beleuchtet. Iron Man und Superman bekommen zusätzlich Bloom, einen Leuchteffekt für die Augen, den Arc-Reaktor, den Repulsor und den Hitzeblick. Das brauchte Feinschliff. Unser erster Iron Man leuchtete so hell, dass der Helm verschwand, also beginnt der Bloom jetzt klein und öffnet sich erst, wenn du einen Schuss auflädst.
Jedes Stück bekommt auch eine eigene Szene: ein verregnetes Dach in Gotham, die Dämmerung über New York, die Doppelsonne von Tatooine, ein Walnussschreibtisch für die Handhelds.
Schnell bleiben
3D wird schnell langsam. Ein paar Regeln halten unseres auf dem Smartphone nutzbar:
- Modelle laden erst, wenn die Seite ruht, nie vor dem Text.
- Szenen werden nacheinander in kleinen Häppchen aufgebaut, damit die Seite nie einfriert, während sie die Grafik vorbereitet.
- Die Grafik-Einrichtung läuft im Hintergrund, bevor das erste Bild gezeichnet wird.
- Geräte ohne brauchbaren Grafikchip bekommen ein Standbild statt einer hängenden Seite.
Das Museumsregal oben auf Then & now zeigt alle acht Stücke auf einmal und nutzt deshalb leichte Versionen jedes Modells: reduziert, komprimiert und erst bei Bedarf geladen.
Wie es weitergeht
Die Techniken hinter diesen Büsten fließen direkt in Kundenarbeit ein: Produktkonfiguratoren, interaktive Erklärungen, Hero-Momente, die schnell laden und auf Berührung reagieren. Weil sie in Code gebaut sind, können sie sich so schnell ändern wie das Produkt, neben dem sie stehen.
Bis dahin: Geh und mach Hulk wütend.