Разработка скрипта на 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. Админпанель для просмотра статистики:

   • Визуализация времени посещения зон.

   • Воспроизведения движения камеры.

   • Отображение пути камеры на сцене линией