Development of a script in Three.js for navigation through the room like in FPS games

Develop a script in Three.js that provides functionality for navigation through the scene (room) from a first-person perspective and with an overhead view. The script should load a scene saved in JSON format, add the ability to move like in first-person games, and provide a fly mode.

Main functionality

1. Loading the scene:

   • Display a splash screen with an image and the text "Click to load and explore the scene" before starting.

   • Ensure the display of the loading progress of the JSON file.

   • The name of the JSON file is specified in the body of the script.

   • After loading the scene, the first-person mode automatically opens with the position and parameters of the camera "cam01".

2. Navigation modes:

   • First-person mode:

     • Movement with the keyboard (WASD, arrows).

     • View and direction using the mouse (camera rotation).

     • The camera moves along the "collidermesh" object, taking into account the height (1700) and the terrain of the collider. The collider can be "2-story", passing overhead, i.e., raycasting should be from the current camera level to the first intersection.

     • The camera does not go beyond the "collidermesh" boundaries and slides along the edges.

   • Overhead view mode:

     • The camera moves around the scene, orbits when the right mouse button is held down, rotating around the point under the mouse cursor. Dolly using the mouse scroll. Pan with the left mouse button.

     • Objects "roof_", "Roof_", "skybox_", "Skybox_" are hidden in this mode, while "wall_" (or "Wall_") are displayed.

     • When the overhead view mode is enabled, the camera smoothly moves from its current position to the position of the object "cam02".

     • When double-clicking on a point on the "collidermesh", the mode switches to the first, with the camera smoothly moving to the specified point (adding a height of 1700).

   • Switching between modes using interface buttons

3. Mobile version:

   • Using TouchControls for control, like in mobile games.

   • Automatic transition to full-screen mode after loading.

   • Button to exit full-screen mode.

4. Full-screen mode:

   • For desktop devices, a button to switch to full-screen mode.

   • For mobile devices, full-screen mode is activated automatically.

5. Working with scene objects:

   • "cam01": used as the starting camera for first-person mode (position, rotation, FOV, near/far range).

   • "cam02": used as the endpoint for camera movement when switching to overhead view mode.

   • "collidermesh": used for moving the camera, considering the terrain and boundaries.

   • "roof_", "Roof_", "skybox_", "Skybox_": hidden in overhead view mode, displayed in first-person mode.

   • "wall_" or "Wall_": hidden in first-person mode, displayed in overhead mode.

Interface requirements

1. Interactive elements:

   • Buttons to switch between modes (first-person / overhead view).

   • Button to enter/exit full-screen mode.

2. Interface adaptation:

   • The script should work correctly both in an iframe and as a standalone script on the page. (when the mouse is inside the script window, intercept WASD key presses and other controls)

Plans for future expansion

1. Visitor statistics by zones:

   • Tracking the time spent within individual colliders.

2. Dynamic scene loading:

   • Loading a new JSON file when clicking on a designated area or when staying in the area for more than 5 seconds.

3. Recording the camera path for each session:

4. Admin panel for viewing statistics:

   • Visualization of time spent in zones.

   • Playback of camera movement.

   • Displaying the camera path on the scene with a line