2

Известны координаты точек: "A", "B", "S". К отрезкам AB и BS построены перпендикуляры и на них от точек A и S найдены точки "с", "d", "u", "v";

Как теперь найти точки: f, e, которые лежат на пересечении прямых, параллельных AB и BS?

Расстояния между точками должны быть равны: Ac = Ad = Sv = Su.

введите сюда описание изображения

6
  • Не нужно про плоскости x и z писать, это ни к чему. Вы случайно не "толстую линию" хотите нарисовать?
    – MBo
    16 ноя 2022 в 16:02
  • правки внесены, надеюсь всё максимально понятно :)
    – Leobuildru
    16 ноя 2022 в 16:29
  • @Эникейщик неизвестны только точки "f" и "e"
    – Leobuildru
    16 ноя 2022 в 16:30
  • Вам надо уточнить, по какому алгоритму вы их хотите найти - это не так тривиально как вам кажется (например, если прямые cd и uv будут перпендикулярны, или точка B будет левее точки A). Да и название вопроса не отражает его суть ...
    – Kromster
    16 ноя 2022 в 16:33
  • @Kromster данное условие можно решить в несколько довольно простых действий, необходимо рассмотреть данный конкретный случай, указанный на рисунке выше
    – Leobuildru
    16 ноя 2022 в 16:37

3 ответа 3

3
  1. Найти величину угла, образованного векторами BA и BS (привести к диапазону [0, 2Pi])
  2. Поделить пополам
  3. Нормализовать вектор BA и повернуть на угол (2)
  4. Поделить половину ширины полосы на косинус ( (2) - 90 градусов )
  5. Задать вектору (3) длину (4)

Мы нашли f

Чтобы найти е нужно f * -1

Прибавим B к f и e - точки найдены.

Пример:

body{
  overflow: hidden;
  margin: 0;
}
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import { OrbitControls } from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enablePan = false;

let helper = new THREE.GridHelper(10, 10, 0x808080, 0x404040);
helper.rotation.x = Math.PI * 0.5;
helper.position.z = -.001;
scene.add(helper);

const desiredWidth = 1.5;

let ptsBase = [
  /*
  new THREE.Vector2(-3, 1), //A
  new THREE.Vector2(0, 1),  //B
  new THREE.Vector2(4, -3)  //S
  */
  new THREE.Vector2(-3, -3), //A
  new THREE.Vector2(0, 1),  //B
  new THREE.Vector2(4, -3)  //S 
];

let lineBase = new THREE.Line(
  new THREE.BufferGeometry().setFromPoints(ptsBase),
  new THREE.LineBasicMaterial({ color: "yellow" })
);
scene.add(lineBase);

// all the magic is here //////////////////////////////////////////////////////////////////////////////////////////
let a = new THREE.Vector2().subVectors(ptsBase[0], ptsBase[1]); //BA
let b = new THREE.Vector2().subVectors(ptsBase[2], ptsBase[1]); //BS
let angle = (Math.PI - b.angle()) - (Math.PI - a.angle()); // [0..PI2]

let halfAngle = angle * 0.5;
let scaleVal = Math.cos(Math.abs(halfAngle - (Math.PI * 0.5)));
let f = a
  .clone()
  .setLength(desiredWidth / scaleVal)
  .rotateAround(new THREE.Vector2(), -halfAngle);
let e = f.clone().negate();
//////////////////////////////////////////////////////////////////////////////////////////

let cornerLine = new THREE.Line(
  new THREE.BufferGeometry()
    .setFromPoints([f.clone().add(ptsBase[1]), e.clone().add(ptsBase[1])])
    .setAttribute(
      "color",
      new THREE.Float32BufferAttribute([0, 1, 1, 0, 1, 0], 3)
    ),
  new THREE.LineBasicMaterial({ vertexColors: true })
);
scene.add(cornerLine);

let lineTop = new THREE.Line(
  new THREE.BufferGeometry().setFromPoints(
    ptsBase.map((p) => {
      return p.clone().add(f);
    })
  ),
  new THREE.LineBasicMaterial({ color: 0x00ffff })
);
let lineBottom = new THREE.Line(
  new THREE.BufferGeometry().setFromPoints(
    ptsBase.map((p) => {
      return p.clone().add(e);
    })
  ),
  new THREE.LineBasicMaterial({ color: 0x00ff00 })
);
scene.add(lineTop, lineBottom);

renderer.setAnimationLoop(() => {
  controls.update();
  renderer.render(scene, camera);
});

</script>

14
  • странная фигня, пишет якобы: app.js:281 Uncaught TypeError: b.angle is not a function
    – Leobuildru
    21 ноя 2022 в 10:38
  • эта фигня возникает при использовании vector3 заместо vector2, т.к. я хочу использовать систему координат XZ, заместо XY
    – Leobuildru
    21 ноя 2022 в 10:46
  • крч, вопрос, как это всё сделать на осях xz
    – Leobuildru
    21 ноя 2022 в 11:22
  • @Leobuildru Смоитри. Есть у нас вектор 1, 1, 0. Поверни его вокруг оси X по часовой стрелке, если смотреть со стороны положительной полуоси X. Какая будет координата у точки теперь? Вот это и есть перевод из XY в XZ. По большому счету даже поворачивать не надо - просто Y умножай на -1, записывай в Z. Новые координаты точки у нас получатся 1, 0, -1. Про это я даже в ответе на предыдущий вопрос писал. Но кто ж это читал ) 21 ноя 2022 в 18:41
  • 1
    let angle = (Math.PI - b.angle()) - (Math.PI - a.angle()); после сокращений переходит в let angle = a.angle() - b.angle(); 25 ноя 2022 в 8:11
3

Функция thickLine принимает координаты трёх точек и смещение, возвращает координаты трёх пар точек: левая и правая соседки для первой точки, левая и правая соседки для второй точки, левая и правая соседки для третьей точки.

Математика для крайних точек простая: направление отрезка поворачивается на девяносто градусов ((x, y) -> (-y, x)), длина нормализуется. Имея направление легко вычислить соседок точек.

Поворот вектора v обозначим как v^. Тогда левая соседка точки a относительно отрезка (a, b) на расстоянии w будет:

na = (b - a)^ - нормаль к отрезку.

al = a + w na - левая соседка.

Левая соседка точки c относительно отрезка (b, c):

nc = (c - b)^ - нормаль к отрезку.

cl = c + w nc - левая соседка.

Левая соседка точки b. Направление в котором нужно двигаться вычисляется как биссектриса направлений na и nc:

nb = na + nc.

Сама левая соседка:

bl = b + (2 w / ‖nb2) nb.

Покажем что отрезок (al, bl) параллелен (a, b). Для этого он должен быть перпендикулярен na, то есть надо проверить что скалярное произведение равно нулю:

na (bl - al) =

= na (b + (2 w / ‖nb2) nb - (a + w na)) =

= na ((b - a) + (2 w / ‖nb2) nb - w na) =

= na (b - a) + na ((2 w / ‖nb2) nb - w na) =

= 0 + na (w / ‖nb2) (2 nb - ‖nb2 na) =

= na (w / ‖nb2) (2 (na + nc) - ‖na + nc2 na) =

= (w / ‖nb2) (2 (na na + na nc) - ‖na + nc2 na na) =

= (w / ‖nb2) (2 (na na + na nc) - ((na + nc) (na + nc)) na na) =

= (w / ‖nb2) (2 (1 + na nc) - (na + nc) (na + nc)) =

= (w / ‖nb2) (2 (1 + na nc) - (na na + 2 na nc + nc nc)) =

= (w / ‖nb2) (2 (1 + na nc) - (1 + 2 na nc + 1)) =

= (w / ‖nb2) 0 =

= 0

Никакой тригонометрии не нужно. Самые сложные операции - деление и извлечение корня. Код может выдавать бесконечности и NaN если точки совпадают или поворот на 180 градусов. В таких ситуациях задача неразрешима в принципе - нельзя определить нормали к отрезкам или определить места средних соседок:

// a, b, c - points, w - half width
const thickLine = (a, b, c, w) => {

    const normal = (a, b) => {
        const x = b[0] - a[0];
        const y = b[1] - a[1];
        const f = 1 / Math.sqrt(x ** 2 + y ** 2);
        return [-y * f, x * f];
    };

    const na = normal(a, b);
    const nc = normal(b, c);

    const d = [na[0] + nc[0], na[1] + nc[1]];
    const f = w * 2 / (d[0] ** 2 + d[1] ** 2);

    const shift = (p, dir, w) => [
        p[0] + dir[0] * w, p[1] + dir[1] * w
    ];

    return [
        shift(a, na,  w),
        shift(a, na, -w),
        shift(b, d ,  f),
        shift(b, d , -f),
        shift(c, nc,  w),
        shift(c, nc, -w)
    ];
};

Полный работающий пример. Красные точки можно таскать:

// a, b, c - points, w - half width
const thickLine = (a, b, c, w) => {

    const normal = (a, b) => {
        const x = b[0] - a[0];
        const y = b[1] - a[1];
        const f = 1 / Math.sqrt(x ** 2 + y ** 2);
        return [-y * f, x * f];
    };

    const na = normal(a, b);
    const nc = normal(b, c);

    const d = [na[0] + nc[0], na[1] + nc[1]];
    const f = w * 2 / (d[0] ** 2 + d[1] ** 2);

    const shift = (p, dir, w) => [
        p[0] + dir[0] * w, p[1] + dir[1] * w
    ];

    return [
        shift(a, na,  w),
        shift(a, na, -w),
        shift(b, d ,  f),
        shift(b, d , -f),
        shift(c, nc,  w),
        shift(c, nc, -w)
    ];
};

const makePoint = svg => {
    const point = document.createElementNS(
        'http://www.w3.org/2000/svg',
        'circle'
    );
    point.setAttribute('r', 4);
    point.setAttribute('stroke', 'blue');
    point.setAttribute('fill', 'blue');
    svg.appendChild(point);

    const movePoint = (x, y) => {
        if (!isFinite(x) || !isFinite(y)) {
            return;
        }
        const ctm = point.getCTM();
        ctm.e = x;
        ctm.f = y;

        const t = svg.createSVGTransform();
        t.setMatrix(ctm);

        point.transform.baseVal.initialize(t);
    };

    return {
        'move': movePoint
    };
};

const makeDraggablePoint = svg => {
    const subscribers = [];

    const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    svg.appendChild(group);

    const p = () => {
        const ctm = group.getCTM();
        return [ctm.e, ctm.f];
    };

    const moveGroup = (x, y) => {
        const ctm = group.getCTM();
        ctm.e = x;
        ctm.f = y;

        const t = svg.createSVGTransform();
        t.setMatrix(ctm);

        group.transform.baseVal.initialize(t);

        subscribers.forEach(e => e());
    };

    const handle = document.createElementNS(
        'http://www.w3.org/2000/svg',
        'circle'
    );

    handle.setAttribute('r', 20);
    handle.setAttribute('stroke', 'transparent');
    handle.setAttribute('fill', 'transparent');
    handle.style.cursor = 'grab';
    group.appendChild(handle);
                    
    const point = document.createElementNS(
        'http://www.w3.org/2000/svg',
        'circle'
    );
    point.setAttribute('r', 4);
    point.setAttribute('stroke', 'red');
    point.setAttribute('fill', 'red');
    point.style.cursor = 'grab';
    group.appendChild(point);

    const onPointerDown = e => {
        e.preventDefault();

        const [x, y] = p();
        const offset_x = x - e.clientX;
        const offset_y = y - e.clientY;
        group.setPointerCapture(e.pointerId);

        const oldMove = group.onpointermove;
        const oldUp = group.onpointerup;

        group.onpointermove = e => {
            e.preventDefault();

            const sx = e.clientX + offset_x;
            const sy = e.clientY + offset_y;
            moveGroup(sx, sy);
        };

        group.onpointerup = e => {
            e.preventDefault();

            group.onpointerup = oldUp;
            group.onpointermove = oldMove;
            group.releasePointerCapture(e.pointerId);
        };
    };

    handle.onpointerdown = onPointerDown;
    point.onpointerdown = onPointerDown;


    return {
        'subscribe': cb => subscribers.push(cb),
        'p': p,
        'move': moveGroup,
    };
};

const makeSegment = svg => {
    // <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
    const line = document.createElementNS(
        'http://www.w3.org/2000/svg',
        'line'
    );
    svg.appendChild(line);

    line.setAttribute('stroke', 'black');
    line.setAttribute('stroke-width', '2');

    return {
        'p1': () => [line.getAttribute('x1'), line.getAttribute('y1')],
        'p2': () => [line.getAttribute('x2'), line.getAttribute('y2')],
        'move1': (x, y) => {
            if (isFinite(x) && isFinite(y)) {
                line.setAttribute('x1', x);
                line.setAttribute('y1', y);
            }
        },
        'move2': (x, y) => {
            if (isFinite(x) && isFinite(y)) {
                line.setAttribute('x2', x);
                line.setAttribute('y2', y);
            }
        }
    };
};

(() => {
    const body = document.getElementsByTagName('body')[0];

    const svg = document.createElementNS(
        'http://www.w3.org/2000/svg',
        'svg'
    );
    svg.setAttribute('width', 400);
    svg.setAttribute('height', 200);
    body.appendChild(svg);

    const s12 = makeSegment(svg);
    const s23 = makeSegment(svg);

    const s12l = makeSegment(svg);
    const s12r = makeSegment(svg);

    const s23l = makeSegment(svg);
    const s23r = makeSegment(svg);

    const p1l = makePoint(svg);
    const p1r = makePoint(svg);

    const p2l = makePoint(svg);
    const p2r = makePoint(svg);

    const p3l = makePoint(svg);
    const p3r = makePoint(svg);

    const p1 = makeDraggablePoint(svg);
    const p2 = makeDraggablePoint(svg);
    const p3 = makeDraggablePoint(svg);

    const halfWidth = 20;

    const updateLine = () => {
        const points = thickLine(p1.p(), p2.p(), p3.p(), halfWidth);

        p1l .move (...points[0]);
        s12l.move1(...points[0]);

        p1r .move (...points[1]);
        s12r.move1(...points[1]);

        p2l .move (...points[2]);
        s12l.move2(...points[2]);
        s23l.move1(...points[2]);

        p2r .move (...points[3]);
        s12r.move2(...points[3]);
        s23r.move1(...points[3]);

        p3l .move (...points[4]);
        s23l.move2(...points[4]);

        p3r .move (...points[5]);
        s23r.move2(...points[5]);
    };

    p1.subscribe(() => {
        s12.move1(...p1.p());
        updateLine();
    });

    p2.subscribe(() => {
        const [x, y] = p2.p();
        s12.move2(x, y);
        s23.move1(x, y);
        updateLine();
    });

    p3.subscribe(() => {
        s23.move2(...p3.p());
        updateLine();
    });

    p1.move(100, 50);
    p2.move(200, 50);
    p3.move(200, 100);
})();

3
  • 1
    это кнч афигенский ответ, честно, я ценю и уважаю ваш труд, но было б ваще без б если бы данный пример был без isdragble и сделан на осях XZ
    – Leobuildru
    26 ноя 2022 в 1:58
  • можете пожалуйста в первом отрывке кода прописать документацию к нему по типу к каждой строке добавить: //делаем то-то, то-то буду крайне благодарен.
    – Leobuildru
    26 ноя 2022 в 8:17
  • Весь код кроме thickLine - демонстрация для вау-эффекта. Вам интересна только математика thickLine. Я её распишу подробнее. Переделку в оси XZ оставляю вам - это чисто механическая работа. Вы можете сделать её двумя способами. Первый - изменить саму функцию, там только индексы и создание новых точек в shift. Второй - обернуть функцию в обёртку, которая параметры проецирует на плоскость, а результаты поднимает в пространство. 26 ноя 2022 в 9:11
-2

Для решения данной задачи потребуется выстроить от середины отрезка AB ещë один перпендикуляр, которыц будет задавать направление функции вычисления координат пересечения второй линии по другую сторону

function calculateIntersection_sec(p1, p2, p3, p4) {

                    var c2x = p3.x - p4.x; // (x3 - x4)
                    var c3x = p1.x - p2.x; // (x1 - x2)
                    var c2z = p3.z - p4.z; // (y3 - y4)
                    var c3z = p1.z - p2.z; // (y1 - y2)
                  
                    // down part of intersection point formula
                    var d  = c3x * c2z - c3z * c2x;
                  
                    if (d == 0) {
                      throw new Error('Number of intersection points is zero or infinity.');
                    }
                  
                    // upper part of intersection point formula
                    var u1 = p1.x * p2.z - p1.z * p2.x; // (x1 * y2 - y1 * x2)
                    var u4 = p3.x * p4.z - p3.z * p4.x; // (x3 * y4 - y3 * x4)
                  
                    // intersection point formula
                    
                    var px = (u1 * c2x - c3x * u4) / d;
                    var pz = (u1 * c2z - c3z * u4) / d;
                    
                    var p = { x: px, z: pz };
                  
                    return p;
                  }
                  
                  
                  // Usage example:
                  
                  // line 1
                  var p1 = { x:  new_it_1, z:  new_it_2 }; // P1: (x1, y1)
                  var p2 = { x:  new_it_3, z:  new_it_4 }; // P2: (x2, y2)
                  
                  // line 2
                  var p3 = { x:  new_it_5, z:  new_it_6 }; // P3: (x4, y4)
                  var p4 = { x:  new_it_7, z:  new_it_8 }; // P4: (x4, y4)
                  
                  var p = calculateIntersection_sec(p1, p2, p3, p4);  // intersection point

                  cube_set_pos_projecct_12.position.x = p.x;
                  cube_set_pos_projecct_12.position.z = p.z;
3
  • Люди старались, давали Вам правильные ответы по существу, а вы постите простынку невнятного кода с кубами и отмечаете принятым .. Некрасиво.
    – Kromster
    28 ноя 2022 в 16:30
  • @Kromster так здесь и были учтены все пункты до этого, я премного благодарен, всем кто помогал и вот что у меня получилось, да, код сырой, зато выполняет поставленную задачу
    – Leobuildru
    28 ноя 2022 в 16:37
  • @Kromster а сейчас я переоформил ответ, здесь по двум точкам задаётся направление, и вычисляется точка пересечения, ответ считаю вполне благоразумным :)
    – Leobuildru
    28 ноя 2022 в 16:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.