Default Object.rotation's axis of rotation (Three.js) - three.js

Question

Does changing the value of an object's rotation property rotate the object about the world axes or the object's axes? For eg
object.rotation.x += 2
Will this rotate the object about the world X axis or the object's X axis?
I tried the following example :
var materials = [];
materials.push( [ new THREE.MeshBasicMaterial( { color: 0xff0000 } ) ] );
materials.push( [ new THREE.MeshBasicMaterial( { color: 0xff0000 } ) ] );
materials.push( [ new THREE.MeshBasicMaterial( { color: 0x00ff00 } ) ] );
materials.push( [ new THREE.MeshBasicMaterial( { color: 0x00ff00 } ) ] );
materials.push( [ new THREE.MeshBasicMaterial( { color: 0x0000ff } ) ] );
materials.push( [ new THREE.MeshBasicMaterial( { color: 0x0000ff } ) ] );
object = new THREE.Mesh( new THREE.CubeGeometry( 20, 20, 20, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() );
object.position.x = 0;
object.position.y = 0;
object.position.z = 0;
object.rotation.x = 0;
object.rotation.y = 0;
object.rotation.z = 0;
object.scale.x = 1;
object.scale.y = 1;
object.scale.z = 1;
scene.add( object );
After i have added the object to the scene i tried the following -
object.rotation.x += Math.PI/4;
object.rotation.y += Math.PI/4;
object.rotation.z += Math.PI/4;
Until now the object rotates with respect to its own X,Y and Z axes.
but doing:
object.rotation.x += Math.Pi/4;
now rotates the object 45 degrees about the World X axis instead of the object's X axis.

Answer 1

The rotations are in local space. However, they are evaluated in a specific order which you can set yourself. The object.rotation property is an Euler, and as you can read in the description of the order-property:
The order in which to apply rotations. Default is 'XYZ', which means
that the object will first be rotated around its X axis, then its Y
axis and finally its Z axis. Other possibilities are: 'YZX', 'ZXY',
'XZY', 'YXZ' and 'ZYX'. These must be in upper case.
Three.js uses intrinsic Tait-Bryan angles. This means that rotations
are performed with respect to the local coordinate system. That is,
for order 'XYZ', the rotation is first around the local-X axis (which
is the same as the world-X axis), then around local-Y (which may now
be different from the world Y-axis), then local-Z (which may be
different from the world Z-axis).
(Emphasis added by me).
Consider the following example, every cube is updated with the same y-axis rotation. In every case the rotation is happening around the y-axis in local space, but:
The first cube has not been rotated in any other axis, making its
local space axis the same as the world space axis.
The second cube has been rotated around its x-axis, which means that
the y-axis is also rotated.
The third cube has also been rotated, but the order of rotation is
changed so that the y-axis rotation happens first, while it is still the same as the world y-axis, and the rotation around x happens afterward.
const canvas = document.getElementById("canvas");
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(10, 2, 20, 40);
const renderer = new THREE.WebGLRenderer({ canvas });
const light = new THREE.PointLight();
light.position.set(0, 5, 10)
scene.add(light);
camera.position.set(0, 0, 25);
const material = new THREE.MeshLambertMaterial();
const geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
const cube1 = new THREE.Mesh(geometry, material);
const cube2 = new THREE.Mesh(geometry, material);
const cube3 = new THREE.Mesh(geometry, material);
cube1.position.set(-2, 0, 0);
cube2.position.set( 0, 0, 0);
cube3.position.set( 2, 0, 0);
scene.add(cube1);
scene.add(cube2);
scene.add(cube3);
//The first cube is not rotated
cube1.rotation.set(0, 0, 0);
//The second cube is rotated pi/4 rad around X
cube2.rotation.set(Math.PI/4, 0, 0);
//The third cube is rotated pi/4 rad around X
//AND the rotation order is set to YXZ to make the y-rotation happen first
cube3.rotation.set(Math.PI/4, 0, 0);
cube3.rotation.order = "YXZ";
let t0 = performance.now();
function update(){
const t1 = performance.now();
const rotation = 0.001 * (t1 - t0);
cube1.rotation.y += rotation;
cube2.rotation.y += rotation;
cube3.rotation.y += rotation;
renderer.render(scene, camera);
t0 = t1;
requestAnimationFrame(update);
}
update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.js"></script>
<canvas id="canvas" width="400" height="200"></canvas>