Как получить координаты пикселей на изображении карты на основе положения мыши в 3D-глобусе Three.js? ⇐ Javascript

[Anonymous]

Я работаю над трехмерным глобусом, используя библиотеку на основе Three.js, и наложил на глобус изображение с высоким разрешением (Map.jpg с размерами 18000x9000) в качестве текстуры.Я уже могу преобразовать положение мыши на холсте в:
Координаты холста.
Широту и долготу (географические координаты).
Теперь, я необходимо определить координаты пикселей на изображении Map.jpg, соответствующие положению мыши. По сути, я хочу сопоставить географические координаты мыши (широту и долготу) с пиксельными координатами файла Map.jpg.
Как мне это точно рассчитать? Будем очень признательны за любые советы или примеры кода. Спасибо!
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);
}
});


Подробнее здесь: https://stackoverflow.com/questions/793 ... n-in-a-thr