Wie erhalte ich die Pixelkoordinaten auf einem Kartenbild basierend auf der Mausposition in einem Three.js-3D-Globus? ⇐ JavaScript

[Guest]

Ich arbeite an einem 3D-Globus mit einer Three.js-basierten Bibliothek und habe ein hochauflösendes Bild (Map.jpg mit den Abmessungen 18000 x 9000) als Textur auf den Globus abgebildet.Ich kann die Mausposition auf der Leinwand bereits umwandeln in:
Leinwandkoordinaten.
Breitengrad und Längengrad (geografische Koordinaten).
Jetzt muss ich die Pixelkoordinaten auf dem Map.jpg-Bild bestimmen, die der Mausposition entsprechen. Im Wesentlichen möchte ich die geografischen Koordinaten der Maus (Breiten- und Längengrad) den Pixelkoordinaten der Map.jpg-Datei zuordnen.
Wie kann ich das genau berechnen? Für Tipps oder Codebeispiele wäre ich sehr dankbar. Danke!

Code: Select all

document.getElementById('screen').addEventListener('mousemove', (event) => {
const rect = event.target.getBoundingClientRect();
const mouse = new THREE.Vector2(
((event.clientX - rect.left) / rect.width) * 2 - 1,
-((event.clientY - rect.top) / rect.height) * 2 + 1
);
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, map.camera);
const sphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0), radius);
const intersection = new THREE.Vector3();
if (raycaster.ray.intersectSphere(sphere, intersection)) {
let longitude = Math.atan2(intersection.z, intersection.x) * (180 / Math.PI);
let latitude = Math.asin(intersection.y / radius) * (180 / Math.PI);
}
});