title: 3D camera X axis rotation
body: <p>I have litteraly no clue how to explain this problem, since it is is self explanitory if you look at the following video's I made.</p>
  
  <p>No Angle - 
  <a href="https://www.youtube.com/watch?v=R_GtaXWpP9c&amp;feature=youtu.be" rel="nofollow noreferrer">https://www.youtube.com/watch?v=R_GtaXWpP9c&amp;feature=youtu.be</a></p>
  
  <p>Angle -
  <a href="https://www.youtube.com/watch?v=RoaZMccGYGo&amp;feature=youtu.be" rel="nofollow noreferrer">https://www.youtube.com/watch?v=RoaZMccGYGo&amp;feature=youtu.be</a></p>
  
  <p>As you can see in the No Angle version you can rotate the Y axis perfectly normal, but when you control the X axis (as seen in the 'Angle' video) you rotate in a weird way, which makes sense. I want, as you may have guessed, that the X axis stays the same whilst the Y axis keeps moving left to right, I dont want the Y axis to dip from positive to negative.</p>
  
  <p>I hope this makes sense and hopefully there is a good explanation for it, i'm probably missing a  website which has all the formulas, but im not sure what the 'problem' is called.</p>
  
  <p>Some code of my rotation script:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var pressed = [0,0,0,0,0,0,0,0];
  function update() {
      $('#w').html(pressed);
  }
  setInterval(update, 100);
  $(document).keydown(function(evt) {
      if (evt.which == 87) {
          pressed[0] = 1;
      }
      if(evt.which == 68) {
          pressed[1] = 1;
      }
      if(evt.which == 65) {
          pressed[2] = 1;
      }
      if(evt.which == 83) {
          pressed[3] = 1;
      }
      if(evt.which == 39) {
          pressed[4] = 1;
      }
      if(evt.which == 37) {
          pressed[5] = 1;
      }
      if(evt.which == 38) {
          pressed[6] = 1;
      }
      if(evt.which == 40) {
          pressed[7] = 1;
      }
      //console.log(evt.which);
  });
  $(document).keyup(function(evt) {
      if (evt.which == 87) {
          pressed[0] = 0;
      }
      if(evt.which == 68) {
          pressed[1] = 0;
      }
      if(evt.which == 65) {
          pressed[2] = 0;
      }
      if(evt.which == 83) {
          pressed[3] = 0;
      }
      if(evt.which == 39) {
          pressed[4] = 0;
      }
      if(evt.which == 37) {
          pressed[5] = 0;
      }
      if(evt.which == 38) {
          pressed[6] = 0;
      }
      if(evt.which == 40) {
          pressed[7] = 0;
      }
  });
  function check_pressed() {
      if(pressed[0] == 1){
          camera.position.z = camera.position.z - 0.1;
      }
      if(pressed[1] == 1){
          camera.position.x = camera.position.x + 0.1;
      }
      if(pressed[2] == 1){
          camera.position.x = camera.position.x - 0.1;
      }
      if(pressed[3] == 1){
          camera.position.z = camera.position.z + 0.1;
      }
      if(pressed[4] == 1){
          if(camera.rotation.y &lt;= Math.PI * -2) {
              camera.rotation.y = 0;
          } else {
              camera.rotation.y -= 0.03;
          }
      }
      if(pressed[5] == 1){
          if(camera.rotation.y &gt;= Math.PI * 2) {
              camera.rotation.y = 0;
          } else {
              camera.rotation.y += 0.03;
          }
      }
      if(pressed[6] == 1){
          if(camera.rotation.x &gt;= 0.5) {
              camera.rotation.x = 0.5;
          } else {
              camera.rotation.x += 0.01;
          }
      }
      if(pressed[7] == 1){
          if(camera.rotation.x &lt;= 0) {
              camera.rotation.x = 0;
          } else {
              camera.rotation.x -= 0.01;
          }
      }
  
  }
  setInterval(check_pressed, 20);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;My first three.js app&lt;/title&gt;
    &lt;style&gt;
     body { margin: 0; }
     canvas { width: 100%; height: 100% }
    &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;script src="https://threejs.org/build/three.js"&gt;&lt;/script&gt;
    &lt;script src="js/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/movement.js"&gt;&lt;/script&gt;
    &lt;script&gt;
     var cubes = [];
              var geometry = new THREE.BoxGeometry( 1, 1, 1 );
              //var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  
     var scene = new THREE.Scene();
     var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
  
     var renderer = new THREE.WebGLRenderer();
     renderer.setSize( window.innerWidth, window.innerHeight );
     document.body.appendChild( renderer.domElement );
  
              for(i = 0; i &lt; 4; i++) {
                  if(i == 0) {
                      material = new THREE.MeshBasicMaterial( { color: 0x63AEDB } );
      } else {
                      material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
      }
                  cubes[i] = new THREE.Mesh( geometry, material );
                  scene.add( cubes[i] );
              }
              cubes[1].position.x = -2;
              cubes[1].position.z = 2;
              cubes[2].position.x = 2;
              cubes[2].position.z = 2;
              cubes[3].position.z = 4;
     camera.position.z = 2;
     camera.rotation.y = 0;
     //console.log(camera.rotation.x);
     var render = function () {
      requestAnimationFrame( render );
  
      //cubes[1].rotation.x += 0.00;
      //cube.rotation.y += 0.01;
  
      renderer.render(scene, camera);
      
     };
     render();
    &lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>