Schritt für Schritt

Wie eine KI den Schiefen Turm von Pisa baut

Ein vollständiges Protokoll aller Gedankenschritte, Begriffsfindungen, gespeicherten Beschreibungen und geometrischen Entscheidungen — vom ersten Wort bis zum fertigen 3D-Modell.

Ergebnis — Interaktives 3D-Modell (Maus: drehen, Scroll: zoomen)
Schiefer Turm von Pisa — gebaut aus ca. 180 einzelnen Geometrie-Primitiven, rein aus Textbeschreibungen abgeleitet.

Phase 0: Was bekommt die KI?

Die KI erhält einen einzigen Satz: „Erstelle den Schiefen Turm von Pisa." Dazu den Kontext, dass es sich um ein Three.js

Three.js
Technologie

Eine JavaScript-Bibliothek für 3D-Grafik im Browser. Sie stellt Funktionen bereit, um Szenen mit Kamera, Licht und 3D-Objekten zu erstellen. Jedes Objekt besteht aus einer Geometry (Form) und einem Material (Aussehen). Three.js nutzt WebGL, eine Schnittstelle zum Grafikprozessor.

threejs.org -3D-Modell handeln soll, das im Browser läuft. Kein Bild, keine Zeichnung, keine 3D-Datei.

Was passiert jetzt im Modell?

Phase 1: Begriffsfindung — Was „weiß" die KI?

Das Sprachmodell durchsucht keine Datenbank. Stattdessen aktiviert der Begriff „Schiefer Turm von Pisa" ein Netzwerk von Assoziationen

Assoziationen im neuronalen Netzwerk
KI-Konzept

Während des Trainings hat das Modell gelernt, welche Wörter häufig zusammen auftreten. „Pisa" aktiviert ein Cluster von Begriffen wie „schief", „Turm", „Toskana", „Marmor", „Arkaden", „romanisch", „Glockenturm". Diese Aktivierungen formen gemeinsam das „Wissen" über das Bauwerk.

, die während des Trainings gespeichert wurden. Hier ist alles, was die KI zu diesem Bauwerk „abruft":

Architekturwissen:

  • Freistehender Kampanile
    Kampanile
    Architektur

    Ein freistehender Glockenturm, typisch für italienische Kirchen. Der Turm von Pisa ist der Kampanile des Doms von Pisa. Er steht separat vom Hauptgebäude.

    Wikipedia     (Glockenturm) des Doms von Pisa
  • Runder Grundriss (zylindrisch, nicht eckig)
  • 8 Stockwerke insgesamt
  • Erdgeschoss: geschlossener Zylinder mit Blendarkaden
  • 6 offene Arkadengeschosse mit umlaufenden Säulengalerien
  • Oberstes Geschoss: kleinere Glockenstube
  • Neigung: ca. 3,97° (heute stabilisiert)
  • Höhe: ca. 56 m (auf der niedrigen Seite ca. 55,86 m)
  • Material: weißer Carrara-Marmor
    Carrara-Marmor
    Material

    Ein hochwertiger weißer Marmor aus der Toskana. Er gibt dem Turm seine charakteristische helle, leicht gelbliche Färbung. Im 3D-Modell simuliert durch ein helles Material mit niedriger Rauheit (roughness: 0.4).

    Wikipedia
  • Stil: Pisaner Romanik
    Pisaner Romanik
    Architektur

    Ein lokaler Baustil der Romanik, geprägt von übereinanderliegenden offenen Säulengalerien (Loggien). Dieser Stil findet sich am Dom, am Turm und am Baptisterium auf dem Piazza dei Miracoli.

    Wikipedia     (offene Loggien als Fassadengestaltung)
  • Umgebung: Piazza dei Miracoli mit Dom, Baptisterium, Camposanto

Proportionen (aus Textquellen im Training):

  • Außendurchmesser am Fuß: ca. 15,5 m → Radius ~7,75 m
  • Außendurchmesser oben: ca. 14,14 m (leicht verjüngt)
  • Wandstärke: ca. 2,4 m
  • Jede Arkadenreihe: ca. 30 Säulen (je nach Geschoss)
  • Glockenstube: kleiner, 12 Säulen
Woher kommt dieses Wissen?

Die KI hat während des Trainings Wikipedia-Artikel, Reiseführer, Architekturlehrbücher und Webseiten über den Turm von Pisa verarbeitet. Kein einzelner Text wird gespeichert — stattdessen sind die Fakten als Gewichte im neuronalen Netzwerk kodiert. Die KI kann nicht sagen „Das steht auf Seite 47 von Buch X". Sie „weiß es einfach" — oder genauer: die Wahrscheinlichkeit, dass nach „Turm von Pisa" Wörter wie „8 Stockwerke", „rund", „Marmor", „Arkaden" folgen, ist sehr hoch.

Phase 2: Geometrische Dekomposition

Jetzt beginnt die eigentliche Übersetzungsarbeit: Wie bilde ich dieses sprachliche Wissen in geometrische Primitiven

Geometrische Primitive
3D-Grafik

Einfache Grundkörper: Quader (Box), Kugel (Sphere), Zylinder (Cylinder), Kegel (Cone), Ebene (Plane), Torus (Ring). In Three.js wird jedes 3D-Objekt aus diesen Grundformen zusammengesetzt.

ab?

„Runder Grundriss" → Der Turm ist ein Zylinder, kein Quader.

„8 Stockwerke" → Ich brauche eine Schleife, die 8 Ebenen übereinander baut.

„Offene Arkaden" → Jedes Geschoss hat einen inneren Kernzylinder (die Wand) und äußere Säulen (einzelne dünne Zylinder im Kreis).

„Neigung" → Ich baue alles in eine THREE.Group und neige die gesamte Gruppe.

Die Zerlegung in Bauteile

Die KI identifiziert folgende Bauteile, die jeweils einer oder mehreren Primitiven entsprechen:

Bauteil → Geometrie-Zuordnung:

  1. Erdgeschoss → ein geschlossener Zylinder (dicker, breiter)
  2. Blendarkaden am Erdgeschoss → 20 dünne Zylinder vertikal auf der Außenfläche
  3. Eingangsportal → eine dunkle Ebene (Plane) auf der Zylinderfläche
  4. 6 Arkadengeschosse (je):
    • Boden-/Deckplatte: flacher Zylinder (Scheibe)
    • Innerer Kernzylinder (tragende Wand)
    • 16 äußere Säulen: dünne Zylinder im Kreis angeordnet
    • Kapitelle oben an jeder Säule: minimal dickerer Zylinder
    • Basen unten: ebenso
    • Bogenring zwischen den Säulen: Torus
      Torus (Ringform)
      Geometrie

      Ein ringförmiger Körper, wie ein Donut. TorusGeometry(radius, tubeRadius, radialSegments, tubularSegments). Hier als vereinfachte Darstellung der Rundbögen zwischen den Säulen verwendet.

      Wikipedia      -Ring (vereinfacht)
  5. Glockenstube → wie ein Arkadengeschoss, aber kleiner (12 statt 16 Säulen, kleinerer Radius)
  6. Kuppel der Glockenstube → Halbkugel (SphereGeometry mit phiLength = PI/2)
  7. Kreuz an der Spitze → vertikaler Zylinder + horizontaler Quader
  8. Neigung des gesamten Turms → Group.rotation.z = 0.07 (ca. 4°)

Phase 3: Parameter definieren

Bevor eine einzige Zeile Geometrie-Code geschrieben wird, legt die KI die Maße fest:

const p = {
  r: 2.8,        // Radius des Turms in Welteinheiten
  h: 18,         // Gesamthöhe (nicht realistisch, aber proportional)
  floors: 8,     // 8 Stockwerke
  floorH: 2.25,  // Höhe pro Stockwerk
  tilt: 0.07,    // Neigungswinkel in Radiant (≈ 4°)
  colCount: 16   // Säulen pro Geschoss (vereinfacht von 30)
};
Warum 16 Säulen statt 30?

Der echte Turm hat ca. 30 Säulen pro Geschoss. Im 3D-Modell wären so viele Säulen visuell kaum unterscheidbar und würden die Performance belasten. 16 Säulen erzeugen den gleichen Eindruck einer umlaufenden Kolonnaden-Galerie. Dies ist eine bewusste Vereinfachung zugunsten der Lesbarkeit — das Modell soll erkennbar, nicht maßstabsgetreu sein.

Woher kommen die konkreten Zahlenwerte?

Die KI kennt keine exakte Umrechnung „56 m reale Höhe = X Welteinheiten". Stattdessen denkt sie in Proportionen:

  • Der Turm ist etwa 3–4x so hoch wie er breit ist → h = 18, r = 2.8 (Durchmesser 5.6, Verhältnis ~3.2)
  • Die Neigung ist subtil, aber deutlich sichtbar → 0.07 Radiant
    Radiant (rad)
    Mathematik

    Winkelmaß in der Mathematik. Ein voller Kreis = 2π rad ≈ 6.28 rad. 0.07 rad ≈ 4°. In Three.js werden alle Winkel in Radiant angegeben, nicht in Grad. Umrechnung: grad * Math.PI / 180.

    Wikipedia     ≈ 4° wurde mehrfach getestet: 0.05 sah zu gerade aus, 0.1 sah aus wie kurz vor dem Einsturz
  • Stockwerkshöhe 2.25 → 8 × 2.25 = 18 (passt zur Gesamthöhe)

Phase 4: Aufbau von unten nach oben

Die KI generiert den Code in einer festen Reihenfolge: von unten nach oben, von grob nach fein.

Schritt 4.1: Gruppierung für die Neigung

const towerGroup = new THREE.Group();
towerGroup.rotation.z = p.tilt;  // 0.07 rad ≈ 4° Neigung
scene.add(towerGroup);
// Ab jetzt wird alles zu towerGroup hinzugefügt, nicht zu scene.
// So neigt sich der gesamte Turm als Einheit.

Dies ist eine grundlegende Entscheidung: Die Neigung wird nicht bei jedem Bauteil einzeln berechnet, sondern als Transformation

Transformation
3D-Grafik

Eine Veränderung der Position, Rotation oder Skalierung eines Objekts. In Three.js hat jedes Objekt die Eigenschaften .position (Verschiebung), .rotation (Drehung) und .scale (Größe). Transformationen auf eine Gruppe wirken auf alle enthaltenen Objekte.

auf die übergeordnete Gruppe angewandt. Alles innerhalb der Gruppe wird automatisch mitgeneigt.

Schritt 4.2: Erdgeschoss

// Massiver Zylinder, etwas breiter als die oberen Geschosse
const base = new THREE.Mesh(
  new THREE.CylinderGeometry(
    p.r,         // Radius oben: 2.8
    p.r + 0.4,   // Radius unten: 3.2 (leicht breiter = stabiler)
    p.floorH * 1.5,  // 1.5x Normalhöhe (EG ist höher)
    24           // 24 Segmente für einen glatten Kreis
  ),
  marbleMat     // Helles, leicht glänzendes Material
);
base.position.y = p.floorH * 0.75;  // Anheben, damit Boden bei y=0
towerGroup.add(base);

Warum ist das Erdgeschoss breiter und höher?

Aus dem Sprachwissen: „Das Erdgeschoss des Turms hat keine offenen Arkaden wie die oberen Stockwerke. Es ist ein geschlossener Zylinder mit dekorativen Blendarkaden." Also: dicker, geschlossen, etwas massiver. Der leicht breitere untere Radius (r + 0.4) erzeugt einen subtilen Anlauf

Anlauf (Entasis)
Architektur

Eine leichte Verdickung am unteren Teil einer Säule oder eines Bauwerks. Sie erzeugt optisch den Eindruck von Stabilität und Standfestigkeit. Beim Turm von Pisa ist die Basis tatsächlich etwas breiter als die oberen Geschosse.

, der das Fundament betont.

Schritt 4.3: Blendarkaden am Erdgeschoss

// 20 dekorative Halbsäulen auf der Außenwand
for (let c = 0; c < 20; c++) {
  const angle = (c / 20) * Math.PI * 2;  // Gleichmäßig im Kreis
  const col = new THREE.Mesh(
    new THREE.CylinderGeometry(0.08, 0.08, p.floorH * 1.2, 6),
    darkMat
  );
  col.position.set(
    Math.cos(angle) * (p.r + 0.02),  // x: auf dem Kreisrand
    p.floorH * 0.7,                   // y: vertikal zentriert
    Math.sin(angle) * (p.r + 0.02)   // z: auf dem Kreisrand
  );
  towerGroup.add(col);
}

Wie werden die Säulen im Kreis verteilt?

Das ist die Kernmathematik für alle runden Anordnungen. Für jede der 20 Säulen berechnet die KI einen Winkel:

  • Säule 0: Winkel = 0° → Position (r, 0, 0) = rechts
  • Säule 5: Winkel = 90° → Position (0, 0, r) = vorne
  • Säule 10: Winkel = 180° → Position (-r, 0, 0) = links
  • Säule 15: Winkel = 270° → Position (0, 0, -r) = hinten

cos(winkel) * radius gibt die X-Koordinate, sin(winkel) * radius die Z-Koordinate. Dies ist die Parameterdarstellung eines Kreises

Parameterdarstellung eines Kreises
Mathematik

Ein Punkt auf einem Kreis mit Radius r und Mittelpunkt (0,0) hat die Koordinaten:
x = cos(t) · r
y = sin(t) · r
wobei t von 0 bis 2π läuft. Für n gleichmäßig verteilte Punkte: t = (i/n) · 2π.

Wikipedia.

Schritt 4.4: Die 6 Arkadengeschosse

for (let f = 1; f <= 6; f++) {
  const fy = p.floorH * 1.5 + (f - 1) * p.floorH;

  // 1. Bodenscheibe (Gesims zwischen Geschossen)
  towerGroup.add( Cylinder(r + 0.25, r + 0.25, 0.12) at y=fy );

  // 2. Innerer Kernzylinder (tragende Wand)
  towerGroup.add( Cylinder(r - 0.9, r - 0.9, floorH) at y=fy+h/2 );

  // 3. 16 Säulen im Kreis
  for (let c = 0; c < 16; c++) {
    // Position via cos/sin
    // + Kapitell oben (0.12 breit, 0.1 hoch)
    // + Basis unten (0.10 breit, 0.08 hoch)
  }

  // 4. Deckplatte
  towerGroup.add( Cylinder(r + 0.2, ...) at y=fy+floorH );

  // 5. Bogenring (Torus als vereinfachte Arkade)
  towerGroup.add( Torus(r - 0.1, 0.03) at y=fy+floorH-0.2 );
}

Warum wird jedes Geschoss gleich behandelt?

Die KI erkennt: Die 6 mittleren Geschosse des echten Turms sind nahezu identisch. Daher eine einzelne for-Schleife, die dasselbe Muster 6x wiederholt. Jede Iteration erzeugt ~25 Objekte (1 Kernzylinder + 16 Säulen + 16 Kapitelle + 16 Basen + 2 Scheiben + 1 Torus = 52 Objekte pro Geschoss).

Gesamtzahl Objekte aus der Schleife: 6 × 52 = 312 Geometrien nur für die Arkaden.

Schritt 4.5: Glockenstube

Die Glockenstube ist nicht identisch mit den anderen Geschossen:

  • Kleinerer Radius (r - 0.6 statt r)
  • Weniger Säulen (12 statt 16)
  • Abgeschlossen mit einer Halbkugel als Dach

Deshalb wird sie außerhalb der Hauptschleife separat gebaut — mit eigenen Parametern.

Schritt 4.6: Halbkugelkuppel

const bellDome = new THREE.Mesh(
  new THREE.SphereGeometry(
    bellR,       // Radius der Kuppel
    16,          // Horizontale Segmente
    10,          // Vertikale Segmente
    0,           // Start-Horizontalwinkel
    Math.PI * 2, // Voller Kreis horizontal
    0,           // Start-Vertikalwinkel (= Nordpol)
    Math.PI / 2  // NUR obere Hälfte (0 bis 90°)
  ),
  marbleMat
);
bellDome.position.y = bellY + p.floorH;

Die Kuppel der Glockenstube ist keine vollständige Kugel, sondern nur die obere Hälfte. Der Parameter phiLength = Math.PI / 2 begrenzt die Kugel vom Nordpol (oben) bis zum Äquator. So entsteht eine Schale, die auf dem zylindrischen Glockenturm aufsitzt.

Schritt 4.7: Kreuz an der Spitze

// Vertikaler Stab: dünner Zylinder
Cylinder(0.03, 0.03, 0.8)  // r=3mm, h=80cm
// Horizontaler Querbalken: flacher Quader
Box(0.4, 0.05, 0.05)      // 40cm breit, 5cm hoch
// Material: Gold (color: 0xd4af37, metalness: 0.8)

Schritt 4.8: Umgebung

Ein isolierter Turm wirkt nicht wie Pisa. Die KI fügt hinzu:

  • Dom: Großer Quader + Satteldach (Dreiecks-Extrusion) + kleine Fassadensäulen
  • Baptisterium: Zylinder + Halbkugel + Kegel (die charakteristische dreistufige Silhouette)
  • Piazza: Helle Bodenfläche (sandfarben) + Rasenfläche drumherum

Die Umgebung wird nicht in die geneigte Gruppe gesetzt — nur der Turm neigt sich, der Dom steht gerade.

Phase 5: Material-Entscheidungen

Drei Materialien werden definiert:

  1. marbleMat: color: 0xf0ece0, roughness: 0.4 — Heller Marmor, leicht glänzend. Roughness 0.4 bedeutet: nicht spiegelglatt (das wäre 0.0), aber deutlich glatter als roher Stein (1.0).
  2. darkMat: color: 0xd8d0c0, roughness: 0.5 — Etwas dunklerer Ton für Gesimse und Bänder, damit sich die Geschosstrennung visuell abhebt.
  3. accentMat: color: 0xc8c0b0, roughness: 0.55 — Nochmals etwas dunkler für Kapitelle und Basen der Säulen.

Diese drei Abstufungen eines Farbtons erzeugen Tiefe ohne Textur. In der echten Realität würden Marmor-Texturen, Alterungsspuren und Lichtbrechung diesen Effekt erzeugen — hier reichen drei Grautöne.

Phase 6: Was die KI nicht weiß

Trotz des detaillierten Wissens gibt es Dinge, die die KI nicht aus Text ableiten kann:

  • Die genaue Kurvenform der Säulenkapitelle — romanische Kapitelle haben spezifische Blattornamente, die mit Primitiven nicht darstellbar sind.
  • Der genaue Weißton des Marmors — „weißer Marmor" kann 100 verschiedene Farbtöne bedeuten. Die KI wählt 0xf0ece0 (cremeweiß), was eine plausible, aber nicht verifizierte Annäherung ist.
  • Die leichte Banane-Krümmung — der echte Turm ist nicht gerade-geneigt, sondern hat eine leichte Gegenkrümmung in den oberen Geschossen (Korrekturversuche während des Baus). Das Modell zeigt eine einfache lineare Neigung.
  • Die Innenstruktur — der Turm hat eine Wendeltreppe im Inneren, die von außen nicht sichtbar ist und daher nicht modelliert wird.
  • Die genaue Säulenzahl — die KI „weiß" ungefähr 30, vereinfacht aber auf 16 ohne visuell prüfen zu können, ob das ausreicht.

Phase 7: Zusammenfassung der Generierungsstatistik

Kennzahl Wert
Einzelne 3D-Objekte (Meshes)~180
Verschiedene Primitive-Typen5 (Cylinder, Sphere, Torus, Box, Plane)
Verschiedene Materialien5 (3 Marmortöne, Gold, Dunkel)
Mathematische Konzepte3 (Trigonometrie, Radiant, Group-Transformation)
Schleifen im Code4 (Blendarkaden, Geschosse, Säulen, Glockenstube)
Architektonische Begriffe aktiviert12 (Kampanile, Arkade, Loggia, Marmor, Romanik, ...)
Vereinfachungen gegenüber Realität5 (Säulenzahl, Kapitellform, Krümmung, Treppe, Textur)

Reflexion: Was dieses Protokoll zeigt

Kernaussage

Die KI baut keine Gebäude — sie übersetzt Sprache in Geometrie. Jeder Schritt in diesem Protokoll ist eine Übersetzung: „runder Grundriss" → Zylinder. „8 Stockwerke" → Schleife. „Neigung" → Gruppen-Rotation. „offene Arkaden" → Kern + Säulen im Kreis.

Die Qualität des Ergebnisses hängt davon ab, wie reich und präzise das sprachliche Wissen ist — und wie gut die verfügbaren Primitiven diese Beschreibung abbilden können.

Für den Unterricht

Dieses Protokoll eignet sich als Ausgangspunkt für Diskussionen:

  • Welche geometrischen Begriffe erkennen Schüler*innen wieder?
  • Welche Vereinfachungen fallen auf? Was fehlt am Modell?
  • Könnten Schüler*innen ein eigenes Gebäude als Primitiven-Liste beschreiben?
  • Was bedeutet es, dass eine KI „blind" baut — ohne das Ergebnis zu sehen?