Currently, I am working on creating an overlay layer for Leaflet that will showcase 3D content such as buildings. However, I have encountered difficulties in ensuring that movements on the Leaflet map are synchronized with those in the overlay scene.
At the moment, the canvas matches the size of the map container and is always positioned over the map (similar to a position: fixed). To enable movement when the user pans around on the map, I aim to adjust the camera in the scene instead of moving all geometries. I calculate positions based on the distance from lat:0, lng:0, as THREE.js does not handle fractional positions well (e.g. when using decimal GPS coordinates). Unfortunately, I am struggling to find the correct formula to determine the camera's accurate positions (x,y,z).
This is my approach so far:
https://jsfiddle.net/hg474d6r/7/ (please refer to the _handleMove function)
The black dot represents the center point for your guidance. The red dot should remain stationary relative to the map, but it currently does not.
Could there be a minor flaw in my formula or calculations, or is this approach fundamentally flawed?
Update: Revised fiddle with progress updates included