How to build a perpendicular in three.js? - three.js

Question

I need to build a perpendicular (line at an angle of 90 degrees to the original line) across the mid point of a straight line.
line = new THREE.Line( geometry, material );
geometry.vertices.push(
new THREE.Vector3( 100, 200, 0 ),
new THREE.Vector3( 300, 500, 0 ) );
In the manual I was not found information about it.
https://threejs.org/docs/#api/en/objects/Line
Thank you!

Answer 1

You can find the normal of a line by subtracting its start point from its end point (thus you'll get its direction), then rotate the resulted vector at 90 degrees (Math.PI * 0.5), then normalize it, and this is it, you've got the normal.
In the code snippet, the line itself is blueish (aqua), its normal is red.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var grid = new THREE.GridHelper(10, 10);
grid.rotation.x = -Math.PI * 0.5;
scene.add(grid);
var lineVertices = [
new THREE.Vector3(1, 2),
new THREE.Vector3(3, 5)
];
var lineGeom = new THREE.BufferGeometry().setFromPoints(lineVertices);
var lineMat = new THREE.LineBasicMaterial({color: 0x00ffff});
var line = new THREE.Line(lineGeom, lineMat);
scene.add(line);
var midPoint = new THREE.Vector3()
.subVectors(lineVertices[1], lineVertices[0])
.multiplyScalar(0.5)
.add(lineVertices[0]);
var normal = new THREE.Vector3()
.subVectors(lineVertices[1], lineVertices[0])
.applyAxisAngle(new THREE.Vector3(0, 0, 1), Math.PI * 0.5)
.normalize();
var normalVertices = [
normal.clone().setLength(2).add(midPoint),
normal.clone().negate().setLength(2).add(midPoint)
];
var normalGeom = new THREE.BufferGeometry().setFromPoints(normalVertices);
var normalMat = new THREE.LineBasicMaterial({color: 0xff0000 });
var normal = new THREE.Line(normalGeom, normalMat);
scene.add(normal);
renderer.setAnimationLoop(()=>{renderer.render(scene, camera)});
body {
overflow:hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>