three.js: поиск ближайшей точки сетки к курсору мыши

Question

Представьте себе эту сцену three.js, настроенную с помощью OrthographicCamera и OrbitControls:

Когда пользователь перетаскивает желтый диск (предназначенный для представления Солнца), диск должен двигаться вдоль своего желтого круга в ответ на это действие. Вот сцена под другим углом, так что вы можете увидеть полный желтый круг:

Итак, мой обработчик событий должен определить, какая точка на этом круге ближе всего к текущей позиции курсора. Кстати, этот желтый круг - ТРИ. Меш.

Я использую THREE.Raycaster , чтобы определить некоторые события наведения мыши, используя его функцию intersectObjects(), но мне не ясно, как найти ближайшую точку одного объекта с этим Raycaster. Я предполагаю, что есть некоторая простая математика, которую я могу сделать после перевода положения мыши в мировые координаты. Может кто-то помочь мне с этим? Здесь полезен Raycaster от Three.js? Если нет, то как определить ближайшую точку этой сетки?

Полный исходный код приведен здесь, если он полезен: https://github.com/ccnmtl/astro-interactives/blob/master/sun-motion-simulator/src/HorizonView.jsx Поиск this.sunDeclination, что соответствует объекту Mesh желтого круга.

Для рабочего демо, перейдите сюда: https://ccnmtl.github.io/astro-interactives/sun-motion-simulator/

Для справки, солнце должно вести себя так: https://cse.unl.edu/~astrodev/flashdev2/sunMotions/sunMotions068.html (требуется вспышка)

Answer 1

Raycaster возвращает все объекты, попавшие под луч ... все точки попадания в мировом пространстве ... (которые вы можете конвертировать в / из пространства модели через object3d.worldToLocal и localToWorld)

Возвращает пройденные расстояния ... которые вы можете отсортировать по эвристике, которая вам нужна ...

То, что я обычно делаю, это приведение к mouseDown .. запишите объект и точку .. затем на mouseMove получите ту же самую точку попадания объектов и примените мою операцию редактирования, используя разницу между этими двумя точками.

Это то, о чем ты говоришь?

Answer 2

Самая простая версия:

• получить точку на диске
• сделать проекцию на плоскость круга
• зная радиус круга, вычислим множитель для умножения вектора на скаляр

---

var point = res.point.clone();
point.z = 0; // Project on circle plane
var scale = circleRadius / point.length();
point.multiplyScalar(circleRadius / point.length())

[https://jsfiddle.net/c4m3o7ht/]