I've encountered several different methods that claim to rotate an object around the world axis, but they all seem to rotate the object around its own axis instead of the world's. Can anyone advise on the correct approach to rotate an object around the world's axis?
If my issue is not clear, here's a visual representation of the problem:
Edit: I forgot to mention that I am working with Three.js
Edit2:
//camera is the object I intend to rotate
//I attempted another method using Euler, but it did not yield the expected result
/**Method 1**/
//Came across this solution on Stack Overflow
var rotateAroundWorldAxis = function(object, axis, radians) {
var rotWorldMatrix;
rotWorldMatrix = new THREE.Matrix4();
rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
rotWorldMatrix.multiply(object.matrix);
object.matrix = rotWorldMatrix;
object.rotation.setFromRotationMatrix(object.matrix);
}
//implementation of the method
rotateAroundWorldAxis(camera, new THREE.Vector3(0,1,0), movementX*-0.001);
rotateAroundWorldAxis(camera, new THREE.Vector3(1,0,0), movementY*-0.001);
/**Method 1**/
/**Method 2**/
//Attempted this other method as well
var q = new THREE.Quaternion();
q.setFromAxisAngle( new THREE.Vector3(0,1,0), movementX*-0.001 ); // axis must be normalized, angle in radians
camera.quaternion.multiplyQuaternions( q, camera.quaternion );
/**Method 2**/
//movementX and movementY are values obtained from mouse movements while using pointer lock.
//These values function correctly when using rotateOnAxis.