Entwirf eine Lampe im Browser: Ein 3D-Konfigurator mit KI-Hilfe

Zwei Regler, eine andere Lampe

46 cm Schirmdurchmesser, insgesamt 36 cm hoch: Das ergibt eine breite, gedrungene Lampe. Ändere den Durchmesser auf 28 cm und die Höhe auf 60 cm. Dieselben Teile bilden jetzt eine viel schlankere Silhouette. Genau dafür haben wir diesen Konfigurator gebaut: Solche Entscheidungen sollen sofort sichtbar werden, ohne jede Variante einzeln zu zeichnen.

Unser Entwurf heißt Mora. Du kannst Proportionen, Farbe und Licht ändern, die Lampe drehen und von verschiedenen Seiten betrachten. Darunter steckt ein räumliches Netz, gezeichnet mit WebGL, einer Technologie für 3D-Grafik im Browser. Mora ist unser Beispiel zum Weiterentwickeln, kein tatsächlich angebotenes Produkt. Der Artikel beschreibt auch keinen Test eines bestimmten KI-Modells.

Wir beginnen mit Form und einigen Entscheidungen

Wenn du ein ähnliches Projekt bei einem Code schreibenden Modell beauftragst, beschreibe zuerst den Körper. Bei uns sind das ein abgerundeter Schirm wie ein Pilzhut, ein schlanker Stiel und ein niedriger Fuß. Die Form lässt sich durch Drehen eines Querschnitts um die senkrechte Achse erzeugen. Mehr Durchmesser verbreitert den Schirm; mehr Höhe hebt ihn an und verlängert den Stiel.

Danach legen wir fest, was sich verändern lässt. Mora hat zwei Regler, eine Palette mit eigener Farbauswahl, einen Lichtschalter und eine drehbare Ansicht. Die Farbe verändert die Keramikteile, die Metalldetails behalten ihren eigenen Ton. Zurücksetzen stellt alles wieder her, einschließlich der Kamera. Der folgende Prompt umfasst genau diesen Bereich: ein Konfigurator in einer Datei, ohne Shop, Anmeldung und externe Ressourcen.

Baue einen eigenständigen Tischlampen-Konfigurator in einer HTML-Datei, offline und ohne Bibliotheken.
Verwende WebGL: ein echtes 3D-Netz, Perspektive, Tiefenpuffer, Oberflächennormalen und Beleuchtung.
Modell: abgerundeter pilzförmiger Schirm, schlanker Stiel, niedriger Fuß, kleine Metalldetails und ein Kabel.
Steuerung: Schirmdurchmesser 28–46 cm (Standard 38), Lampenhöhe 36–60 cm (Standard 45), Keramikfarbe aus Palette und eigener Farbauswahl.
Ergänze einen Schalter für warmes Licht. Das Leuchten darf vereinfacht sein; beschreibe es nicht als photometrische Simulation.
Waagerechtes Ziehen dreht die Ansicht; am Computer ändert senkrechtes Ziehen den Blickwinkel. Ergänze Schaltflächen und alle vier Pfeiltasten als Tastaturalternative.
Keine automatische Drehung und keine Trägheit. Senkrechte Touchgesten sollen die Seite scrollen.
Zurücksetzen stellt Maße, Farbe, Licht und Kamera wieder her. Der PNG-Export speichert das aktuell gerenderte Canvas ohne Einstellungsfeld.
Ruhiges Produktstudio, matte Keramik, lesbare Maße, Bedienfeld neben der Szene und auf dem Handy darunter.
Unterstütze 320 px Bildschirmbreite, fehlendes WebGL und sichtbaren Fokus. Lade keine Fotos, Schriften oder Modelle aus dem Netz.

Woran erkennen wir, dass der Schirm rund ist?

Würden wir den ganzen Körper mit einer flachen Farbe bemalen, wäre ein Teil seiner Form kaum sichtbar. Helle Stellen und Schatten zeigen, wo sich die Oberfläche dreht. Das Programm berechnet sie unter anderem anhand von Normalen: Vektoren senkrecht zur Fläche, die ihre Ausrichtung angeben. In den Quellen unter dem Artikel findest du eine MDN-Erklärung mit WebGL-Beispiel.

Unsere Szene enthält Umgebungslicht, gerichtetes Studiolicht und einen dezenten Glanz. Beim Einschalten kommen eine warme Schirmunterseite und ein Leuchten auf dem Boden dazu. Der Schatten unter dem Fuß und das Leuchten sind vereinfacht. Sie helfen, die Form einzuschätzen. Ob eine echte Lampe den Schreibtisch ausreichend beleuchtet oder wie sie Licht in einem bestimmten Raum verteilt, lässt sich daraus nicht ablesen.

Dreh sie und schau unter den Schirm

Ziehe die Ansicht waagerecht und wechsle dann zur Draufsicht. Betrachte die Schirmkante, den Übergang zum Stiel und den Fuß. Stelle in deiner Version auch beide Maße auf die Extremwerte. Eine Lücke, ein abgetrenntes Teil oder eine verschwindende Fläche zeigt, wo du die Geometrie korrigieren musst. Einen solchen konkreten Fehler kannst du dem Modell für die nächste Änderung beschreiben.

Auf dem Handy liegt das Bedienfeld unter der Vorschau. Waagerechtes Wischen dreht die Lampe, senkrechtes Wischen scrollt die Seite. Den Blickwinkel änderst du über Schaltflächen. Du kannst die Vorschau auch per Tastatur ansteuern und die vier Pfeiltasten nutzen. Eine automatische Drehung gibt es nicht: Der eingestellte Ausschnitt bleibt stehen, auch bei aktivierter Einstellung für reduzierte Bewegung.

Welche Variante behalten wir?

Möchtest du eine bestimmte Ansicht festhalten, wähle „Diese Ansicht als PNG speichern“. Du bekommst ein Bild mit den aktuellen Maßen, Farbe, Licht und Blickwinkel, ohne Bedienfeld. Seine Auflösung hängt von der Vorschaugröße und der Bildschirmauflösung ab, deren Skalierung wir auf das Zweifache begrenzen. Das Speichern übernimmt canvas.toBlob, beschrieben in der verlinkten Dokumentation.

HTML eignet sich zum Weiterentwerfen. Es enthält den ganzen Konfigurator, allerdings mit den Anfangseinstellungen. Er läuft offline in einem WebGL-fähigen Browser. Soll deine Variante der neue Ausgangspunkt sein, trage sie im Objekt defaults im Skript ein.

Die Zentimeter beschreiben hier die Proportionen des Konzepts. Weder PNG noch das heruntergeladene HTML sind Fertigungsunterlagen. Für das Gespräch darüber, ob der Schirm breiter und die Keramik dunkler werden soll, hast du aber bereits etwas viel Praktischeres als eine reine Beschreibung.