Three.js i Next.js. Jak załadować model GLB do konfiguratora 3D produktu?

Od modelu 3D w Blenderze do konfiguratora w przeglądarce

Tworzenie konfiguratora 3D produktu często zaczyna się w Blenderze, ale kończy w przeglądarce klienta. To właśnie tam użytkownik obraca model, wybiera tkaninę, kolor, układ lub inne warianty produktu. Kluczem do połączenia tych dwóch światów jest format GLB — skompresowany format GLTF, który może zawierać geometrię, materiały i tekstury w jednym pliku.

Przygotowanie modelu GLB w Blenderze

Przed eksportem modelu do konfiguratora 3D warto sprawdzić kilka rzeczy:

1. Każdy element, który ma być konfigurowany, powinien mieć osobny materiał
2. UV mapping powinien być poprawny na każdym meshu
3. Skala obiektu powinna być ustawiona poprawnie, najlepiej po użyciu Apply Scale w Blenderze
4. Nazwy elementów powinny być czytelne, np. seat, backrest, legs, pillow

Eksportuj przez File → Export → glTF 2.0 i wybierz format GLB.

Ładowanie modelu GLB w Next.js

Model GLB można umieścić w folderze public/models/ i ładować go przez Three.js albo React Three Fiber. W konfiguratorze 3D dla sofy, narożnika lub innego produktu na zamówienie taki model staje się bazą do dalszej zmiany materiałów i wariantów.

Najważniejsza zasada w Next.js: komponent odpowiedzialny za Three.js musi działać po stronie klienta. Najczęściej oznacza się go jako "use client" i ładuje dynamicznie przez next/dynamic z ssr: false.

const SofaConfigurator = dynamic(
  () => import("@/components/SofaConfigurator"),
  { ssr: false }
);

Bez tego Next.js spróbuje wyrenderować Three.js po stronie serwera i dostaniesz błąd o braku window.

Podmiana materiałów, tkanin i kolorów w konfiguratorze 3D

Każdy mesh w modelu GLB może mieć przypisany materiał. Dzięki temu w konfiguratorze 3D można zmienić tkaninę na siedzisku, kolor nóg, materiał poduszek albo inne elementy produktu w czasie rzeczywistym:

gltf.scene.traverse((child) => {
  if (child.name === "seat" && child.isMesh) {
    child.material = new THREE.MeshStandardMaterial({
      map: textureLoader.load("/textures/velvet-blue.webp")
    });
  }
});

Tkaniny jako tekstury można ładować z public/textures/ na żądanie — dopiero wtedy, gdy klient kliknie konkretną opcję. To ważne, bo konfigurator 3D powinien być szybki i nie powinien ładować wszystkich materiałów od razu.

Optymalizacja modelu 3D pod szybkość strony

• tekstury tkanin najlepiej zapisywać w WebP, np. 1024x1024 px
• model GLB powinien być możliwie lekki, szczególnie na urządzenia mobilne
• tekstury warto ładować dopiero po wyborze danej opcji
• niepotrzebne elementy modelu warto usunąć przed eksportem
• nazwy meshów i materiałów powinny być czytelne dla dalszej konfiguracji

Dobrze przygotowany model GLB, rozsądnie skompresowane tekstury i dynamiczne ładowanie komponentu 3D sprawiają, że konfigurator produktu może działać płynnie również na telefonie.

Dlaczego to ważne dla producenta mebli?

Dla producenta sof, narożników lub mebli na wymiar technologia jest tylko środkiem do celu. Klient nie musi wiedzieć, czym jest Three.js, GLB czy React Three Fiber. Ma po prostu zobaczyć produkt, wybrać wariant i wysłać zapytanie z większą pewnością.

Dlatego konfigurator 3D powinien być nie tylko efektowny, ale też szybki, czytelny i dobrze zintegrowany ze stroną internetową lub sklepem.