Розробка скрипта на Three.js для навігації по приміщенню як у FPS іграх

Розробити скрипт на Three.js, який надає функціонал для навігації по сцені(приміщення) від першої особи та з оглядом зверху. Скрипт повинен завантажувати сцену, збережену у форматі JSON,  додавати можливість переміщення як у іграх від першої особи та режим обльоту.

Основний функціонал

1. Завантаження сцени:

   • Відображати заставку з зображенням і текстом "Натисніть, щоб завантажити та дослідити сцену" перед початком роботи.

   • Забезпечити відображення прогресу завантаження JSON-файлу.

   • Ім'я JSON-файлу задається в тілі скрипта.

   • Після завантаження сцени автоматично відкривається режим від першої особи з позиції та параметрів камери "cam01".

2. Режими навігації:

   • Режим від першої особи:

     • Переміщення з клавіатури (WASD, стрілки).

     • Огляд і напрямок за допомогою миші (обертання камери).

     • Камера рухається по об'єкту "collidermesh", з урахуванням висоти (1700) та рельєфу колайдера. Колайдер може бути “2-х поверховим”, проходити над головою, тобто raycasting повинен бути з поточного рівня камери до першого перетворення.

     • Камера не виходить за межі "collidermesh" і ковзає вздовж меж.

   • Режим огляду зверху:

     • Камера переміщується навколо сцени, orbit коли права кнопка миші затиснута, обертання навколо точки під курсором миші. Dolly за допомогою скролла миші. Pan лівою кнопкою миші.

     • Об'єкти "roof_", "Roof_", "skybox_", "Skybox_" приховуються в цьому режимі, а "wall_" (або "Wall_") відображаються.

     • При включенні режиму огляду зверху камера плавно переміщується з поточного положення в положення об'єкта "cam02".

     • При подвійному кліку на точку на "collidermesh" режим перемикається на перший, при цьому камера плавно переміщується в зазначену точку (з додаванням висоти 1700).

   • Переключення між режимами за допомогою кнопок інтерфейсу

3. Версія для мобільних пристроїв:

   • Використання TouchControls для управління, як у мобільних іграх.

   • Автоматичний перехід у повноекранний режим після завантаження.

   • Кнопка виходу з повноекранного режиму.

4. Повноекранний режим:

   • Для настільних пристроїв кнопка переходу в повноекранний режим.

   • Для мобільних пристроїв повноекранний режим активується автоматично.

5. Робота з об'єктами сцени:

   • "cam01": використовується як початкова камера для режиму від першої особи (позиція, обертання, FOV, near/far range).

   • "cam02": використовується як кінцева точка переміщення камери при переключенні на режим огляду зверху.

   • "collidermesh": використовується для переміщення камери, враховуючи рельєф і межі.

   • "roof_", "Roof_", "skybox_", "Skybox_": приховуються в режимі огляду зверху, відображаються в режимі від першої особи.

   • "wall_" або "Wall_": приховуються в режимі від першої особи, відображаються в режимі зверху.

Вимоги до інтерфейсу

1. Інтерактивні елементи:

   • Кнопки для переключення між режимами (від першої особи / огляд зверху).

   • Кнопка переходу/виходу в повноекранний режим.

2. Адаптація інтерфейсу:

   • Скрипт повинен коректно працювати як в iframe, так і в якості єдиного скрипта на сторінці. (коли миша всередині вікна зі скриптом, перехоплювати натискання кнопок WASD та інше управління)

Плани на майбутнє розширення

1. Статистика відвідування по зонах:

   • Відстеження часу перебування в межах окремих колайдерів.

2. Динамічна завантаження сцен:

   • Завантаження нового JSON-файлу при кліку на задану зону або при перебуванні в зоні більше 5 секунд.

3. Запис шляху камери для кожної сесії:

4. Адмінпанель для перегляду статистики:

   • Візуалізація часу відвідування зон.

   • Відтворення руху камери.

   • Відображення шляху камери на сцені лінією