Die erste 3D-Szene – 3D fürs Web – Grundlagen

Worum es geht: In dieser Lektion bauen Sie Ihre erste echte 3D-Szene. Statt trockener Theorie gibt es unten ein Live-Studio: Sie verschieben die Kamera, schalten das Licht aus, wechseln die Form – und sehen daneben sofort den Code, der das Bild erzeugt. Am Ende haben Sie eine vollständige HTML-Datei, die auf Ihrem Rechner läuft.

1. Kurze Erinnerung: das Fotostudio

Jede 3D-Szene besteht aus Szene (das Studio), Kamera (der Fotograf), Licht (die Lampen), Modell (das Produkt) und Renderer (der Auslöser). Genau diese fünf Dinge programmieren wir jetzt.

2. Wo ist oben? Das 3D-Koordinatensystem

Damit der Computer weiß, wo etwas steht, bekommt jede Position drei Zahlen:

Achse	Richtung	Farbe im Studio unten
x	nach rechts (negativ: links)	rot
y	nach oben (negativ: unten)	grün
z	auf Sie zu (negativ: nach hinten)	blau

Die Mitte der Welt ist (0, 0, 0). Die Kamera auf (0, 1.5, 5) steht also mittig, 1,5 Einheiten über dem Boden und 5 Einheiten vor dem Produkt.

3. Probieren Sie das Studio aus

Alles unten ist echtes Three.js. Jede Änderung passiert live – und rechts steht der dazugehörige Code.

3D-Studio · live

Kamera-Abstand (z): 5Kamera-Höhe (y): 1.5Sichtfeld: 45°Licht-Richtung: 45°

Farbe

Licht an Drahtgitter Drehen Achsen & Boden

Dieser Code erzeugt gerade das Bild links

const szene = new THREE.Scene();

// Kamera: Sichtfeld 45°, steht 5 vor und 1.5 über der Mitte
const kamera = new THREE.PerspectiveCamera(45, breite / hoehe, 0.1, 100);
kamera.position.set(0, 1.5, 5);
kamera.lookAt(0, 0, 0);

// Licht: weiches Grundlicht + gerichtete "Sonne"
szene.add(new THREE.HemisphereLight(0xffffff, 0x8890a8, 0.8));
const sonne = new THREE.DirectionalLight(0xffffff, 2.4);
sonne.position.set(2.8, 5, 2.8);
szene.add(sonne);

// Modell = Geometrie (Form) + Material (Oberfläche)
const modell = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshStandardMaterial({ color: "#4f5bff" })
);
szene.add(modell);

renderer.setAnimationLoop(() => {
  modell.rotation.y += 0.008;   // ein Stück weiterdrehen
  renderer.render(szene, kamera);   // Bild zeichnen
});

Vier kleine Missionen:

🔦 Licht aus! Entfernen Sie den Haken bei „Licht an“. Was passiert mit dem Modell – und warum?
📷 Ganz nah ran: Ziehen Sie den Kamera-Abstand auf 2. Wie verändert sich die Wirkung?
🔭 Tele oder Weitwinkel: Stellen Sie das Sichtfeld auf 20° und dann auf 90°. Welche Einstellung verzerrt stärker?
🕸️ Blick unter die Haut: Aktivieren Sie „Drahtgitter“ und wählen Sie die Kugel. Woraus besteht die Oberfläche?

4. Der Code Schritt für Schritt

Die Szene und die Kamera

Beispielcode

const szene = new THREE.Scene();

const kamera = new THREE.PerspectiveCamera(
  45,              // Sichtfeld in Grad – wie das Zoom-Objektiv
  breite / hoehe,  // Seitenverhältnis – sonst wird das Bild verzerrt
  0.1,             // alles näher als 0,1 wird nicht gezeichnet
  100              // alles weiter weg als 100 auch nicht
);
kamera.position.set(0, 1.5, 5);   // x, y, z
kamera.lookAt(0, 0, 0);           // Blick zur Mitte

Das Licht

Beispielcode

// Grundlicht von allen Seiten: Himmel hell, Boden etwas dunkler
szene.add(new THREE.HemisphereLight(0xffffff, 0x8890a8, 0.8));

// Gerichtetes Licht wie die Sonne – erzeugt helle und dunkle Seiten
const sonne = new THREE.DirectionalLight(0xffffff, 2.4);
sonne.position.set(3, 5, 3);
szene.add(sonne);

Farben schreibt man in Three.js oft als 0xffffff – das ist dasselbe wie #ffffff in CSS, nur als Zahl.

Das Modell: Form + Oberfläche

Beispielcode

const form = new THREE.BoxGeometry(1, 1, 1);                    // Geometrie: 1 × 1 × 1
const oberflaeche = new THREE.MeshStandardMaterial({ color: "#4f5bff" });  // Material
const wuerfel = new THREE.Mesh(form, oberflaeche);              // zusammen = Mesh
szene.add(wuerfel);

Ein Mesh ist immer Geometrie (wie sieht es aus?) plus Material (woraus ist es?). Dieselbe Form kann Holz, Metall oder Glas sein – nur das Material ändert sich.

Der Renderer und die Daumenkino-Schleife

Beispielcode

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);   // <canvas> in die Seite

renderer.setAnimationLoop(() => {
  wuerfel.rotation.y += 0.01;           // ein kleines Stück weiterdrehen
  renderer.render(szene, kamera);       // neues Bild zeichnen
});

Das ist wie ein Daumenkino: Etwa 60-mal pro Sekunde wird der Würfel ein winziges Stück gedreht und ein neues Bild gezeichnet. Ihr Auge sieht daraus eine flüssige Bewegung.

5. Zum Mitmachen: die komplette Datei

Speichern Sie den folgenden Code als index.html und öffnen Sie ihn im Browser. Three.js wird dabei direkt aus dem Internet geladen – Sie müssen nichts installieren.

Beispielcode

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Meine erste 3D-Szene</title>
  <style> body { margin: 0; } </style>
  <script type="importmap">
    { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.186.0/build/three.module.js" } }
  </script>
</head>
<body>
  <script type="module">
    import * as THREE from "three";

    const szene = new THREE.Scene();
    szene.background = new THREE.Color("#f6f7fb");

    const kamera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.1, 100);
    kamera.position.set(0, 1.5, 5);
    kamera.lookAt(0, 0, 0);

    szene.add(new THREE.HemisphereLight(0xffffff, 0x8890a8, 0.8));
    const sonne = new THREE.DirectionalLight(0xffffff, 2.4);
    sonne.position.set(3, 5, 3);
    szene.add(sonne);

    const wuerfel = new THREE.Mesh(
      new THREE.BoxGeometry(1.4, 1.4, 1.4),
      new THREE.MeshStandardMaterial({ color: "#4f5bff" })
    );
    szene.add(wuerfel);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(innerWidth, innerHeight);
    document.body.appendChild(renderer.domElement);

    // Bei Größenänderung des Fensters nicht verzerren
    addEventListener("resize", () => {
      kamera.aspect = innerWidth / innerHeight;
      kamera.updateProjectionMatrix();
      renderer.setSize(innerWidth, innerHeight);
    });

    renderer.setAnimationLoop(() => {
      wuerfel.rotation.y += 0.01;
      wuerfel.rotation.x += 0.004;
      renderer.render(szene, kamera);
    });
  </script>
</body>
</html>

Als Formel ansehen

In echten Projekten installiert man Three.js per npm install three und bindet es in ein Build-Werkzeug wie Vite oder Next.js ein. Die Import-Map oben ist die schnellste Variante zum Ausprobieren ohne Installation.

6. Die drei häufigsten Anfängerfehler

Sie sehen …	Wahrscheinliche Ursache	Lösung
ein schwarzes Modell	kein Licht in der Szene	Licht hinzufügen – oder zum Testen `MeshBasicMaterial` nutzen, das kein Licht braucht
gar nichts	Kamera steht im Modell oder schaut daneben	Kamera zurücksetzen, z. B. `position.set(0, 0, 5)` und `lookAt(0, 0, 0)`
ein gestrecktes Bild	Seitenverhältnis passt nicht zum Fenster	`kamera.aspect` anpassen und `updateProjectionMatrix()` aufrufen

Übung

Was passiert, wenn Sie in der kompletten Datei die Zeile mit der DirectionalLight löschen, das Grundlicht aber behalten?
Ändern Sie den Würfel in eine Kugel. Welche Zeile müssen Sie austauschen?
Die Kamera steht auf (0, 1.5, 5). Wohin müssen Sie sie setzen, um das Modell genau von oben zu sehen?
Warum dreht sich der Würfel, obwohl im Code nirgends „drehe dich für immer“ steht?

Lösungshinweise

Das Modell ist noch sichtbar, wirkt aber flach: Das Grundlicht beleuchtet von überall gleichmäßig, es fehlen die hellen und dunklen Seiten, die Form erkennbar machen.
Die Geometrie: new THREE.BoxGeometry(1.4, 1.4, 1.4) wird zu new THREE.SphereGeometry(0.9, 48, 32). Das Material bleibt gleich.
Direkt darüber, zum Beispiel kamera.position.set(0, 6, 0.01) mit lookAt(0, 0, 0). Der winzige z-Wert verhindert, dass die Kamera nicht weiß, wo „vorne“ ist.
Weil setAnimationLoop die Funktion etwa 60-mal pro Sekunde aufruft und jedes Mal ein kleines Stück Drehung dazukommt – das Daumenkino-Prinzip.

In der nächsten Lektion tauschen Sie den Würfel gegen ein echtes 3D-Modell im glTF-Format.