Wie erhalte ich die Pixelkoordinaten auf einem Kartenbild basierend auf der Mausposition in einem Three.js-3D-Globus?
Posted: 16 Jan 2025, 03:41
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!
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);
}
});