Opracowanie skryptu w Three.js do nawigacji po pomieszczeniu jak w grach FPS

Opracować skrypt w Three.js, który zapewnia funkcjonalność nawigacji po scenie (pomieszczeniu) z perspektywy pierwszej osoby oraz widoku z góry. Skrypt powinien ładować scenę zapisaną w formacie JSON,  dodać możliwość poruszania się jak w grach z perspektywy pierwszej osoby oraz tryb przelotu.

Podstawowa funkcjonalność

1. Ładowanie sceny:

   • Wyświetlać ekran powitalny z obrazem i tekstem "Naciśnij, aby załadować i zbadać scenę" przed rozpoczęciem pracy.

   • Zapewnić wyświetlanie postępu ładowania pliku JSON.

   • Nazwa pliku JSON jest określona w ciele skryptu.

   • Po załadowaniu sceny automatycznie otwiera się tryb pierwszej osoby z pozycji i parametrów kamery "cam01".

2. Tryby nawigacji:

   • Tryb pierwszej osoby:

     • Poruszanie się za pomocą klawiatury (WASD, strzałki).

     • Widok i kierunek za pomocą myszy (obrót kamery).

     • Kamera porusza się po obiekcie "collidermesh", z uwzględnieniem wysokości (1700) i terenu kolidera. Kolider może być “dwupiętrowy”, przechodzić nad głową, tzn. raycasting powinien być z aktualnego poziomu kamery do pierwszego przecięcia.

     • Kamera nie wychodzi poza granice "collidermesh" i ślizga się wzdłuż granic.

   • Tryb widoku z góry:

     • Kamera porusza się wokół sceny, orbitując, gdy prawy przycisk myszy jest wciśnięty, obrót wokół punktu pod kursorem myszy. Dolly za pomocą scrolla myszy. Pan lewym przyciskiem myszy.

     • Obiekty "roof_", "Roof_", "skybox_", "Skybox_" są ukrywane w tym trybie, a "wall_" (lub "Wall_") są wyświetlane.

     • Po włączeniu trybu widoku z góry kamera płynnie przemieszcza się z aktualnej pozycji do pozycji obiektu "cam02".

     • Po podwójnym kliknięciu w punkt na "collidermesh" tryb przełącza się na pierwszy, przy czym kamera płynnie przemieszcza się do wskazanej pozycji (z dodaniem wysokości 1700).

   • Przełączanie między trybami za pomocą przycisków interfejsu

3. Wersja na urządzenia mobilne:

   • Użycie TouchControls do sterowania, jak w grach mobilnych.

   • Automatyczne przejście w tryb pełnoekranowy po załadowaniu.

   • Przycisk wyjścia z trybu pełnoekranowego.

4. Tryb pełnoekranowy:

   • Dla urządzeń stacjonarnych przycisk przejścia w tryb pełnoekranowy.

   • Dla urządzeń mobilnych tryb pełnoekranowy aktywuje się automatycznie.

5. Praca z obiektami sceny:

   • "cam01": używana jako początkowa kamera dla trybu pierwszej osoby (pozycja, obrót, FOV, zasięg bliski/daleki).

   • "cam02": używana jako końcowy punkt przemieszczenia kamery przy przełączaniu na tryb widoku z góry.

   • "collidermesh": używana do poruszania kamery, uwzględniając teren i granice.

   • "roof_", "Roof_", "skybox_", "Skybox_": są ukrywane w trybie widoku z góry, wyświetlane w trybie pierwszej osoby.

   • "wall_" lub "Wall_": są ukrywane w trybie pierwszej osoby, wyświetlane w trybie z góry.

Wymagania dotyczące interfejsu

1. Interaktywne elementy:

   • Przyciski do przełączania między trybami (pierwsza osoba / widok z góry).

   • Przycisk przejścia/wyjścia w tryb pełnoekranowy.

2. Dostosowanie interfejsu:

   • Skrypt powinien poprawnie działać zarówno w iframe, jak i jako pojedynczy skrypt na stronie. (gdy mysz jest wewnątrz okna ze skryptem, przechwytywać naciśnięcia klawiszy WASD i inne sterowanie)

Plany na przyszłe rozszerzenia

1. Statystyka odwiedzin według stref:

   • Śledzenie czasu spędzonego w obrębie poszczególnych koliderów.

2. Dynamiczne ładowanie scen:

   • Ładowanie nowego pliku JSON po kliknięciu w określoną strefę lub po przebywaniu w strefie dłużej niż 5 sekund.

3. Rejestracja ścieżki kamery dla każdej sesji:

4. Panel administracyjny do przeglądania statystyk:

   • Wizualizacja czasu odwiedzin stref.

   • Odtwarzanie ruchu kamery.

   • Wyświetlanie ścieżki kamery na scenie linią