Wie 3D ins Web kommt

Worum es geht: Ein Sofa in der Wunschfarbe drehen, eine Halle auf die eigenen Maße ziehen, ein Fenster mit anderem Rahmen ansehen – direkt im Browser, ohne App. In dieser Lektion erfahren Sie, wie 3D überhaupt auf eine Website kommt, aus welchen Bausteinen jede 3D-Szene besteht und warum Ladezeit das wichtigste Thema ist. Die folgenden Lektionen gehen dann Schritt für Schritt in die Praxis.

1. Was 3D im Web leisten kann

Der Nutzen für Unternehmen: Hunderte Varianten lassen sich nicht fotografieren, aber in 3D in Echtzeit zeigen. Und Anfragen kommen nicht mehr als „Bitte um ein Angebot“, sondern mit Maßen, Material und Ausstattung.

2. Der Weg vom Modell auf die Website

1. Modellieren: Aus CAD-Daten oder neu in einem 3D-Programm wie Blender entsteht das Modell.
2. Optimieren: CAD-Modelle sind für die Fertigung gebaut und viel zu detailliert. Unsichtbares fliegt raus, Flächen werden vereinfacht, Texturen verkleinert.
3. Exportieren: Gespeichert wird als glTF beziehungsweise GLB – das offene Format gilt als „JPEG für 3D“.
4. Einbinden: Im Browser zeichnet die Bibliothek Three.js das Modell über WebGL, die Grafikschnittstelle aller modernen Browser. Kein Plugin, keine App.

3. Die 5 Bausteine jeder 3D-Szene

Stellen Sie sich ein Fotostudio vor – genau so ist jede 3D-Darstellung aufgebaut:

4. Ein erster Blick in den Code

So sieht ein Konfigurator im Kern aus. Sie müssen das jetzt nicht verstehen – in der nächsten Lektion bauen Sie genau diese Szene selbst und können jeden Wert live verändern.

const szene = new THREE.Scene();                        // das Studio
const kamera = new THREE.PerspectiveCamera(45, breite / hoehe, 0.1, 100);
const renderer = new THREE.WebGLRenderer({ antialias: true });

loader.load("/modelle/sessel.glb", (datei) => {         // Produkt laden
  szene.add(datei.scene);
});

function farbeWechseln(farbe) {                         // der "Konfigurator"
  szene.getObjectByName("Bezug").material.color.set(farbe);
}

renderer.setAnimationLoop(() => renderer.render(szene, kamera));  // 60× pro Sekunde zeichnen

Die Konfiguration selbst ist überraschend einfach: Ein Teil des Modells hat einen Namen – hier „Bezug“ – und bei einem Klick bekommt es eine neue Farbe. Genauso werden Materialien getauscht, Teile ein- und ausgeblendet oder Maße verändert.

5. Das wichtigste Thema: Ladezeit

Das größte Risiko ist nicht die Technik, sondern die Dateigröße. Ein unbearbeitetes CAD-Modell kann über 100 MB groß sein – viel zu schwer für ein Smartphone.

• Polygone reduzieren: Schrauben im Inneren sieht niemand.
• Geometrie komprimieren mit Draco.
• Texturen verkleinern mit KTX2 oder WebP.
• Erst laden, wenn nötig – und vorher ein Vorschaubild zeigen.

Wie das genau geht, lernen Sie in der Lektion „Performance und Optimierung“.

6. Und die Barrierefreiheit?

Ein 3D-Modell allein ist ohne Maus oder bei Sehbehinderung nicht bedienbar. Gute Konfiguratoren bieten alle Optionen zusätzlich als normale, per Tastatur bedienbare Knöpfe und eine Textzusammenfassung. Dazu gibt es am Ende des Kurses eine eigene Lektion.

7. Was kostet so etwas?

Die größten Kostentreiber sind die Zahl der Varianten, die Qualität der vorhandenen 3D-Daten und Schnittstellen zu Warenwirtschaft oder CRM.

Übung

1. Nennen Sie die fünf Bausteine einer 3D-Szene und ihr Gegenstück im Fotostudio.
2. Warum wird ein CAD-Modell nicht direkt auf die Website geladen?
3. Welches Dateiformat nutzt man für 3D im Web – und warum?
4. Ein Möbelhändler hat 40 Stoffe und 3 Größen pro Sofa. Welche Stufe aus Abschnitt 1 passt?