Wie baut eine KI
3D-Gebäude aus Text?
Eine Dokumentation des Prozesses, wie ein KI-Sprachmodell architektonische Formen in parametrischen Three.js
Three.js ist eine kostenlose, quelloffene JavaScript-Bibliothek, die es ermöglicht, 3D-Grafiken direkt im Webbrowser darzustellen — ohne Installation, ohne Plugin. Sie nutzt dafür WebGL, eine Schnittstelle, die den Grafikprozessor (GPU) des Computers anspricht. Three.js vereinfacht die Arbeit mit WebGL erheblich: Statt hunderte Zeilen Shader-Code zu schreiben, kann man mit wenigen Zeilen Würfel, Kugeln und Szenen erzeugen. Kernkonzepte: Eine Scene (Bühne) enthält Objekte. Eine Camera (Kamera) bestimmt den Blickwinkel. Ein Renderer zeichnet alles auf ein HTML-Canvas-Element. Mesh = 3D-Objekt aus Geometry (Form) + Material (Aussehen).
Einleitung
In diesem Projekt wurden 27 Gebäude als interaktive 3D-Modelle erstellt — ausschließlich durch
Textanweisungen an ein KI-Sprachmodell
Ein neuronales Netzwerk, das auf riesigen Textmengen trainiert wurde und Sprache verstehen und erzeugen kann. Es verarbeitet keine Bilder, sondern nur Zeichenfolgen (Tokens). Das hier verwendete Modell ist Claude von Anthropic.
Dieses Dokument erklärt transparent, wie eine KI zu geometrischen Entscheidungen kommt, obwohl sie weder sieht noch räumlich denkt.
Woher kommt das Wissen?
Architektonisches Vorwissen
Ein Sprachmodell hat während seines Trainings Milliarden von Texten verarbeitet — darunter
Architekturbeschreibungen, Bauanleitungen, Wikipedia-Artikel, Geometrie-Lehrbücher und
Programmier-Tutorials. Daraus entsteht kein Bild eines Gebäudes, sondern ein
statistisches Muster
Das Modell speichert keine Fakten als Datenbank, sondern als Wahrscheinlichkeitsverteilungen: „Nach dem Wort Satteldach kommen oft Wörter wie Giebel, First, Neigung, Sparren." Aus diesen Kookkurrenzen Das gemeinsame Auftreten von Wörtern in Texten. Wenn „Satteldach" immer wieder zusammen mit „Giebel", „First" und „Sparren" vorkommt, lernt das Modell eine statistische Verbindung zwischen diesen Begriffen. So entsteht implizites Wissen über Zusammenhänge, ohne dass die Bedeutung explizit gespeichert wird.
- „Ein Einfamilienhaus hat typischerweise 2 Stockwerke, ein Satteldach, Fenster und eine Haustür."
- „Ein Iglu ist halbkugelförmig. Die Inuit bauen einen Tunneleingang."
- „Der Eiffelturm hat 4 geschwungene Beine, die sich nach oben verjüngen, 3 Plattformen, und eine Antenne."
Geometrische Abstraktion
Der zentrale kognitive Schritt ist die Übersetzung von architektonischem Sprachwissen in geometrische Formen. Dabei nutzt die KI ein implizites Regelwerk:
| Architektonischer Begriff | Geometrische Abstraktion | Three.js-Umsetzung |
|---|---|---|
| Wand, Mauer | Quader
Quader (Box)
Geometrie
Ein dreidimensionaler Körper mit 6 rechteckigen Flächen. Definiert durch Breite, Höhe und Tiefe. Der grundlegendste Baustein der 3D-Modelle. Wikipedia: Quader (dünn in Tiefenrichtung) |
BoxGeometry(w, h, 0.3) |
| Satteldach | Dreiecks-Extrusion
Extrusion (Sweep)
Geometrie
Ein 2D-Profil (hier: ein Dreieck) wird entlang einer Achse „gezogen", um einen 3D-Körper zu erzeugen. Das Dreiecksprofil wird zur Dachform, die Tiefe ergibt die Dachlänge. Wikipedia: Extrusion |
ExtrudeGeometry(dreieck, {depth}) |
| Kuppel, Iglu | Halbkugel
Halbkugel (Hemisphere)
Geometrie
Die obere Hälfte einer Kugel. In Three.js erzeugt man sie mit |
SphereGeometry(r, ..., 0, PI/2) |
| Turm, Schornstein | Zylinder
Zylinder
Geometrie
Ein Rotationskörper mit kreisförmiger Grund- und Deckfläche. Durch unterschiedliche Radien oben/unten entstehen Kegelstümpfe (z. B. für verjüngte Türme). Wikipedia: Zylinder oder KegelstumpfKegelstumpf (Frustum)
Geometrie
Ein Kegel, dem die Spitze abgeschnitten wurde. Entsteht in Three.js durch |
CylinderGeometry(rTop, rBottom, h) |
| Fenster | Ebene
Ebene (Plane)
Geometrie
Eine flache, zweidimensionale Fläche im 3D-Raum. Für Fenster wird sie knapp vor die Wand gesetzt (z-Offset +0.01), mit einer halbtransparenten, bläulichen Materialeigenschaft. auf der Wand (z + 0.01) |
PlaneGeometry(w, h) |
| Spitzdach, Turmspitze | Kegel
Kegel (Cone)
Geometrie
Ein Rotationskörper, der von einer Kreisfläche zu einem Punkt zuläuft. Durch den Parameter |
ConeGeometry(r, h, segments) |
| Pyramide | Kegel mit 4 Segmenten | ConeGeometry(r, h, 4) |
Der Erzeugungsprozess
Von der Sprache zum 3D-Code
Wenn der Prompt „Erstelle eine gotische Kirche" lautet, durchläuft die KI folgende implizite Schritte:
Die kleinste Einheit, die ein Sprachmodell verarbeitet. Ein Token ist oft ein Wort oder Wortteil (z. B. „Gebäude" = 1 Token, „BoxGeometry" = 2 Tokens). Das Modell sagt immer nur das nächste Token vorher.
Wikipedia: Tokenisierung , wobei jedes Token auf allen vorherigen basiert. Die „Planung" emergiertEin komplexes Verhalten, das aus dem Zusammenspiel einfacher Regeln entsteht, ohne explizit programmiert zu sein. Bei Sprachmodellen: Die Fähigkeit, Code zu planen oder Architektur zu beschreiben, wurde nie direkt trainiert — sie „entsteht" (emergiert) aus dem Vorhersagen des nächsten Tokens.
Wikipedia aus dem Generierungsprozess selbst.Dekomposition: Gebäude in Teile zerlegen
Die KI zerlegt jedes Gebäude in eine Hierarchie von Bestandteilen. Dies entspricht dem
architektonischen Prinzip der Baukörpergliederung
Die Zerlegung eines Gebäudes in seine volumetrischen Hauptkörper. Jeder Baukörper wird separat modelliert und dann räumlich korrekt angeordnet. Beispiel: Ein Haus = Grundkörper + Dachkörper + Anbau.
// Dekomposition einer gotischen Kirche:
// 1. Hauptschiff (langer Quader)
// 2. Seitenschiffe (2 niedrigere Quader, links/rechts)
// 3. Dach über Hauptschiff (Dreiecks-Extrusion)
// 4. Glockenturm (hoher Quader, vorne)
// 5. Turmspitze (Kegel, 4 Segmente = Pyramide)
// 6. Rosettenfenster (Kreis + Speichen)
// 7. Strebepfeiler (schmale Quader, außen)
// 8. Spitzbogenfenster (Rechteck + Dreieck)
// 9. Kreuz (2 gekreuzte Quader)
// 10. Portal (Ebene mit dunklem Material)
Diese Zerlegung basiert auf textuellem Wissen über gotische Architektur:
Der Begriff „Gotik" ist im Trainingskorpus Die Gesamtheit aller Texte, mit denen ein Sprachmodell trainiert wurde. Bei großen Modellen umfasst dies Milliarden von Webseiten, Büchern, Artikeln und Code-Repositories. Das Modell lernt daraus statistische Muster, speichert aber keine einzelnen Texte wörtlich.
Parametrischer Aufbau
Jedes Gebäude beginnt mit einem Parameterobjekt
Alle Maße werden als benannte Variablen definiert (Breite, Höhe, Stockwerke, Dachneigung etc.). Ändert man einen Parameter, passen sich alle abhängigen Teile automatisch an. Das ermöglicht schnelle Variationen.
const p = {
w: 6, // Breite in Welteinheiten
d: 5, // Tiefe
floorH: 2.8, // Stockwerkshöhe
roofH: 2.2, // Dachhöhe
floors: 2 // Anzahl Stockwerke
};
const h = p.floorH * p.floors; // Gesamthöhe berechnet sich
Die KI wählt diese Parameter auf Basis von proportionalem Wissen: Ein Stockwerk ist typischerweise ~2,8 m hoch, ein Satteldach hat eine Neigung von ca. 35–45°, eine Haustür ist ~2,1 m hoch und ~1,0 m breit. Dieses Wissen stammt aus Baubeschreibungen und Normen im Trainingskorpus.
Geometrische Primitiven als Vokabular
Die KI hat ein begrenztes „Vokabular" an Grundformen. Jedes noch so komplexe Gebäude wird aus
Kombinationen dieser Primitiven
Einfache Grundkörper, die als Bausteine für komplexere Formen dienen. In Three.js: Box, Sphere, Cylinder, Cone, Torus, Plane, Ring, Circle, sowie ExtrudeGeometry für beliebige 2D-Profile.
| Primitive | Three.js Klasse | Typische Verwendung |
|---|---|---|
| Quader | BoxGeometry | Wände, Decken, Böden, Balken, Stufen |
| Kugel / Halbkugel | SphereGeometry | Kuppeln, Baumkronen, Lampen |
| Zylinder | CylinderGeometry | Säulen, Türme, Schornsteine, Minarette |
| Kegel | ConeGeometry | Turmspitzen, Tannenbäume, Pyramiden |
| Torus (Ring) | TorusGeometry | Eisblock-Linien am Iglu, Geländerringe |
| Ebene | PlaneGeometry | Fenster, Türen, Boden, Glas, Schilder |
| Kreis | CircleGeometry | Rosettenfenster, Hundehütten-Eingang, Uhren |
| Ringfläche | RingGeometry | Uhren-Zifferblätter, Laufbahn, Uhr-Marker |
| Extrusion
ExtrudeGeometry
3D-Grafik
Die mächtigste Primitive: Man definiert ein beliebiges 2D-Profil (als |
ExtrudeGeometry |
Satteldächer, Sheddächer, A-Frames, Bögen |
| Shape-Geometrie
ShapeGeometry
3D-Grafik
Erzeugt eine flache 2D-Form im 3D-Raum aus einem beliebigen Pfad. Nützlich für Bögen, unregelmäßige Grundrisse oder den Wassergraben einer Burg (Rechteck mit rechteckigem Loch). |
ShapeGeometry |
Bögen, Wassergraben (mit Hole), Glasfronten |
Strategien je Gebäudetyp
Obwohl das Grundprinzip immer gleich ist (Primitive kombinieren), ergeben sich je nach Gebäudetyp unterschiedliche Strategien:
1. Einfache direkte Platzierung
Für Hundehütte und Iglu: 2–3 Primitive werden direkt positioniert. Keine Schleifen, keine komplexe Logik. Das Wissen „Hundehütte = Kasten + Dach + Loch" reicht.
// Hundehütte: 3 Teile
body = Box(1.6, 1.0, 1.8) // Kasten
roof = Extrude(dreieck) // Satteldach
door = Circle(0.35) // Rundes Loch
2. Repetitive Muster mit Schleifen
Wohnhäuser und Wolkenkratzer bestehen aus sich wiederholenden Elementen. Hier erzeugt eine
For-Schleife
Eine Kontrollstruktur, die einen Codeblock wiederholt ausführt. Ideal für Stockwerke, Fensterreihen, Säulen. for (let f = 0; f < floors; f++) erzeugt ein Element pro Stockwerk.
for (let f = 0; f < p.floors; f++) {
const y = f * p.floorH + p.floorH * 0.55;
for (let wx = 0; wx < 3; wx++) {
// Fenster in regelmäßigem Raster
addWindow(x, y, z);
// Balkon ab 1. OG
if (f > 0) addBalcony(x, f * p.floorH);
}
}
3. Trigonometrische Anordnung
Runde Strukturen wie das Stadion, das Kolosseum oder Burgtürme nutzen
Trigonometrie
Sinus und Cosinus berechnen Punkte auf einem Kreis. x = cos(winkel) * radius und z = sin(winkel) * radius platzieren Objekte gleichmäßig im Kreis — ideal für Säulenreihen, Zinnen, Balkon-Pfosten oder Stadion-Tribünen.
for (let a = 0; a < segments; a++) {
const angle = (a / segments) * Math.PI * 2;
const x = Math.cos(angle) * radius;
const z = Math.sin(angle) * radius;
// Säule/Pfeiler an dieser Position
placePillar(x, z);
}
4. Wahrzeichen als Sonderfälle
Jedes Wahrzeichen erforderte eine individuelle Strategie:
| Wahrzeichen | Kernproblem | Lösung |
|---|---|---|
| Eiffelturm | Geschwungene, sich verjüngende Beine | Exponentialkurve
Exponentialkurve
Mathematik
Die Formel pow(1-t, 1.8) |
| Pyramiden | Pyramide als 3D-Form | ConeGeometry(r, h, 4) — ein Kegel mit nur 4 Seiten ist eine Pyramide |
| Schiefer Turm | Neigung des gesamten Bauwerks | Alle Teile in eine Gruppe
THREE.Group
3D-Grafik
Ein Container-Objekt, das mehrere 3D-Objekte zusammenfasst. Transformationen (Position, Rotation, Skalierung) auf die Gruppe wirken auf alle enthaltenen Objekte. Ideal, um ein ganzes Gebäude zu neigen. , danngroup.rotation.z = 0.07 |
| Kolosseum | Elliptische Anordnung mit 4 Stockwerken | Doppelte Schleife: for floors × for arches mit Ellipsen-Parametrisierung
Ellipsen-Parametrisierung
Mathematik
Eine Ellipse hat zwei verschiedene Radien (rx, rz). Punkte auf der Ellipse: |
| Taj Mahal | Oktagonale Symmetrie | Quadrat + 4 auf 45° gedrehte Quader an den Ecken erzeugen ein Oktagon
Oktagon (Achteck)
Geometrie
Ein regelmäßiges Achteck. Beim Taj Mahal entsteht der oktagonale Grundriss durch einen Quader mit 4 zusätzlichen, um 45° gedrehten Quadern an den Ecken — eine Approximation statt einer echten oktagonalen Geometrie. Wikipedia: Achteck |
| Sydney Opera | Organische Segelformen | Überlappende Kugelausschnitte
Kugelausschnitt (Sphere Segment)
Geometrie
Ein Teil einer Kugeloberfläche, definiert durch Start- und Endwinkel. |
Gegenüberstellung: Mensch vs. KI
Wie würde ein Mensch vorgehen, um den Eiffelturm oder die Oper als 3D-Modell zu erstellen? Und wie hat die KI es gemacht? Die Unterschiede sind grundlegend — und erhellend.
Am Beispiel: Eiffelturm
| Mensch (typischer Ablauf) | KI (tatsächlicher Ablauf) |
|---|---|
|
1. Referenzbilder suchen Google-Bildersuche, Pinterest, Fotos vom letzten Urlaub. Verschiedene Perspektiven studieren: Frontal, von unten, Seitenansicht, Grundriss. |
1. Kein Bild verfügbar Die KI hat nie ein Foto gesucht oder gesehen. Sie greift auf sprachliche Beschreibungen zurück: „4 Beine, die sich nach oben verjüngen", „Gitterstruktur aus Eisen", „3 Aussichtsplattformen". |
|
2. Proportionen abschätzen Mit dem Auge: Wie breit ist die Basis im Verhältnis zur Höhe? Wo sitzt die erste Plattform? Eventuell nachmessen mit Referenzzeichnungen. |
2. Proportionen aus Text ableiten Aus Wikipedia-artigem Wissen: „324 m hoch, Basis ca. 125 m breit, erste Etage bei 57 m, zweite bei 115 m." Diese Verhältnisse werden in Parameter übersetzt. |
|
3. Skizze / Konzept Auf Papier oder im Kopf: Die Grundform zeichnen. Die Kurve der Beine nachempfinden. Sich fragen: „Wie kriege ich diese Krümmung hin?" |
3. Geometrische Strategie wählen Die KI „weiß" (aus Trainingstexten über 3D-Grafik), dass geschwungene Formen durch viele kleine Segmente approximiert werden. Sie wählt: 20 Box-Segmente pro Bein, Position über Exponentialkurve. |
|
4. Modellieren In Blender, SketchUp oder ähnlich: Vertices ziehen, Flächen extrudieren, visuell kontrollieren. Ständiger Blick auf das Ergebnis. |
4. Code schreiben — blind Die KI schreibt for-Schleifen und Positionsberechnungen, ohne das Ergebnis jemals zu sehen. Ob es gut aussieht, erfährt sie erst durch menschliches Feedback.
|
|
5. Korrigieren Sieht komisch aus? Vertex verschieben, Proportion anpassen, Material ändern. Unmittelbares visuelles Feedback. |
5. Auf Feedback warten Der Mensch sagt: „Das ist eine Katastrophe." Die KI muss raten, was katastrophal ist, und wählt einen komplett anderen geometrischen Ansatz (Version 2 mit Exponentialkurve). |
Am Beispiel: Sydney Opera House
| Mensch | KI |
|---|---|
|
Sieht die Segeldächer und erkennt sofort die organische, schwer zu beschreibende Form. Würde in einem 3D-Programm NURBS-Flächen
NURBS (Non-Uniform Rational B-Splines)
3D-Grafik
Mathematische Flächen, die organische, fließende Formen exakt beschreiben. Werden in professioneller 3D-Software (Rhino, Blender) verwendet, sind aber in Three.js nicht direkt verfügbar. Wikipedia: NURBS verwenden oder Referenzfotos als Vorlage über die Szene legen. |
„Weiß" nur sprachlich, dass es Segelformen sind. Sucht nach der nächstliegenden verfügbaren Primitive: Kugelausschnitte (SphereGeometry mit begrenztem Winkel). Das Ergebnis ist eine Annäherung, keine exakte Form.
|
| Würde vermutlich ein existierendes 3D-Modell als Referenz oder Ausgangspunkt suchen (Thingiverse, Sketchfab, Google 3D Warehouse). | Hat keinen Zugriff auf 3D-Modell-Datenbanken. Hat während des Trainings auch keine 3D-Dateien geparst. Alle Geometrie wird aus Textbeschreibungen abgeleitet. |
Was heißt das?
Die Gegenüberstellung wirft interessante Fragen auf, die bewusst offengelassen werden:
- Wenn die KI den Eiffelturm nur aus Textbeschreibungen kennt — wie kommt es, dass das Ergebnis erkennbar ist? Reicht sprachliches Wissen für visuelles Verständnis?
- Hat die KI während des Trainings vielleicht indirekt Code von anderen 3D-Modellen des Eiffelturms „gesehen" (z. B. Three.js-Tutorials)? Wenn ja — ist das dann eigenes Wissen oder reproduziertes?
- Ein Mensch, der den Eiffelturm nie gesehen hat, aber viele Beschreibungen gelesen hat — könnte er ein erkennbares Modell bauen? Wäre das ein fairer Vergleich?
- Was geht verloren, wenn Architektur rein sprachlich vermittelt wird? Was kann nur visuell erfasst werden?
- Ist die KI-Methode „Primitiven kombinieren" näher an der Art, wie Kinder mit Bauklötzen bauen, als an professionellem 3D-Modelling?
Der Kernunterschied
Der Mensch arbeitet visuell-iterativ: Er sieht ein Bild, modelliert, schaut ob es stimmt, korrigiert. Die KI arbeitet sprachlich-generativ: Sie erzeugt Code aus Sprachmustern, ohne das Ergebnis je zu sehen. Der Mensch im Dialog übernimmt die Rolle der „Augen" und steuert nach.
Grenzen & Reflexion
Was die KI gut kann
- Geometrische Grundkörper korrekt parametrisieren und positionieren
- Architektonische Proportionen aus Textwissen ableiten
- Repetitive Muster effizient durch Schleifen erzeugen
- Mathematische Funktionen (Trigonometrie, Exponentialfunktionen) für organische Formen einsetzen
Was die KI nicht kann
- Visuell prüfen: Die KI sieht das Ergebnis nie. Sie kann nicht erkennen, ob etwas „gut aussieht" oder ob ein Fenster falsch positioniert ist.
- Echte Architektur: Die Modelle sind Karikaturen — erkennbar, aber nicht maßstabsgetreu oder bauphysikalisch korrekt.
- Feinste Details: Ornamente, Texturen, realistische Materialien und Lichtbrechung sind mit diesem Ansatz kaum möglich.
- Organische Formen: Die Segeldächer der Oper oder die Eiffelturm-Beine sind Annäherungen — eine Bildhauerin wäre präziser.
Der Dialog: Mensch und KI
Die Gebäude entstanden nicht in einem einzigen Prompt, sondern in einem iterativen Dialog über mehrere Runden:
- Runde 1 — Grundstruktur
Prompt: „Erstelle eine Galerie mit 7 Gebäuden von einfach bis komplex."
Ergebnis: 7 Gebäude (Hundehütte bis Wolkenkratzer), Galerie-UI mit Overlay-Viewer. - Runde 2 — Erweiterung
Prompt: „6 weitere komplexe Gebäude + 8 berühmte Wahrzeichen."
Ergebnis: 14 neue Gebäude. Hier musste die KI für jedes Wahrzeichen eine individuelle geometrische Strategie finden. - Runde 3 — Korrektur & Spezialisierung
Prompt: „Der Eiffelturm ist eine Katastrophe. Erstelle 6 skandinavische Häuser."
Ergebnis: Eiffelturm komplett neu (Exponentialkurve statt starre Boxen), 6 detaillierte moderne Häuser. - Runde 4 — Redesign
Prompt: „Landing Page, Galerie mit Grundrissen aufteilen, Stadtbaukasten erstellen."
Ergebnis: 3 separate Seiten, komplette Umgestaltung des visuellen Designs. - Runde 5 — Reflexion
Prompt: „Erkläre, wie du vorgegangen bist."
Ergebnis: Dieses Dokument.
Der Mensch steuert das Was (welche Gebäude, welcher Stil, welche Korrekturen).
Die KI entscheidet das Wie (welche Primitiven, welche mathematischen Funktionen,
welche Code-Struktur). Das Ergebnis ist eine echte Mensch-KI-Kollaboration
Eine Arbeitsweise, bei der Mensch und KI komplementäre Stärken einbringen: Der Mensch hat die Vision, das ästhetische Urteil und die Domänenexpertise. Die KI hat die Fähigkeit, aus textuellen Beschreibungen schnell funktionierenden Code zu erzeugen. Keiner von beiden könnte das Ergebnis allein so schnell erreichen.