My goal is to rotate an object around the world axis. I came across this question on Stack Overflow: How to rotate a object on axis world three.js?
However, the suggested solution using the function below did not resolve the issue:
var rotWorldMatrix;
// Rotate an object around an arbitrary axis in world space
function rotateAroundWorldAxis(object, axis, radians) {
rotWorldMatrix = new THREE.Matrix4();
rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
rotWorldMatrix.multiplySelf(object.matrix); // pre-multiply
object.matrix = rotWorldMatrix;
object.rotation.getRotationFromMatrix(object.matrix, object.scale);
}
It appears that multiplySelf and getRotationFromMatrix are not defined (resulting in a console error). How can this problem be fixed?
Update
I attempted to use Quaternion, but encountered unexpected behavior. My objective is to rotate an object based on user clicks. Below is the function I implemented:
function mouseUp(event) {
var x = event.clientX;
var y= event.clientY;
var dx = (x - xBegin);
var dy = (y - yBegin);
var quaternion = new THREE.Quaternion();
quaternion.setFromAxisAngle(new THREE.Quaternion(dy,dx,0).normalize(), Math.sqrt(dx*dx+dy*dy)/250.0);
object.quaternion.multiplyQuaternions(quaternion, object.quaternion);
}
The rotation behaves correctly when the object is positioned vertically or horizontally. However, if it is at a 45-degree angle from the x-axis, it rotates slowly in the opposite direction of the click.