title: Three.js TranslateX or Y causes rotation but I just want it to move straight along the axis
body: <p>I'm using Three.js and TrackballControls to create a 3D scene.</p>
  
  <p>I created a new PerspectiveCamera</p>
  
  <pre><code>camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
  </code></pre>
  
  <p>I added a few buttons for zoom in, out, left, right etc... Here is the code for zoom in which is working good:</p>
  
  <pre><code>var button = document.getElementById( 'ctrlin' );
  button.addEventListener( 'click', function ( event ) {
  
      camera.translateZ( -100 );
  
  }, false );
  </code></pre>
  
  <p>However when I try "camera.translateY" or "camera.translateX" my camera rotates.</p>
  
  <p><strong>I just want it to move along the straight axis.</strong></p>
  
  <p>I realize this could have to do with a locked gimbal setting but I'm unsure how to fix this.</p>
  
  <p>Would it be better to move the object or the camera? How would I do either on a straight X or Y axis?</p>