Рассчитать ближайшую точку на окружности

Question

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

Эта проблема похожа на эту Функция JavaScript, которая возвращаетx, y точки пересечения двух окружностей?

Однако это для 2 окружностей.

Я знаю положение обоих, радиус круга и т. Д. Как рассчитать ближайшую точку к этому углу на круге?

const shapeTop =  this.shape.getAttribute('position').clone()
//I want to apply the position here


const geo = this.button.children[0].getAttribute('geometry')

if(!geo)
  return

const halfWidth = geo.width * 0.5
const halfHeight = geo.height * 0.5

const buttonEdge = {
  x: buttonPos.x + (buttonPos.x > 0 ? - halfWidth :  halfWidth),
  y: buttonPos.y + (buttonPos.y > 0 ? - halfHeight :  halfHeight),
  z: buttonPos.z,
}

Answer 1

Как правильно указывает ответ @ WestLangley , легко найти ближайшую точку окружности , если известна ближайшая точка на прямоугольнике .

Однако в прямоугольнике возможны два типа «ближайшей точки»: угол или сторона.На рисунке ниже показаны обе возможности:

Чтобы определить, какой у вас случай, спроецируйте центр круга на каждую из четырех линий (например,, как в это Q & A ).Если вы делаете нормализованную проекцию, значение <0 или> 1 указывает, что ближайшей точкой для этого сегмента является угол.Затем у вас останутся четыре угла и любые проекции, в результате которых в качестве кандидатов будут выбраны значения от 0 до 1.

Как только вы найдете, какой кандидат находится ближе всего к центру круга, примените принятый ответ.

Answer 2

Основной вопрос заключается в том, как найти точку на окружности, которая имеет кратчайшее расстояние до данного прямоугольника.

После моей мысли мы можем разделить всю 2D-плоскость на две области, однагде прямоугольник может быть перемещен путем перемещения в направлении его границ, другой - где прямоугольник не может быть перемещен таким образом.Первая область окрашивается как перекресток (цветная область), а вторая область - это остальная часть 2D-плоскости (белая область).

Если центр этого круга находится внутри первой области, то запрашиваемая точка является точкой пересечения ((круг) и (перпендикулярная линия от (центр круга) до (ближайшая граница прямоугольника))).Иначе, если центр находится внутри второй области, то запрошенная точка является ближайшим углом прямоугольника.

Обновление : Еще одна мысль - рассмотреть только эти 6 точек: 4 - пересечениеиз ((окружность) и (линия между центром окружности и углом 4 прямоугольника)), еще 2 - это пересечение ((окружность) и (перпендикулярная линия от (центр окружности) до (границыпрямоугольник))).

Answer 3

В three.js вы можете рассчитать нужную точку следующим образом:

var vector = new THREE.Vector3(); // or Vector2

vector.copy( corner ).sub( center ).setLength( radius ).add( center );

three.js r.93