title: Camera behaves weird once placed on high or low angles
body: <p>I have a simple Three.js scene around which I want to move the camera. The camera needs to be able not only just to move, but to change the angle around a certain focus point. The focus point is actually the camera position, and at the time of rendering, I actually just translate the camera by <code>cameraBuff</code> and it places it on a sphere, and then I tell it to look at the focus point.</p>
  
  <p>Until the camera is moved, everything works OK, I can rotate the camera and all that. But, once I start moving, something just seems to break! At normal angles (vertical, 0 &lt; x &lt; 180) it just freezes and cannot rotate around the focus point at all. Once I move it down a little bit, everything starts working again. Just to elaborate, the problems are happening once the <code>cameraBuff</code> point become perpendicular to the surface.</p>
  
  <p>This is the code I use to rotate the <code>cameraBuff</code> vector/point around the focus:</p>
  
  <pre><code>//mouse.onDown* things are recorded once the mouse is initially pressed
  theta = -((event.clientX - mouse.onDownPosition.x) * 0.5) + mouse.onDownTheta;
  phi = ((event.clientY - mouse.onDownPosition.y) * 0.5) + mouse.onDownPhi;
  
  phi = Math.min(180, Math.max(0, phi));
  
  cameraBuff.x = radius * Math.sin(theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 );
  cameraBuff.y = radius * Math.sin(phi * Math.PI / 360 );
  cameraBuff.z = radius * Math.cos(theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 );
  </code></pre>
  
  <p>Once I change <code>phi = Math.min(180, Math.max(0, phi));</code>to <code>phi = Math.min(160, Math.max(20, phi));</code>, for example, things work, but I am not able to even get the camera to be perpendicular to the surface, or even lower it.</p>
  
  <p>This is what happens when, for example, w is pressed:</p>
  
  <pre><code>if (input.w)
  {
      var speed = [game.direction.x*60, game.direction.z*60];
  
      game.camera.position.x -= speed[0]; //camera.position and focus are basically the same point all the time.
      game.focus.x -= speed[0];
  
      game.camera.position.z -= speed[1];
      game.focus.z -= speed[1];
  }
  </code></pre>
  
  <p>And the direction is calculated like this:</p>
  
  <pre><code>var c = Math.sqrt(cameraBuff.x*cameraBuff.x + cameraBuff.z*cameraBuff.z);
  var rat = 1/c;
  
  game.direction.x = cameraBuff.x*rat;
  game.direction.z = cameraBuff.z*rat;
  </code></pre>
  
  <p>Can someone explain what is wrong with my code?</p>