Stworzenie modelu 3D

Potrzebujemy na początek prosty model pudełka w 3D aby móc go potem wykorzystać w dalszej obróbce w aplikacji. Zależy nam by można byłoby go potem zaimportować w Three.js. Szczegółowe wytyczne dotyczące projektu:

Konstrukcja modelu: Model kartonu powinien być stworzony z oddzielnych siatek (mesh) dla poszczególnych ścian, co pozwoli na niezależne manipulowanie każdą ścianą.

UV-mapy: Ważne, aby model miał dobrze przygotowane UV-mapy, które pozwolą na nakładanie grafiki na poszczególne ścianki. Każda ściana modelu powinna mieć odpowiednio rozłożoną mapę UV, co ułatwi późniejsze teksturowanie z poziomu Three.js.

Rigging lub modyfikacja siatki: Można przygotować model w taki sposób, aby karton składał się z osobnych części (np. poszczególnych ścianek), które będą mogły być łatwo animowane w Three.js (np. otwieranie i rozkładanie). Można też zastosować system szkieletowy (rigging) lub zadbać o odpowiednie pivoty, które umożliwią płynne transformacje.

Format eksportu: Three.js dobrze współpracuje z formatami GLTF/GLB. Ważne jest, aby grafik przygotował animacje w programie 3D i eksportował model razem z animacjami w formacie GLTF, co pozwoli na łatwe manipulowanie animacjami w Three.js.

Grupowanie i nazewnictwo elementów: Grafik powinien pogrupować elementy (np. ściany) w sposób, który ułatwi ich późniejsze identyfikowanie w kodzie Three.js. Np. każda ścianka powinna mieć unikalną nazwę, aby można było na nią reagować (np. podświetlenie czy kliknięcie).

Identyfikacja części interaktywnych: Warto, aby grafik zaznaczył w pliku, które elementy mają być interaktywne, na przykład przez dodanie specjalnych oznaczeń lub nazw, które można odczytać w kodzie.

Modelowanie proceduralne: Jeśli wymiary kartonu mają być dynamiczne, grafik powinien przygotować model w taki sposób, aby zmiana parametrów (np. długości, szerokości, grubości) była możliwa bez deformacji UV-map. Oznacza to, że każdy element powinien być skalowalny w sposób liniowy.