title: (Cube) Rotation with three.js
body: <p>I'm working on a project in three.js where I have a cube and can rotate it with some buttons (arrows). The rotation works, but after some rotations it doesn't spin in the right direction anymore. Probably because the axes of the cube are shifted? But this confuses me a little bit..</p>
  
  <p>I need the cube to be able to rotate up, down, left and right by some controls. This is basically how it currently works:</p>
  
  <p>When a direction is pressed, say 'right', we update the mesh.rotation.y with tween.js until mesh.rotation.y is rotated in a 90 degree angle.</p>
  
  <pre><code>//SCENE, MESH,.. SETUP
  ...
  
  function rotateRight(){
     var start = {x:cubeMesh.rotation.x, y:cubeMesh.rotation.y, z:cubeMesh.rotation.z};
     //RIGHT: y + 90°
     var end = {x:cubeMesh.rotation.x, y:cubeMesh.rotation.y + degreeToRadians(90),
                z:cubeMesh.rotation.z};
  
     var tween = new TWEEN.Tween(start)
        .to(end, 1000)
        .easing( TWEEN.Easing.Exponential.InOut )
        .onUpdate(function(){
           cubeMesh.rotation.x = this.x;
           cubeMesh.rotation.y = this.y;
           cubeMesh.rotation.z = this.z;
         })
     .start();
  }
  
  function animateScene(){
      requestAnimationFrame(animateScene);
      TWEEN.update();
      renderer.render(scene, camera);
  }
  </code></pre>
  
  <p>What do I need to change to keep this cube rotating in the right directions? Can we fix the axes of the cube so they won't shift? I've read something about world axis vs object axis, is this something I need to change and how can I implement this?</p>
  
  <p>Thanks in advance!</p>