Threejs - Angles & Degrees

Find angles between two vectors. You will always only get the closest angle between 0-180. and it usually solves for most case.

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>
<div style="display: none" id="info">
<p>
When getting an angle between two vectors, you will always get the smallest angle betwen 0-180.
Example, if the inner angle is 90 and the outer is 270, 90 will be returned. You will never get an angle above 180-360. Reason why is because the smaller angle is usually suffice for most if not all operations. If you really need the bigger angle, you can subtract the return angle from 360 OR think really really hard over your apporach why you need an angle above 180 and why you can't work with 0-180.
</p>
<p>
There is problaby a valid reason why the math maticians who wrote the angleTo did not see a need for returning an angle more than 180.
</p>
</div>

CSS

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

JavaScript

class Main {
	constructor(){
    this.objects = []; 
    this.scene = new THREE.Scene();
    
    var width = window.innerWidth;
    var height = window.innerHeight * .75;
    this.camera = new THREE.PerspectiveCamera( 
    	35, width/height, 0.1, 10000 
    );
    
    this.renderer = new THREE.WebGLRenderer();
    
    
    this.renderer.setSize( width, height );
    this.renderer.setClearColor( 0xcccccc, 1 ); 
    
    // controls should set 2nd param or mouse move will be all over the main dom element
    // null on 2nd param, threejs will use the parent as the mouse click and prevent default
    this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
    
    // will turn off zooming while panning with right mouse click, false by default
    this.controls.screenSpacePanning = true;
    
    document.body.appendChild( this.renderer.domElement );
    this.scene.add(this.camera);

    
    this.setToFullOrbit(this.controls);
    this.camera.position.copy(new THREE.Vector3(100,100,100));
    // fix first frame render issue going invisible
    this.camera.lookAt(new THREE.Vector3(0,0,0));

    var axisHelper = new THREE.AxisHelper();
    this.scene.add(axisHelper);
    
    var grid = new THREE.GridHelper(144,12);
    grid.rotateX(Math.PI / 2);
    this.scene.add(grid);

		this.createScene();

  }
  
  // playground
  createScene(){
  
  var a1 = new THREE.Vector3(-12,0,0);
  var a2 = new THREE.Vector3(-12,12,0);
  this.createAngle(a1);
  this.createAngle(a2);
  
  var angleA = a1.angleTo(a2);
  console.log(THREE.Math.radToDeg(angleA));
  
  console.log(45 === 45.0001);
  
  //var angleB = this.getAngleBetweenTwoVectorsInDeg(a1,a2);
  //console.log(angleB);
    
  }
  
  getAngleBetweenTwoVectorsInDeg(p1, p2) {
    var result;
    if (p1 && p2) {
      var angle1 = Math.atan2(p1.y, p1.x);
      var angle2 = Math.atan2(p2.y, p2.x);
      result = (angle2 - angle1) * 180 / Math.PI;
    } else {
      throw new Error(`Cannot get angle: one...