I am looking to extract the values of each angle from my perspective camera in a 3D scene using the Three.js
library.
Specifically, I need to determine the coordinates that are crucial for creating a real mode map engine that allows movement within the 3D scene using the mouse cursor.
To give you an idea of what I am trying to achieve, please refer to this live demo:
In this demo, a new terrain is loaded and intersects with the previous location, providing a seamless transition without leaving behind old viewport remnants.
Now, let me showcase a snippet from my three.js application:
Currently, my scene loads statically with only one plane containing buildings sourced from my server via osm services.
The navigation within this scene is limited to keyboard inputs, which shift the 3D view to new locations. The empty spaces on the map are placeholders for testing purposes, as loading large datasets into the database is currently unnecessary. Each movement triggers the deletion of existing meshes, followed by the rendering of new data.
My goal is to enable dynamic loading based on camera movement similar to the dynamic terrain generation example provided earlier. This involves creating a matrix of planes that load data dynamically based on the camera's interactions with the scene.
Therefore, I am seeking assistance in implementing this challenging task. Can you help me tackle this complex issue?