3D fürs Web – Grundlagen

Welches Dateiformat nutzt man für 3D im Web?

glTF bzw. GLB – das offene, kompakte „JPEG für 3D“.

WebGL oder Three.js – was ist was?

WebGL ist die Grafikschnittstelle des Browsers, Three.js die Bibliothek, die sie einfach bedienbar macht.

Welche 5 Bausteine hat jede 3D-Szene?

Szene · Kamera · Licht · Modell · Renderer.

Warum lädt man CAD-Modelle nicht direkt ins Web?

Sie sind zu detailliert und zu groß – sie werden reduziert und komprimiert (z. B. Draco, KTX2).

Welche Richtung zeigen x, y und z in Three.js?

x nach rechts, y nach oben, z auf den Betrachter zu.

Warum bleibt ein MeshStandardMaterial ohne Licht schwarz?

Es reagiert auf Licht – ohne Lichtquelle gibt es nichts zu reflektieren.

Woraus besteht ein Mesh?

Aus Geometrie (Form) und Material (Oberfläche).

Was macht renderer.setAnimationLoop?

Es ruft die Zeichenfunktion etwa 60-mal pro Sekunde auf – das Daumenkino-Prinzip.

Das Bild verzerrt beim Ändern der Fenstergröße – was tun?

kamera.aspect anpassen und kamera.updateProjectionMatrix() aufrufen.

Warum glTF als 3D-Format fürs Web?

Kompakt, offen, mit Materialien und Animationen – der Standard, den Three.js direkt lädt.

Was macht der GLTFLoader?

Lädt die Datei asynchron und liefert eine Szene, die man in die eigene einhängt – mit Rückruf für Fortschritt und Fehler.

Wie klein muss ein Modell sein?

Für die Startseite unter 1–2 MB: Draco-Kompression, reduzierte Polygone, Texturen als WebP oder KTX2.

Die drei wichtigsten Lichtarten?

Umgebungslicht (gleichmäßig), gerichtetes Licht (Sonne, wirft Schatten), Punktlicht (Lampe) – meist eine Kombination.

Was steuern Metalness und Roughness?

Metalness: Metall oder nicht. Roughness: matt bis spiegelnd – zusammen beschreiben sie fast jede reale Oberfläche.

Was bringt eine Umgebungskarte?

Reflexionen der Umgebung auf glänzenden Flächen – der größte Sprung zu realistischem Aussehen.

Was machen OrbitControls?

Drehen, Zoomen und Verschieben der Kamera per Maus und Touch – ohne eigene Mathematik.

Wie erkennt man einen Klick auf ein Objekt?

Mit einem Raycaster: ein Strahl von der Kamera durch die Mausposition, geschnitten mit den Objekten.

Warum Dämpfung (Damping) einschalten?

Die Bewegung läuft weich aus statt abrupt zu stoppen – wirkt hochwertig und ist angenehmer zu bedienen.

Was kostet in 3D am meisten Leistung?

Zu viele Dreiecke, zu große Texturen und zu viele Zeichenaufrufe – nicht die Bildschirmgröße.

Warum die Pixeldichte deckeln?

Bei Retina-Bildschirmen vervierfacht sich sonst die Pixelzahl – ein Deckel bei 1,5–2 spart die Hälfte der Arbeit.

Was ist Instancing?

Viele gleiche Objekte (Tasten, Schrauben) in einem einzigen Zeichenaufruf – aus hundert Aufrufen wird einer.

Der Kern eines Konfigurators?

Ein Zustand (Farbe, Größe, Option) und eine Funktion, die die Szene an diesen Zustand anpasst – nie umgekehrt.

Wie wechselt man die Farbe eines Teils?

Das Material des Meshes ändern (material.color.set) oder gegen ein vorbereitetes Material tauschen.

Wie kommt die Konfiguration zur Anfrage?

Als Zusammenfassung ins Formular oder in die URL – der Kunde schickt genau, was er gebaut hat.

Was braucht 3D für Barrierefreiheit mindestens?

Eine Textalternative, die das Gezeigte beschreibt, und alle Funktionen auch ohne Maus – per Tastatur oder Knöpfen.

Was tun bei „Bewegung reduzieren“?

Automatische Drehungen und Kamerafahrten abschalten, Standbild oder ruhige Ansicht zeigen.

Was, wenn WebGL fehlt?

Ein Bild oder Video als Rückfall anzeigen – die Seite muss auch ohne 3D vollständig nutzbar sein.