title: Three.js OrbitControls with azimuth close to +/-180 degrees
body: <p>I have a situation where I use an OrbitControls to have a limited view in a room/space. The OrbitControls gets min/max values for azimuth and polar angles to control the view.
  The OrbitControls' target is close by the camera to achieve the correct view, compare to the "panorama / cube" example (<a href="https://threejs.org/examples/?q=cube#webgl_panorama_cube" rel="nofollow noreferrer">https://threejs.org/examples/?q=cube#webgl_panorama_cube</a>).</p>
  
  <p>In one situation this works fine. In an other situation this does not work. The reason is that because of the placement of objects, the starting azimuth is -179.999 degrees.
  I have not found a way to tell the orbitcontrol to have the azimuth between -179.999 +/- 20 degrees.</p>
  
  <p>I have experimented a little with the algorithm of @Αλέκος (<a href="https://stackoverflow.com/questions/10236848/is-angle-in-between-two-angles?noredirect=1&amp;lq=1">Is angle in between two angles</a>) and it looks like I can calculate the correct angles (not fully implemented). For that I would have set an azimuth and a delta in stead of min/max (and change the OrbitControls code).</p>
  
  <p>Any suggestions for an easier solution? Thanks!</p>
  
  <p>Test code:</p>
  
  <pre><code>var scene = new THREE.Scene();
  var orbitControls;
  var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
  
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  var material = new THREE.MeshBasicMaterial({
      color: 0xffffff,
      vertexColors: THREE.FaceColors
  });
  
  var geometry = new THREE.BoxGeometry(1, 1, 1);
  
  // colors
  red = new THREE.Color(1, 0, 0);
  green = new THREE.Color(0, 1, 0);
  blue = new THREE.Color(0, 0, 1);
  var colors = [red, green, blue];
  
  console.log("FACES", geometry.faces.length)
  
  for (var i = 0; i &lt; 3; i++) {
      geometry.faces[4 * i].color = colors[i];
      geometry.faces[4 * i + 1].color = colors[i];
      geometry.faces[4 * i + 2].color = colors[i];
      geometry.faces[4 * i + 3].color = colors[i];
  }
  
  geometry.faces[0].color = new THREE.Color(1, 1, 1);
  geometry.faces[4].color = new THREE.Color(1, 1, 1);
  geometry.faces[8].color = new THREE.Color(1, 1, 1);
  
  var cube = new THREE.Mesh(geometry, material);
  cube.position.x = 0;
  cube.position.y = 4;
  cube.position.z = 44;
  console.log("CUBE", cube.position);
  var cubeAxis = new THREE.AxesHelper(20);
  cube.add(cubeAxis);
  scene.add(cube);
  
  camera.position.x = 0.8;
  camera.position.y = 4.5;
  camera.position.z = 33;
  
  orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
  orbitControls.enablePan = false;
  orbitControls.enableZoom = false;
  orbitControls.minPolarAngle = (90 - 10) * Math.PI / 180;
  orbitControls.maxPolarAngle = (90 + 10) * Math.PI / 180;
  
  // These values do not work:
  orbitControls.maxAzimuthAngle = 200 * Math.PI / 180;
  orbitControls.minAzimuthAngle = 160 * Math.PI / 180;
  
  orbitControls.target.x = 0.8;
  orbitControls.target.y = 4.5;
  orbitControls.target.z = 33.1;
  
  orbitControls.enabled = true;
  
  var animate = function () {
      requestAnimationFrame(animate);
  
      if (orbitControls) {
  
          orbitControls.update();
      }
  
      renderer.render(scene, camera);
      // console.log("orbitControls", "azi", orbitControls.getAzimuthalAngle() * 180 / Math.PI);
  };
  
  animate();
  </code></pre>