Zaprojektuj lampę w przeglądarce. Konfigurator 3D z pomocą AI

Dwa suwaki i inna lampa

Klosz o średnicy 46 cm, całość wysoka na 36 cm: wychodzi szeroka, przysadzista lampa. Zmieńcie teraz średnicę na 28 cm, a wysokość na 60 cm. Te same części układają się w dużo smuklejszą sylwetkę. Właśnie po to zrobiliśmy ten konfigurator — żeby takie decyzje dało się zobaczyć od razu, bez rysowania każdego wariantu osobno.

Nazwaliśmy nasz projekt Mora. Możecie zmieniać proporcje, kolor i światło, a potem obracać lampę i oglądać ją z różnych stron. Pod spodem jest przestrzenna siatka rysowana przez WebGL, technologię do grafiki 3D w przeglądarce. Mora jest naszym przykładem do rozwijania, nie prawdziwym produktem w sprzedaży. Artykuł nie opisuje też testu konkretnego modelu AI.

Zaczynamy od kształtu i kilku decyzji

Gdy zlecacie podobny projekt modelowi piszącemu kod, opiszcie najpierw bryłę. U nas to zaokrąglony klosz przypominający kapelusz grzyba, smukła nóżka i niska podstawa. Taki kształt można uzyskać przez obrót przekroju wokół pionowej osi. Zwiększenie średnicy poszerza klosz; zwiększenie wysokości podnosi go i wydłuża nóżkę.

Potem ustalamy, co użytkownik może zmienić. W Morze są dwa suwaki, paleta z możliwością wybrania własnego koloru, przełącznik światła i obracanie widoku. Kolor zmienia ceramiczne części, a metalowe detale zachowują własną barwę. Reset przywraca wszystko, także położenie kamery. Poniższy prompt obejmuje ten zakres: konfigurator w jednym pliku, bez sklepu, logowania i zewnętrznych zasobów.

Zbuduj samodzielny konfigurator lampy stołowej w jednym pliku HTML, offline i bez bibliotek.
Użyj WebGL: rzeczywista siatka 3D, perspektywa, bufor głębokości, normalne powierzchni i oświetlenie.
Model: zaokrąglony grzybkowy klosz, smukła nóżka, niska podstawa, drobne metalowe detale i przewód.
Sterowanie: średnica klosza 28–46 cm (domyślnie 38), wysokość lampy 36–60 cm (domyślnie 45), kolor ceramiki z palety i własnego selektora.
Dodaj przełącznik ciepłego światła. Poświata może być umowna; nie opisuj jej jako symulacji fotometrycznej.
Widok obracany przeciąganiem w poziomie; na komputerze pionowe przeciąganie zmienia kąt patrzenia. Dodaj przyciski i obsługę czterech strzałek jako odpowiednik klawiaturowy.
Bez automatycznego obrotu i bez bezwładności. Pionowy gest dotykowy ma pozwalać przewijać stronę.
Reset przywraca wymiary, kolor, światło i kamerę. Eksport PNG zapisuje aktualnie wyrenderowany canvas, bez panelu ustawień.
Wygląd spokojnego studia produktowego, matowa ceramika, czytelne wymiary, panel obok sceny, na telefonie poniżej.
Obsłuż ekran 320 px, brak WebGL i widoczny fokus. Nie pobieraj zdjęć, fontów ani modeli z sieci.

Skąd wiadomo, że klosz jest zaokrąglony

Gdybyśmy pomalowali całą bryłę jednym płaskim kolorem, część jej kształtu zniknęłaby z oczu. Rozjaśnienia i cienie pokazują, gdzie powierzchnia skręca. Program oblicza je między innymi na podstawie normalnych — wektorów prostopadłych do powierzchni, które mówią, w którą stronę zwrócony jest dany fragment. W źródłach pod artykułem znajdziecie wyjaśnienie MDN z przykładem WebGL.

W naszej scenie jest światło otoczenia, kierunkowe oświetlenie studyjne i delikatny połysk. Włączenie lampy dodaje ciepły spód klosza oraz poświatę na podłożu. Cień pod podstawą i sama poświata są uproszczone. Pomagają ocenić formę; nie sprawdzimy na ich podstawie, czy prawdziwa lampa dostatecznie oświetli biurko ani jak rozłoży światło w konkretnym pokoju.

Obróćcie ją i zajrzyjcie pod klosz

Przeciągnijcie widok w poziomie, a potem przełączcie go na ujęcie z góry. Obejrzyjcie krawędź klosza, styk z nóżką i podstawę. W swojej wersji ustawcie też oba wymiary na skrajne wartości. Prześwit, odłączona część czy znikająca powierzchnia wskażą, co poprawić w geometrii. Taką konkretną usterkę możecie opisać modelowi przy kolejnej zmianie.

Na telefonie panel jest pod podglądem. Gest poziomy obraca lampę, pionowy pozwala przewijać stronę, a kąt patrzenia zmienicie przyciskami. Możecie też przejść klawiaturą do podglądu i użyć czterech strzałek. Nie dodaliśmy automatycznego obrotu: ustawiony kadr zostaje na miejscu, również przy włączonej preferencji ograniczonego ruchu.

Który wariant zachowujemy?

Jeśli chcecie zatrzymać konkretny kadr, wybierzcie „Zapisz ten widok jako PNG”. Dostaniecie obraz z aktualnymi wymiarami, kolorem, światłem i kątem patrzenia, bez panelu sterowania. Jego rozdzielczość zależy od wielkości podglądu i skali ekranu, którą ograniczyliśmy do dwukrotności. Za zapis odpowiada canvas.toBlob, opisane w podlinkowanej dokumentacji.

HTML przyda się do dalszego projektowania. Zawiera cały konfigurator, ale z ustawieniami początkowymi. Działa offline w przeglądarce obsługującej WebGL. Jeśli wasz wariant ma być nowym punktem wyjścia, wpiszcie go w obiekcie defaults w skrypcie.

Centymetry służą tu do opisu proporcji koncepcji. Ani PNG, ani pobrany HTML nie są dokumentacją produkcyjną. Za to do rozmowy o tym, czy klosz powinien być szerszy, a ceramika ciemniejsza, macie już coś znacznie wygodniejszego niż sam opis.