How to draw perpendicular to webgl (three.js) line?

Question

WebGL

I study the manual https://threejs.org/docs/#api/en/objects/Line
create line = new THREE.Line( geometry, material );
for example with

geometry.vertices.push(
  new THREE.Vector3( 100, 200, 0 ),
  new THREE.Vector3( 300, 500, 0 ),
);

It is necessary to draw a perpendicular through the middle of the line. I didn't find anything about it in the manuals. Perhaps there is a solution?
PS You can remember trigonometry or drawing - build arcs, look for intersections, etc., but I doubt that webgl lacks a ready-made way to create perpendiculars.

Answer 1

There are infinitely many perpendiculars to a segment and passing through its midpoint, and they form a plane. Therefore, your statement of the problem is incorrect.
To find the perpendicular, use the properties of the scalar product of vectors. When it is zero, then the vectors are perpendicular.
In your example, the direction vector of the segment is (200, 300, 0). Let the desired perpendicular vector be (a, b, c), then their scalar product:
200a + 300b + 0c = 0
As you can see, the solution is ambiguous. An additional condition is the length of the direction vector. It can be normalized to 1. And then there will be a one-parameter ambiguity, which will correspond to the plane.