Przeglądasz w sieci parę butów. Sklep pokazuje Ci widok z przodu i z boku. Przybliżasz obraz, mając nadzieję zobaczyć teksturę skóry, ale obraz zamienia się w mozaikę pikseli. Przesuwasz do następnego zdjęcia. To te same buty, ale na innej nodze. Dziesięć zdjęć później wciąż nie jesteś w stanie stwierdzić, czy podeszwa jest sztywna, czy elastyczna, ani czy kolor to prawdziwy granat, czy wyblakła czerń. Przy kasie wahasz się. Następnie zamykasz kartę.

Dzieje się to miliony razy dziennie. Płaskie obrazy zmuszają klienta do wysiłku umysłowego polegającego na wyobrażaniu sobie rzeczywistego obiektu. Ten wysiłek tworzy tarcie, a tarcie zabija sprzedaż.

A teraz wyobraź sobie inną kartę. Te same buty ładują się jako model 3D bezpośrednio na stronie. Klikasz i przeciągasz, aby je obrócić. Przybliżasz obraz, a geometria pozostaje ostra, ponieważ patrzysz na siatkę, a nie na rozciągnięty bitmap. Zmieniasz wariant kolorystyczny w czasie rzeczywistym. Sprawdzasz szwy wzdłuż piętka od dołu – pod kątem, którego żaden fotograf produktów nie zadałby sobie trudu, by sfotografować. Obiekt istnieje na Twoim ekranie tak, jak istnieje w przestrzeni. Dodajesz do koszyka, ponieważ masz wrażenie, jakbyś już go trzymał w dłoniach.

Nic w produkcie się nie zmieniło. Zmieniło się jedynie doświadczenie.

Dlaczego przeglądarka?

Do niedawna tego rodzaju interakcja wymagała dedykowanej aplikacji lub wtyczki, której większość użytkowników odmawiała instalacji. Three.js to zmieniło. Jest to biblioteka JavaScript, która działa na bazie wbudowanego w przeglądarkę renderera WebGL i pozwala programistom budować sceny 3D przy użyciu tego samego kodu, który napędza resztę strony internetowej. Użytkownik nie musi pobierać specjalnego oprogramowania. Nie ma osobnego okna, pliku wykonywalnego ani okna dialogowego z prośbą o uprawnienia. Canvas renderuje się tak samo jak każdy inny element HTML.

To istotne, ponieważ dostępność determinuje adopcję. Jeśli klient może obejrzeć produkt 3D na telefonie podczas dojazdu do pracy, na starym laptopie lub na służbowym komputerze stacjonarnym zablokowanym przez dział IT, technologia faktycznie dociera do ludzi. Three.js zmienia przeglądarkę w uniwersalny viewport.

Gdzie 3D znajduje swoje miejsce

Dodawanie grafiki trójwymiarowej nie jest darmowe. Kosztuje czas programistyczny, budżet wydajnościowy, a często także budżet produkcyjny na same zasoby. Powinieneś ponosić ten koszt tylko wtedy, gdy zwrot jest realny. Cztery powszechne argumenty za 3D w sieci zasługują na coś więcej niż tylko punkt na liście.

Wyższe zaangażowanie brzmi jak metryka marketingowa, ale ma przyczynę mechaniczną. Gdy odwiedzający może wejść w interakcję ze sceną — obracając ją, przybliżając, wyzwalając animacje — sam generuje treść. Nie jest już tylko biernym odbiorcą oferty. On odkrywa. Ten aktywny stan sprawia, że zostaje na stronie dłużej, ponieważ ma „niedokończoną sprawę” z modelem. Chce zobaczyć tył. Chce zobaczyć wnętrze. Interakcja tworzy pętle ciekawości, których statyczne siatki nie są w stanie powtórzyć.

Lepsze zrozumienie jest najbardziej oczywiste w e-commerce. Sofa przedstawiona w dwóch wymiarach zmusza kupującego do czytania wymiarów z karty specyfikacji i wyobrażania sobie głębi na podstawie cienia. Model 3D pozwala mu obejść mebel dookoła i zobaczyć, jak zwęża się podłokietnik. Może go umieścić w swoim pokoju za pomocą rozszerzonej rzeczywistości (AR) zbudowanej na tej samej scenie Three.js, sprawdzając odstęp pod oknem bez wyciągania miarki. Gdy klienci widzą produkty pod każdym kątem, podejmują decyzje z pewnością.

Storytelling wykracza poza produkty. Producent może pokazać, jak silnik przechodzi przez cykl spalania, bez wysyłania fizycznego modelu demonstracyjnego. Architekt może przeprowadzić klienta przez plan piętra, zanim zostaną wylane fundamenty. Ruch wyjaśnia relacje, z którymi słowa i nieruchome klatki mają trudności...