Я создал 3D-глобус с помощью Three.js и использую файл jpg в качестве текстуры для глобуса. Я хочу выбрать определенный регион на земном шаре, нарисовав над ним прямоугольник, а затем перенести выбранную область на новый холст.
Однако я столкнулся с проблемой. Когда я увеличиваю, уменьшаю масштаб или перемещаю камеру (панорамирую) вокруг глобуса, а затем пытаюсь нарисовать прямоугольник, похоже, что прямоугольник рисуется в исходном состоянии глобуса, без учета масштабирования и панорамирования. эффекты. По сути, прямоугольник выглядит так, как будто он применен не к текущему виду, а к исходному состоянию глобуса.
Вот с чем мне нужна помощь:
Рисование прямоугольника на 3D-глобусе.
Извлечение области внутри прямоугольника из текстуры глобуса.
Перенос выделенной области на новый холст с учетом масштабирования и панорамирования.
Может ли кто-нибудь подсказать мне, как обеспечить прямоугольник рисуется с учетом эффектов масштабирования и панорамирования текущего вида? Любая помощь или предложения будут оценены по достоинству!
const ctx = debugCanvas.getContext('2d');
const imageWidth = img.width;
const imageHeight = img.height;
const pixelsPerLon = imageWidth / 360;
const pixelsPerLat = imageHeight / 180;
let x1 = (maxLon + 180) * pixelsPerLon;
let y1 = (90 - minLat) * pixelsPerLat;
const width = boxwidth
const height = boxheight
ctx.drawImage(
img, // jpg file
x1, y1,
width, height,
0, 0,
width, height
);
Подробнее здесь: https://stackoverflow.com/questions/793 ... er-it-to-a
