Obiekt Three.js, który możesz orbitować

Już pisałem, kiedy wybrałbym Three.js zamiast Pixi.js i dlaczego canvas na firmowym adresie URL to rachunek, a nie dekoracja. Ten fragment był decyzją. Ten jest obiektem. Scena nad tym akapitem to ten sam wzór, który umieściłbym na stronie produktu: wyspa, leniwa, jednorazowa, ze zdaniem, które czytasz, nadal w dokumencie.

Przeciągnij na orbitę. Zamień węzeł na kryształ lub pierścionek. Szkło, chrom, żar. Na tym polega zadanie komercyjne: jednostka SKU, którą może trzymać klient, a nie karuzela PNG z tymi samymi trzema kątami. Brak pobierania GLTF. Brak sofy 40 MB. Geometria proceduralna, materiał fizyczny, mapa środowiska, rozkwitają przy ograniczonym budżecie, cząstki, które zatrzymują się, gdy opuszczasz rzutnię.

1. Na co właściwie patrzysz

Węzeł torusa, dwudziestościan, torus. Three.js rysuje je jako siatki. Wykończenie szkła to MeshPhysicalMaterial: transmisja, grubość, IOR, opalizacja. Chrom to metalowość 1 i ciasna szorstkość. Żar jest emisyjny, co jest tanim sposobem na nagrzanie SKU w trybie nocnym bez dodatkowego światła. Wokół niego chmura punktów na materiale ShaderMaterial – nie kropki DOM, ani biblioteka cząstek. Jedno losowanie.

Szkło bez otoczenia to szara plama. RoomEnvironment plus PMREM daje siatce coś do załamania, więc transmisja jest odczytywana jako głośność, a nie jako błąd. Bloom to UnrealBloomPass na kompozytorze, słabszy w jasnym motywie, słabszy na telefonie. Ograniczam urządzeniePixelRatio. Zmniejszam liczbę cząstek, gdy współbieżność sprzętu jest niska. Na tym polega różnica między wersją demonstracyjną, która przetrwa laptopa rekrutera, a wersją demonstracyjną, w której gotuje się w metrze Androida średniej klasy.

2. Wyspa, a nie strona główna

Na serwerze nie ma WebGL. Ta strona jest eksportem statycznym. Artykuł HTML jest w pierwszej fazie malowania. Scena to wyspa klienta: IntersectionObserver z marginesem głównym, następnie dynamiczny import trzech, a następnie moduł renderujący. Jeśli nigdy tutaj nie przewiniesz, nigdy nie pobierzesz silnika. Jeśli opuścisz, pętla ustąpi. Po odmontowaniu usuwam geometrię, materiały, kompozytora, PMREM i moduł renderujący. Poruszaj się dalej w tej aplikacji, a kontekst GPU nie wycieknie do następnego artykułu.

Nie umieściłem tego na stronie głównej. Zapalony bohater 3D walczy z LCP, a następnie kradnie INP. Rekruterzy mogą poczekać jeden zwój. Klienci znajdujący się pod adresem URL produktu mogą poczekać na obiekt, którego dotknęli. Nie mogą się doczekać płótna, które zablokowało nagłówek. Zmniejszony ruch zatrzymuje automatyczny obrót i dryf cząstek; przeciąganie nadal działa, ponieważ jest to wybór, a nie animacja.

• Skopiuj i nagłówek w kodzie HTML serwera. Płótno nie jest powierzchnią pełzającą.
• Rozruch na skrzyżowaniu, a nie na obciążeniu trasy.
• Pozbądź się po odmontowaniu. Wstrzymaj poza ekranem. Honor woli ograniczony ruch.

3. Tutaj surowe Three.js. React Trzy włókna w aplikacji produktowej

Na tej stronie samodzielnie podłączyłem silnik, więc wyspa pozostaje jedną częścią, a pętla jest oczywista: utwórz, zaznacz, wyrzuć. W aplikacji Next.js, w której scena musi komunikować się ze stanem koszyka, próbnikiem kolorów i flagą giełdową, użyłbym React Three Fibre. To samo GPU, wykres sceny znajdujący się w drzewie React, mniej pistoletów w okolicy odmontowania. Błędem jest przyjęcie R3F do kręcenia kostką lub unikanie go, gdy dziesięć oczek musi być zsynchronizowanych z Redux. Wybierz opakowanie, gdy produkt już myśli w kategoriach komponentów.

4. Kiedy miałbym to wysłać do klienta

SKU biżuterii. Butelka. Urządzenie, którego kolorystyka jest wyprzedażą. Architektura, którą trzeba przejść, a nie sfotografować z czterech JPEG-ów. Nie jest to marketingowa strona główna, która musiała „czuć się premium” – to wytyczne to nadal CSS i GSAP. To nie jest automat do gry: to jest Pixi. Jeśli obiektem jest fabryczny GLTF, utrzymuję go w dobrej kondycji, dodaję LOD i wieszam plakat podczas uruchamiania. Jeśli WebGL nie zostanie zainicjowany, strona nadal będzie zawierała zdjęcia i cenę. Canvas to najlepsza droga do SKU, nigdy jedyna.

Wniosek: pokaż obiekt, zachowaj dokument

Zespoły zatrudniają Three.js, gdy klient dokonuje konwersji poprzez orbitowanie, a nie czytanie. Powinni nadal wypożyczać dokument: tytuł, cena, informacje prawne i obraz zastępczy. Dostarczam ten podział jako starszy inżynier sieciowy – Next.js wysp, ograniczony budżet GPU, GSAP, gdzie strona jest nadal stroną. Jeśli Twoim briefem jest kod SKU, który należy umieścić w zakładce, wpisz za pomocą formularza obiekt, zestaw urządzeń i informację, czy ten sam adres URL musi mieć ranking. Nie zaczniemy od upuszczenia płótna na stronę główną, „aby portfolio wyskoczyło”.