Three.js Global vs. Local Rotation

Be careful on which one you use

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

CSS

body {
	  margin: 0;
}

button {
  position: absolute;
  top: 10px;
  left: 10px;
  
}

JavaScript

var camera, scene, renderer, mesh;
var local = false;

init();
animate();

function init() {
		// Camera setup
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.set( 1, 2, - 2 );
    
    // Scene setup
    scene = new THREE.Scene();
    camera.lookAt( scene.position );

		// Cube Setup
    var geometry = new THREE.BoxBufferGeometry( 0.5, 0.5, 0.5 );
    var material = new THREE.MeshNormalMaterial();
    mesh = new THREE.Mesh( geometry, material );
    mesh.position.set(0.5,0.5,0.5);
    // Note: Until the mesh is rotated, global and local rotation are the same
    mesh.rotation.y = 0.5;
    scene.add( mesh );
    
    // Add grid and axes
    scene.add( new THREE.GridHelper( 4, 10 ) );
    scene.add( new THREE.AxesHelper() );

		// Add renderer
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    // Create rotation toggle button
    var button = document.createElement("button");
    button.innerText = "Local Rotation Off";
    button.onclick = () => {
      local = !local
      if (local) button.innerText = "Local Rotation On";
      else button.innerText = "Local Rotation Off";
    };
  	document.body.appendChild(button);
    

}

function animate() {

    requestAnimationFrame( animate );
    
    // This is GLOBAL
    if (!local) mesh.rotation.x += 0.03;
    // This is LOCAL
    else mesh.rotateX(0.03);
    
    renderer.render( scene, camera );

}