Three.js - rotating an Object3D around an axis

Question

I'm trying to rotate a mesh loaded into an Object3D using OBJMTLLoader.

var obj = new THREE.Object3D();
// loading and stuff

obj.rotation.y += 0.1; //inside the update function

This works as it should, but only for y and z axes. Using the same code, but for the x axis yields the same result as rotating it around the z axis, but clockwise instead of counterclockwise.

Unfortunately, I need to rotate it around the x axis.

var xAxis = new THREE.Vector3(1,0,0);
obj.rotateOnAxis( xAxis, 0.1 );

This does rotate the object around the x axis.

However, I want to tween the rotation of the object, so I need a way to explicitly change the angle an object is rotated by, instead of rotating it for a specific amount.

Any ideas why obj.rotation.y and obj.rotation.z work properly, but obj.rotation.x doesn't?

putting a live example up e.g. as a jsfiddle would help greatly in figuring this out. sound very strange so far but is probably something simple. — antont
thanks for sharing the solution, makes sense now and I'm glad that learned how such a situation can happen. — antont

ivan ivan · Accepted Answer · 2015-04-09T18:48:51

Upon loading the mesh (before trying to rotate it around the x axis), I rotated it by 90 degrees around the y axis. Because of the default Euler order (which is XYZ), the local axes no longer corresponded to the world axes.

obj.eulerOrder = 'YXZ';

Using the above line of code before rotating the mesh around the y axis solved the problem.

A pretty good explanation of Euler order can be found here.

Three.js - rotating an Object3D around an axis

1 Answers