Threejs - Wall Corners

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<!--
Dot vs cross product
Cross product always returns you an arrow/vector. The return vector will always be perpendicular to the two arrows. it mattesr which of the two arrows goes first.

Dot product always returns a number. If you have two normalized vector, it'll return you a normalized value between 0-1. It can also be negative if one of the vector is negative. It doesn't matter which arrows goes first or second, you'll get the same value.

If the two vectors are not normalized, you may get odd results.
-->

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}

JavaScript

// a class encapsulting a math line and a actual line.
class Line {
	constructor(p1,p2){
    
    this.start = p1;
    this.end = p2;
    
  	this.line3 = new THREE.Line3(p1, p2);
    console.log(this.line3);
    
    // buffer geo way for new line
     var lineGeo = new THREE.BufferGeometry();
     var vertices = new Float32Array([
      p1.x, p1.y, p1.z,
      p2.x, p2.y, p2.z,
    ]);

    // itemSize = 3 because there are 3 values (components) per vertex
    lineGeo.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
    this.mesh = new THREE.Line(lineGeo, new THREE.LineBasicMaterial({color: this.color}));
    
    
    var normal = this.getVectorNormal();
    
    console.log(normal);
    
  }
  
  getVectorNormal(){
  	var normal = new THREE.Vector3();
    normal.subVectors(this.end.clone(), this.start.clone());
    var angle = THREE.Math.degToRad(90);
    normal.applyAxisAngle(new THREE.Vector3(0,0,1), angle);
    
    this.zeroOutNearZeroValues(normal);
    
    return normal;
  }
  
  zeroOutNearZeroValues(vec){
  	 var x = parseInt(vec.x.toFixed(3));
     var y = parseInt(vec.y.toFixed(3));
     var z = parseInt(vec.z.toFixed(3));
     vec.x = x === 0 ? 0 : vec.x;
     vec.y = y === 0 ? 0 : vec.y;
     vec.z = z === 0 ? 0 : vec.z;
  }
  
  getDirection(){
  	var direction = new THREE.Vector3();
    direction.subVectors(this.start.clone(), this.end.clone());
    return direction;
  }
  
  /// a real math lin3, while you can move it, it's not easily resetable
  // once moved, the new cordinates are its starting position
  // to reset, you'll have to create a new properties like a position to offset from
  setPosition(x=0,y=0,z=0){
  	this.line3.applyMatrix4(new THREE.Matrix4().makeTranslation(x,y,z));
    this.mesh.geometry.verticesNeedUpdate = true;
  }

}

class Utils {
	static createArc(rad = 5, seg = 36, thetaStart = 0, thetaEnd = 360){
  	var radius = rad;
    var segments = seg;
		debugger;
    var pointGeo = new THREE.Geometry();
...